Build and Deploy a Full Stack MERN Next.js 14 Threads App | React, Next JS, TypeScript, MongoDB
Вставка
- Опубліковано 15 тра 2024
- Develop Threads, Next.js 14 app that skyrocketed to 100 million sign-ups in less than 5 days, and dethroned giants like Twitter, ChatGPT, and TikTok to become the fastest-growing app ever!
Ultimate Next 14 Course is now live: www.jsmastery.pro/next14
Next.js 14 eBook: resource.jsmastery.pro/nextjs...
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
⭐ Clerk - clerk.com/?...
💼 Land your dream job with expert mentor guidance or get your money back. To find out more, apply here: jsmastery.pro/masterclass
If you’re experiencing Error: ClerkInstanceContext not found, apply the following Fix: Wrap your app with ClerkProvider in both /auth/layout.tsx and root/layout.tsx files.
📚 Materials/References:
GitHub Code (give it a star ⭐): github.com/adrianhajdin/threads
Public folder (assets): drive.google.com/file/d/1lg7M...
GitHub Gist Code: gist.github.com/adrianhajdin/...
In this video, you'll:
- Master Next.js 14 with Server Side Rendering
- 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
- Explore & integrate new Next.js layout route groups
- Validate data with Zod
- Manage forms with react hook form
- Create reusable components
- Build a solid application architecture
- Deploy the application and more!
💻 Join our Discord Community - / discord
🐦 Follow us on Twitter: / jsmasterypro
🖼️ Follow us on Instagram: / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
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
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!
I'm having a weird one with my bio not accepting what I type in it and then it still saying "minimum 3 characters" I've looked all over to try and fix it and I assume its something easy. Can someone point me in the right direction.
Pin this comment Adrian
After logging in with clerk, I get a screen that says "This Serverless Function has timed out. "Your connection is working correctly. Vercel is working correctly." 504 gateway timeout
For those having issues with setting up clerk, I kinda figured a way out.
using the current clerk docs, we will set up the layout.tsx to look this way
import { ClerkProvider, SignedIn, SignedOut, SignInButton, UserButton } from "@clerk/nextjs";
import Head from "next/head"; // Import the Head component from next/head
import { Inter } from 'next/font/google'
import '../globals.css'
export const metadata = {
title: 'Threads',
description: 'Threads next14 v1.00 application'
}
const inter = Inter({ subsets: ['latin'] })
function Header() {
return (
Threads
{/* Mount the UserButton component */}
{/* Signed out users get sign in button */}
);
}
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{/* Set HTML lang attribute and include metadata */}
{metadata.title}
{children}
);
}
this worked for me and I hope this helps someone out too😉
the real problem is in onbording when I submit it returns to the homepage but in Mongodb in collections there no user's datas
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
Thank you!❤️
bhai ye chalta h na ?
@@roshannair5071 nahi chlata bro mera to pura 2 din laga diya isspe 20+ hours ban gaya hai par serverless deploy error aa raha hai . Deploy nahi ho raha vercel par
Yes.
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.
This problem has been bothering me for weeks. Thank you so much for posting this!!
I made that and when I first put in the clerk sign-in and sign-up components I was on localhost:3000/sign-up so it instantly rendered, I was surprised so I pressed the back button in my browser and I think that broke it because it doesn't want to render anymore... do you have a solution for that please?
@@ahmedabdelhameed3916 , have you tried closing the dev server and again running 'npm run dev' ?
life saver?
I did this and still not working.
25:47 If you get the Error: ClerkInstanceContext not found. Add wrapper to your layout.tsx in the (root) folder.
thankyou so much for this
Thanks a lot
Thank you so much for this😭😭❤❤
Much Appreciated!
Threads only came out a couple weeks ago and you already have a 6 hour guide for us. Thank you!
More to come!
thats because all thsi thrads are using the same conecpt its just another social media app copy of twiiter like there is thousands of twitter copies of this kind of apps
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!!
I honestly have no idea how such profound content is on the internet for free!! You're the man bro. Keep it up 👍🏼👍🏼
Thank you!
I really loved the segment with the diagrams where you explained concepts at a deeper level!
This tutorial was fantastic! I learned so much about using Next.js 14, especially Routing, App Router, and Authentication/Authorization. It's exactly what I was looking for to improve my Next.js skills.
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!
I love your explanation on the diagram about server side rendered page! Would love to see more in your videos! I think it's important to know why we are choosing some technologies over others. The diagram showed me how awesome this feature is and I got excited learning that part!
That's such a great video and the explanations you did with the diagrams were really good. Please keep adding those kind of diagrams as it really helps to understand the architecture of the tech stack or how the things under the hood are actually working. Thanks for such a great video.
That diagram explanation was so on point, yes you should definitely do that more!
Excellent tutorial ,Thank you so much Adrian . You never disappointed us in your videos , the explanation via Diagrams is a great idea please keep doing this ! Much love from Tunisia❤🇹🇳
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. 🚀
Much appreciated!
I've learned a ton from this video, and it's motivating me to kick off my own project today. Your explanations are really clear and helpful. Thanks a bunch! ❤
Thank you very much for showing how you debug errors and issues during the development process!!! This is very helpful!
Glad it was helpful!
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
Appreciate it!
Just finished this course. Absolutely amazing and now I have an excellent project in my portfolio. THANKS❤
Thank you for this amazing video!!! You're the best developer!
I want to thank you for explaining "upsert" because it's very useful when you clarify it on the go!
The explanations via diagrams are great, please keep doing this!
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!!
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.
Exactly!
my commutites are not showing
I have watched only 30 minutes, and yet I can only say, thank you for great work with such a good explanation too! Keep on it!
Today, I have completed my 1.2 years on this channel. The thing which I liked the most in your project is the soothing look.
Thank you!!!
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!
Great suggestion!
@@javascriptmasteryI will add soon those time stamps and error encounter as well ❤❤
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
You can do it!
I love your explanation. Awesome videos. Have also read your eBooks and loved them. Looking forward to get this one. Thanks for all the awesome projects Adrian !
Hope you enjoy it!
2:00:00 appreciate the interest and effort you show to teach us the concepts, and i really liked this way of yours, using diagrams and charts to teach a particular concept/topic. thanks a lit and keep it up!
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
Thanks bro! Was wondering why the favicon wasn't working lol
As always, high level projects that really add value to a portfolio. You are amazing, thanks.
I appreciate that!
Excellent tutorial - thank you for taking the time to walk us through this!
I completed this video and created the app side by side. Looks great. I learnt a lot of new stuff. Thank you.
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.
You're very welcome!
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.
Thank you so much!
another video i have watched to the end..i am steadily learning thanks to you and still i got my issues here and there but i know we will win
I was eagerly waiting for your video, and now it's finally here. Thank you so much for providing such a wonderful tutorial!
Enjoy!
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.
Will do!
Absolutely agreed on that!
I highly recommend this tutorial for any React developer. It was truly amazing and valuable. Thank you for sharing it.
Thank you!
I love the small tips which you leave while explaining stuffs. It helps me a lot :))
i liked the graphic designs a lot, please do more!
It will be really great if you can explain more on the backend stuff. I guess everyone would love to learn it
Great suggestion!
This is a fantastic project. And THANK YOU for making this content and everything you make for us!
Disappointed not many people are asking for more diagrams in your videos, do continue so. Great work
Another trending project. You give us what we need. 💙
Awesome
Last chance to get the premium Next.js 13 eBook - resource.jsmastery.pro/nextjs-guide ⏲
Can you pls make a video on your vs code json setup amd extension for react and next js project.. A small bideo amd gist will be enough...
Please build a answer to earn d-app in blockchain I want to learn about its functionality
I was one of the first 1000 persons who won the course free...When will the nextjs course release?
Hi Adrian. Thank you so much for creating such a detailed Threads project tutorial. I'm following all your Next.js projects and really appreciate all of them.
I've one request that I'll be grateful for if you can make a *TypeScript* crash course.
I genuinely learnt a lot from your Next.js and Tailwind CSS crash courses and I know for sure I'll learn everything about TypesScript if you will make one.
Thank You ☺
@@rubelmehmed the same request, pleasee
You should definetly do more explanations through diagrams. I really liked it!
i have searched and searched and am glad i have found this video on youtube now its time to move on as am diving into a new path i will be glad to share with you my progress along the way
i have found it ..though am having some issues with the sign up testing the address is constantly refreshing and not giving any visible results
the message "failed to load response data: No data found for resource with given identifier
You never disappoint us through your projects..💕
Thank you!❤️
you are the best youtuber and full-stack developer I have ever seen
Thank you so much!
Awesome knowledge at no cost, keep it up Bro!
Made it to the end, excellent work, thank you!
Hi please how did you get the communities to read on your MongoDB?
Amazing job on the project and tasks for the future!
I hoped that After the deployment the site would be much quicker but it’s still isn’t good enough (according to the vercel score I get 43/100 in performance)
can you maybe do a crash course on best practices and how to improve the performance on apps in general?
It would be very good for the community and there aren’t enough content in that area (most of the focusing on seo)
+1
One thing I do not like about this app is that it fetches the same data again and again. Things like userInfo should be stored in redux state. That would significantly increase the speed of the site. Also if you do make a node app and expose data fetching to an API you can use the fetch in JS to retrive the data, and cache it, revalidating every few seconds. This happens in the back and you get a smoother and faster app.
That is all I can think of right now of the top of my head.
Also now that I think of it. It's important to use indexing the database that is not in this app. And make sure you use mongoose.connection.close(); when done using the databse. Databse Pooling and Query optimization are most stuff you can do if you love your app hehe. Over all this is a great video for learning nextjs and mongodb schemas and how they work. This in no way teachs you to build a production grade application.
Great as usual. You are an amazing soul. RESPECT! Everyone, buy his courses so he can keep making more amazing content. He needs to live forever. 😁
I appreciate that!
This is really great. I hope to be as great as you someday. Thank you for the knowledge and skills that you are sharing with us.
Thanks for this video!
and explaining stuff through diagrams is kinda my thing, so you should definitely do it.
Just like your email message said, you really outdid yourself on this one. You are amazing bro❤
I appreciate that!
Have been waiting for this 😁😁😁👁️👁️
It's here!
Absolutely amazing! Was waiting for this!!!!
Yay! Thank you!
I just started watching your videos AND THEY ARE INCREDIBLE MAN..
I mean i have watched many react and nextjs and js videos but none are like you 🤞👍
Thank you!!
Dear Adrian,
From the depths of my heart, I extend my sincerest gratitude for your exceptional guidance throughout my React and Next.js learning experience. Your dedication to sharing knowledge has made this journey truly inspiring and fulfilling. Sending you heartfelt thanks and my warmest wishes for a future filled with continued success and happiness.
With immense gratitude,
Muhammad Noman.
You're very welcome
Thanks chatgpt
Great project, and well explained brother ❤
Thank you! Cheers!
Yeah, explanation using flowcharts is a good idea... thanks a bunch for this 👍.
explanation the concepts through the the diagrams provides a clear and deeper understanding of the topics, it would be great if you implement explaining through the diagrams in upcoming vdos apart from that the effort which was made for making this possible for free is phenomenal thank you for introducing such great courses.
What a great project again. Please make a real world Ecommerce website with Admin CRM page with Modern Next Js 13.4 and these technologies
Coming soon!
I love this channel 😊
I learn from this channel and I am going to interview to get pre employee
You got this!
I liked your short explanations with the figures!
Liked the way you taught in graphical format, need more of those please🙌❤
Is it possible to show us how to make a Steam / Epic games Clone that allows us to upload, download and play games? Btw I finally finished your AI Application video and ive never been more proud 😊
Cool idea!
Ultimate Next 14 Course is now live: www.jsmastery.pro/next14
The course used to have a different discount, I was about to buy it but the same discount is not there anymore :C
Unhandled Runtime Error
Error: Failed to create/update user: Plan executor error during findAndModify :: caused by :: E11000 duplicate key error collection: test.users index: usernames_1 dup key: { usernames: null }
Source
lib\actions\user.actions.ts (61:10) @ updateUser
59 | }
60 | } catch (error: any) {
> 61 | throw new Error(`Failed to create/update user: ${error.message}`);
| ^
62 | }
63 | }
64 |
When i am change the user, This error comes. I can not update user and not create new thread(post).how to solve this error??
I can't thank you enough sir... I am so thankful for all your tutorials 🌼
1:59:57 These contents are very inspiring. with more details of the mechanism behind these codes definately can halp us to establish more comprehensive and profould picture of how it works. Again! Thanks for making such a beautiful video for everyone
Waiting for this from a week when you posted the community post a good project can we also see Instagram clone also i know i am getting greedy but this channel provides us that content that i can be greedy😅
Haha I get it! :)
Best tutorial Thanks. AND it is twitter clone - threads and we made threads clone. CLONE CLONE CLONE 😂😅
What? :D
I did like the diagram explanation, I think it would be very beneficial if there is more of that in the future
I have to say this is the best tutorial i have watched and coded along to...kudos!!! please keep up the good work👍👍👍
Please how we fix the home page not revalidating the cache when new data has be added to the database without clicking the reload page button
Hi! I'm at 5:24:42 and I cant post as a Community. I'm getting the organization_id and everything, but I cant get the resutls. Also I've try the Github Code finished version, and Im getting the same results, so I'm guessing the problem is in my Clerk. Someone has the same issue?
Im getting an "Attempting" status at Clerk's messeges
Heyy Buddy same goes for me too. Even I'm getting that issue . Did you find any solution?
if you guys find solution ping me also .@@daarrsshhaannnnn
Yeah me too, could you reslove it?@@JeronimoGinaca
Has anyone found the solution yet lol
🎉🎉🎉
Thanks!
Just finished this course. Absolutely amazing and now I have an excellent project in my portfolio
Hi, I got problem when creating an organization failed to send data to mongoDB
Sup. Were you able to deploy this project on vercel through the process it was taught in this tutorial?
thank you so much for such a excellent tutorial,you really taught me lot.👍
I am not sharing this ❤️💜 it’s a secret
Haha thank you! 😊
I cannot get rid of this error: The `bg-dark-1` class does not exist. If `bg-dark-1` is a custom class, make sure it is defined within a `@layer` directive.
Can someone assist? Thanks
you've tried to apply a tailwind class that doesn't exist. if you hover over @apply flex, it will tell you that it's a replacement for display: flex, but if you hover over @apply bg-dark-1, you won't see anything
What a wonderful thing, thank you from the bottom of my heart. This is what I've been waiting for.
Enjoy!
Thank you so much for this video Adrian I've got a quick request could you consider making a video about VS Code. It'd be cool if you could cover extensions, settings, and customizations you use. I'm sure a lot of us would find that super helpful to improve our coding setup
Tried using Clerk today, and it's impressively powerful. Requesting more styling options though, as many developers, like me, have specific designs to implement.
It's phenomenal!
friend, thanks for existing. you're the best!
You are!
You're putting very hard work to give us valuable contents. Really appreciate you bro 🔥🔥
Thank you so much for this long and elaborate project. Also for being generous in providing the source code too. :)
You're very welcome!
Super clear, Super amazing
You are saving my life as a Junior Developer buddy😭😭😭😭😭😭😭😭😭😭
Thank you very much
Such a great job, so useful
Yesssss...... Diagrammatic explanations are pretty helpful ... Please include more....... &
Greattttt Video!! Thanks a ton
love your videos, going to look into the course when I can afford it. If I had one complaint it would be that you don't explain all of the things that are going on so I think that if you got the tablet and walked us through more of what is going on it would be greatly beneficial. Although it might really add to the runtime
Damn, you're the best mentor ever. Thank God you exist, you literally changed my life.
11/09/2023: I am very excited. I hope to complete it in the next 4 days.
Thank you so much for being a guiding on my learning journey. Your videos have made a positive difference in my life, and for that, I am immensely grateful. ✌✌✌
Finally its here. I've waited for a long time for this
Enjoy!
Your code, your explaination, your editing, and All of your projects are insane bro. Love you from Indonesia. I always waiting notification from your UA-cam. Amazing.
Greetings to Indonesia!
I love your videos man!
I would really love to see a shopify full store video
Great tutorial, Just wanna say please explain all the Schemas and how the server-side rendering is fetching to database with the project entity on the flowchart you drew in this video. Just do this in every video it is very helpful to understand
perfect explanation of the reduce() method, I had some difficulty understanding this method even when working with it lol