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!

How to use the "FC" snippet I keep using in the video:
Step 2: Type "fc" and hit TAB.

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!

[joshtriedcoding]

This video was a lot of preparation, filming, and editing work and I really enjoyed it. If you feel it's worth your time, I'd appreciate a like. :)

[alphhs]

Superb content ! Really enjoyed coding along. Looking forward to more Nextjs contents

[romulororizz]

This was one of the finest tutorials i've seen. Thanks for that man, I've been looking for best practices implementations and you showed that and much more really clear, kudos bro!!

[cryptnerd]

Awesome stuff! Best practices and clean code for this cool app, great work! It will be very cool if you decide to make a full CRUD application in your next video where we can create, update and delete data from Database, MongoDB or any database, and combine your best practices from other videos like using react query, nextAuth (maybe with confirmation email link), tailwindcss, hooks, ts, prisma, etc. This will rock. I learned a lot here and i can't wait for next similar videos, keep going with the good work!

[shashankRao]

For anyone who doesn't want to type out the whole list of dependencies.
@emotion/react @emotion/styled @mui/material @mui/system @mui/x-data-grid @next-auth/prisma-adapter @prisma/client @radix-ui/react-dropdown-menu @radix-ui/react-scroll-area @radix-ui/react-tabs @total-typescript/ts-reset @upstash/ratelimit @upstash/redis class-variance-authority clsx date-fns framer-motion lodash lucide-react nanoid next-auth next-themes openai prism-react-renderer prisma react-hot-toast sharp simplebar-react tailwind-merge zod
Welcome :)

[imadmachi]

Thank you Josh for this tutorial, you help me a lot to grasp a general idea about how nextjs works. I now feel ready to dive into the docs

[unfocuseddev]

Great content!

BTW, while setting environment variables in Vercel you can just copy&paste the whole content of the .env file into the first input, and it will populate all the inputs automatically (there is even a tip stating that, below the first input).

[austinamento]

Great work on this video! Really helped with an app I was building. Thanks for all hard work behind this video!

[jormencar]

This look existing. I’ll give it a try in the weekend. Thanks man. Appreciate it. You’re doing great!

[prashlovessamosa]

Hey Josh i didn't know how can I thank you
students like me cannot afford expenses to buy premium courses people like you are lifeline for them
Thank you for providing knowledge for free.

[aslamjm]

cool project man. definitely refreshing than most of the boring todo app youtube tutorials. great work expecting more

[nebbbe]

This is something I’d easily pay for. Incredible. ❤

[pheisar]

Thank you so much, Josh. Your channel is the best I've come across this year, no doubt!

[martiananomaly]

I must say, this project you're building in this video is very refined compared to other tutorials and I appreciate that.

[miscellaneousvideos]

I just watched the demo what you are building. To be honesty its uniqued tutorial what we have on internet. I am saving the video to watch in future because now a days I am busy in a project. I am learning next js. Currently working with laravel

[thecloudterminal]

Great content Josh! Thank you for making this.

[jordand.]

Thanks! It's hard to find quality tutorials like this here.

[raicubogdan]

ooookay, this is right down my alley, exactly my tech stack. i'll surely enojoy this one. just started it and it already look very promising!

[smsibasish]

Wow great video mate! Keep up the good work.

[funterban]

hey, josh it is a great job I really thankful to you for this efforts. in future we want more projects such like content😍❤