Master NextJS 13: Build and Deploy a Modern Full-Stack App in Just 5 Hours!

In this free NextJS 13 course, we’re building a complete full-stack API service website together. I chose this topic because it allows us to get a great feeling for how a frontend and backend work together in the new NextJS 13.

The best features:
– NextJS 13 Client & Server Components
– Rate Limited API routes
– Protection of sensitive routes
– Beautiful light / dark mode
– Full authentication
– Typescript
– TailwindCSS
– Super fast Planetscale database
– A complete API key system to create & revoke user keys

.. and much more!

⭐ The project we’re building is live on the web: https://www.similarityapi.com/
⭐ The GitHub repository (feel free to give it a star): https://github.com/joschan21/similarity-api
⭐ Discord: https://discord.gg/zPd7jQdcq5

How to use the “FC” snippet I keep using in the video:
Step 1: Paste the following into your Settings; User Snippets; typescriptreact.json: https://pastebin.com/PWzQGH08
Step 2: Type “fc” and hit TAB.
Step 3: If you still can’t figure it out, here’s me explaining it in detail: https://www.youtube.com/watch?v=Dert_kpLWE0&t=2s&ab_channel=Joshtriedcoding

Timestamps:
0:00 What you’ll learn & demo
4:26 Laying the app foundation
16:07 Creating important reusable components
42:28 Creating a navbar with light /dark toggle
1:24:13 Summary: What have we done so far!
1:29:12 Styling the homepage
1:34:37 Creating the documentation page
2:07:23 Summary: What we have done so far!
2:12:26 Implementing authentication
2:24:33 Creating the database models & finishing auth
3:19:00 Creating an API route to create API keys
3:42:12 Dashboard: Implementing the Table
3:55:15 Summary: What we have done so far!
3:56:20 Finishing the Dashboard
4:05:53 Creating an API route to revoke API keys
4:25:28 Implementing the similarity API endpoint
4:49:56 Protecting sensitive routes
4:52:35 Rate limiting our API
5:03:54 Creating a Login page
5:14:10 Summary: We’re done!
5:15:02 Deployment
5:22:24 Final similarity endpoint test
5:23:00 Conclusion: Good work!

I put a lot of effort into this course and appreciate a like and a star for the GitHub repo if you felt that this video was worth your time. Thanks!