Build and Deploy a Full Stack MERN Next.js 14 Threads App | React, Next JS, TypeScript, MongoDB

📚 Materials/References:

In this video, you'll:
- Learn MongoDB handling of complex schemas, multiple data population
- Create beautiful layouts with TailwindCSS
- Use Clerk for authentication
- Handle file uploads with UploadThing
- Explore Shadcn components
- Listen to real-time events with webhooks
- Understand middleware, API actions, and authorization
- Validate data with Zod
- Manage forms with react hook form
- Create reusable components
- Build a solid application architecture
- Deploy the application and more!

Time Stamps 👇
00:00:00 Intro
00:12:35 Auth
00:27:31 HomePage
01:03:35 Onboarding
01:58:17 Back-end
02:51:42 fetchPosts Homepage
03:01:06 Thread Card Structure
03:25:33 Reply/Comment
03:45:40 Profile Page
04:16:15 Search Page
04:33:55 Activity Page
04:50:15 Community Page
05:03:27 Expose API’s Route Deployment
05:45:27 Task
05:46:50 Final Deployment

[javascriptmastery]

Quick heads up: This tutorial covers Next.js 13, but don't let that number fool you. Next.js 14 is essentially a performance-focused update of version 13. That means every concept, technique, and feature we dive into here is just as applicable and relevant in Next.js 14

*🚨 Important Updates*

⌛ As of July 11, 2023, Next.js has been updated to version `14.0+.0+`. Even though the video may show an older version, rest assured that the entire application functions seamlessly with the latest Next.js version. You won't encounter any issues while following the video.

⌛ Starting from October 26, 2023, Next.js server actions have stabilized. Therefore, there's no need to include them in the `next.config.js` file as an experimental feature flag.

⚡ *Error: ClerkInstanceContext not found*

Wrap your application in `layout.tsx`(both in auth and root folders!)

⚡ *Cannot find module "tailwindcss-animate”*

Shadcn requires the `tailwindcss-animate` package to function properly. Do install shadcn first

⚡ *Syntax error: G:\threads\app\globals.css The max-sm: class does not exist. If max-sm: is a custom class, ensure it is defined within a @layer directive. (122:3)*

The correct format should be `max-sm:hidden` without any space in between. Please ensure that your code formatter is functioning correctly, as it may sometimes introduce such spaces unintentionally.

⚡ *Clerk 401 Unauthorized error*

Ensure you have rightly configured the `middleware.ts/js` file and are using your own envs.

If you encounter any other issues or have questions, please ask in the comments. We're here to help!

[miangee]

I asked for an Instagram clone, and you replied that something better is coming soon. Today is the day, bro, and you never disappoint. I love you, bro! It's a great project. Thank you so much

[reinersplug]

I honestly have no idea how such profound content is on the internet for free!! You're the man bro. Keep it up 👍🏼👍🏼

[adnk]

Threads only came out a couple weeks ago and you already have a 6 hour guide for us. Thank you!

[crisag.]

For anyone just starting this tutorial, there is currently an issue with Clerk and the latest version of NextJS, making it so that the Clerk SignIn and SignUp components don't render. To get around this, make sure you have installed the same version of Next he has. To make it easier on yourself you could copy/paste his package.json file, delete your node modules folder, delete package-lock.json, then run npm install again.

[picozzimichele]

This is a very well done course. I like the fact that the CSS is "pre-built" with custom classes so not to spend hours on styling. The most important parts are the BE integration with MongoDB and the structure overall. Well done!!

[shohanrahman]

2:00:04 The diagram explanation about the backend was absolutely helpful.
Please feel free to make more graphical tablet explanations like it in the future!

[CameronBriggs-tt]

25:47 If you get the Error: ClerkInstanceContext not found. Add <ClerkProvider> wrapper to your layout.tsx in the (root) folder.

[itskrish]

At first I got shocked about, how are we going to handle those communities, profile and these complicated things, but then you introduced Clerk to us. You are so amazing. Thanks for this amazing project.

[anthonybassey]

The most recommended, precise and concise programming tutorial ever. Kudos man and thumbs up to your insights and the impartation you giving to the world. 🚀

[janglad]

It might be a cool idea to add some more detailed timestamps in the description and even have multiple commits on the Github that you can follow along with. Right now when you make a mistake that only shows up 20 mins later it can be very hard to go back to the part of the video where you're working on that file. This would also make it easier to reference in the future!

I'm really enjoying the course to far tho, this was exactly what I needed to get up to speed with Next!

[editin]

1:59:37
Absolutely, explaining some basic concepts in a visual way is always a good thing. And even if we know then, we can refresh our understanding of it or skip that part.

[nguhelon]

This is the most premium free youtube account teaching the most popular javascript libraries. Thank you so very much adrian for your programming content, You can be sure that you impact a lot of newbies, like literally a looot.

[fredyholguin]

38:42 if you paste the ico file and change to the vercel logo just rename it to icon
39:51 if you check the github repository you will see that the middleware file is in the root, if you have a error like not finding the file, try to move it to the src folder

sorry from my broken english, its not my first lenguage

[anasisah]

Just finished this course. Absolutely amazing and now I have an excellent project in my portfolio. THANKS❤

[ankitmukhia]

I haven't start coding yet but, I would say I got full of excitement only watching intro, Just love your content and thanks for giving this to community. Thank you man

[mahfujulalamanik]

You are a very good programming content creator among the most high-class category creators. I enjoy your videos as I'm watching my favorite movies. I don't know how should i say thank you to make you happy. Your videos are really useful for programmer's life.
And your teaching style is incredibly effective, and your dedication to helping me understand complex concepts is evident in every session we've had. Your explanations are always clear, and you have a unique ability to break down challenging topics into manageable and comprehensible pieces.

[andrewtcoder]

Thank you very much for showing how you debug errors and issues during the development process!!! This is very helpful!

[dreamsachiever]

Wow. speechless. I gave up on learning code last year but thanks to you I am back on track and excited to develop my skills. Not there yet, but man I am grateful to you. God bless you

[rayanfernandes]

Damn!! I could only imagine the man hours and effort this video has taken up and all the knowledge of you and your peers summed up in this one, best frontend stack!, backend utilities and tools, changing trends, next.js rolling out new ways to write the app structure every year, New libraries to handle uploads and forms, It takes effort to keep up! Adrian bruh! you have done it, Thanks a ton!!