Build and Deploy a Full Stack Next 14 MERN Events App with Stripe, Typescript, Tailwind
HTML-код
- Опубликовано: 7 июн 2024
- Build an event organization web app like Eventbrite or Meetup with authentication, event management, search, filtering, categories, checkout, and payments using Next JS 14, Tailwind CSS, Shadcn, React Hook Form, Zod, Uploadthing, React-Datepicker, Mongoose, Clerk, and Stripe.
⭐ Clerk: dub.sh/j4oY3Io
🌟 Become a top 1% Next.js 14 developer in only one course: jsmastery.pro/next14
📚 Materials/References:
GitHub Repository (give it a star ⭐): github.com/adrianhajdin/event...
Code and Assets: github.com/adrianhajdin/event...
💻 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:02:53 - Setup
00:19:53 - Header
00:22:58 - Clerk
00:46:06 - Footer
00:48:27 - Home
00:55:49 - MongoDB Connection
01:11:58 - Webhooks & Clerk
01:29:44 - Deployment
01:37:34 - Create Event
01:48:00 - Zod Validation
01:55:01 - Dropdown
02:05:45 - File uploader
02:20:25 - Date picker
02:33:34 - Form Submission & Actions
03:06:21 - Events Details Page
03:27:43 - Collection (homepage)
03:41:26 - Card
03:54:31 - Delete Confirmation Dialog
03:59:32 - Update/Edit Events
04:11:55 - Related Events
04:16:11 - Profile Page
04:29:22 - Checkout & Stripe
05:03:50 - Order Details
05:06:44 - Search
05:17:03 - Category Filter
05:26:11 - Pagination
05:33:10 - App check and refining
05:36:16 - Final Deployment
Wow, I just stumbled upon your channel, and I am absolutely blown away by the quality of your web development tutorials! The step-by-step explanations make complex concepts so much easier to understand, and the production quality is top-notch.
I've been trying to enhance my web development skills, and your videos have been an incredible resource. The clarity in your explanations and the practical examples have really made a difference in my learning journey.
The 'infold' extension poses a slight inconvenience as it requires rewinding the video to view custom CSS classes, disrupting the seamless learning experience.
Thank you so much for sharing your expertise! Looking forward to more tutorials and improving my skills with your guidance. Keep up the fantastic work!
💖💖💖💖💖💖💖
you've really nailed down the structure of these projects, I bought your jsm pro course a while back and this has been just as insightful, thank you
Hey Bro, you have out done the competition once again, well thought out, and professionally delivered as always. We the development community are truly blessed to have you teach and mentor us via your tutorials and content you produce. Don’t mind the GH copilot suggestions. As for the code you provide us, I think it depends on the level of the developer.
I like the fact we code a lot with you, so for the code you provide, I think keeps us clear on reaching the intended specific development goals during the build, as well as helping with the time it take you to produce and deliver your content.
The beautiful thing is that it you always provide us with an explanation. The other thing is we will have less errors, i.e. (syntax) to deal with while building the project. Once complete, we can modify the code break it fix and truly understand what is happening in our own time.
THANK YOU VERY MUCH!
I love the way you approach troubleshooting and deliver content so beautifully. It helps clarify my concepts and ideas, making it easier for me to write code with enthusiasm and passion.
Your content is amazing! And I personally enjoy that the more tedious code is available to copy! It does not take away from the learning experience for me
Great work, Adrian! Another wonderful project video.
Thank you! Cheers!
For me having the three dots makes it harder to follow along when watching the videos. I liked being able to see the code when you style elements. :)
Adrian I cannot thank you enough brother, God bless! how amazing! first time I see this amount of complexity broken down as much easy as you are! ❤
I ready enjoy all your videos. You always keep us up to date on the newest technologies. I am already waiting on your next video.
Came here as soon i got the mail! Excited to learn new things. Perfect holiday gift 🎁 🎁
Happy holidays!
You just posted a video I have been waiting for 🎉😊 thanks Adrian.
My pleasure!
Thank you Adrian. Your project based tutorials have been super helpful
Awesome as usual, Adrian. Thank you for another one!
Thank you for this amazing tutorial and for helping out. For me personally, I got a bit lost when we started to paste your code. I understand for those who are more experienced this is only tidious work, but for someone like me (a newbie) then Id really like to see you writing out the code so I could get a better understanding of what I am doing. But again, just being able to see such an amazing tutorial (for free), well that is out of this world. Keep up the good work :)
Thank you, Adrian, for creating such a well-designed tutorial and showcasing all the latest cool stuff that we can implement in our future projects. Clerk is my favorite among them, and it will be a great addition to my latest projects.
Since now, I have been using Next.js 13 in all of my frontend applications, and to be honest, I don't see the need to move my projects to Next.js 14 just yet. Seeing how the implementation needs to be done in Next.js 14, I have mixed feelings about it.
There are a few people out there, including Theo and a few more from Vercel, who are trying really hard to convince the community to switch over to the latest version of Next.js. However, for me, server actions are a step in the wrong direction. Perhaps I'm wrong and I don't see the full potential of them yet.
Anyway, you're doing a great job creating such great content that I'm sure many people can learn a lot from. Keep up the good work.
What i like about Adrian is that he build advanced projects and also contribute to the open source community, unlike other RUclipsrs who are selling their source code after the tutorials
Thank you!
You have said it all, we really love Adrian here in Nigeria, Sending Love.
@@javascriptmastery happy new year to you. Continue full stack MERN, is amazing masterpiece videos. We need full stack AI & ML MERN projects. It would transform this channel.
I dont think there's anything wrong in selling source code. These devs have to feed and survive too.
Some might be doing teaching full time.
This is amazing ... Thanks man you just dropped this one at the right time to meet a similar project I was working on. I'll definitely pick inspiration from this one 😊 .. you're the best 🙌
Enjoy!
The UI is super cool too! I love how you explain all the code you write... the best channel for learning to build real-world projects...
Glad you enjoy it!
Thanks so much for everything you do! I have no plan of javascript but am at 3:20:08 from your online shop tutorial and have learned so much on the way. Much better than boring classes where you learn all the theory you don't really need.
Enjoy!
Awesome as always😍 Thank you again Adrian!
My pleasure!
I immediately over here after receiving email news letter ❤
Coolest project for resume 😉🤞
Yay! Thank you!
Thanks Adrian. You're improving lives
Wow, I just stumbled upon your channel, and I am absolutely blown away by the quality of your web development tutorials! The step-by-step explanations make complex concepts so much easier to understand, and the production quality is top-notch.
I am following you from Ethiopia and you are the best teacher out here thank you for your effort
Thank you!
Really appreciate your high quality videos for free
Another awesome project! 🤩🔥 Thanks Sir!
Thank you!!
Hey ! I finish it, and I have already purchased your Nextjs 14 course that is amazing 🎉😁
Hope you enjoy it!
Please did you have any issues in the deployment section of the video
Awesome! I bought the Next course and did this for fun! Yes you will get stuck but just keep at it. Everything is laid out here for you to succeed. I fail everyday but still detemined to keep learning. :D
Oh I finished this tutorial over the weekend. still not done the Stack Overlow clone from the paid course.
I can never stop thanking you adrian
Enjoy!
The Best, thank you for all the hard work, and right on time.
Much appreciated!
I really like your courses. About the inline dots i think it makes it harder. I need to rewind and pause constantly to be able to copy the tailwindcss
Finished the course. This is really great and very insightful. Thanks Adrian.
did you run into the user creation problem when connecting webhook to database
My trigger is not sending or not creating the user in the databse it is giving error 500 can you hwlp mw with that.
@@manishtaker8622 Hi, did you get the fix for that? Even I am facing same issue.
Hi Adrian! An absolutely incredible video. Thank you for the amount of guidance that you bring to us. We are undeserving of such unique and completely helpful tutorials. I like the GH copilot suggestions. I would appreciate you not having us copy/paste code as it slightly dissociates us from the outcome- don't mind thinking/typing through things like the order.model (or at least get a quick walkthrough of the logic of what we pasted). Either way thank you and god bless you for putting out all of these tutorials for us. Cheers, Patricio
We're looking forward to seeing more of these free high value project tutorials in the upcoming months
More to come!
We love it. I love the way you teach
Great yt channel is back with great content 😍
You already know!
Thank you very much Adrian, the tutorial was great as usual !
if you deployed this project pls give me a link)
Adrian this tutorial really gives a comprehensive aspects of the things you really need for nextjs. Your server side logics and implementation is top notch. Big ups!!
By the way the tailwind fold extension makes it harder to read the styles. It makes me move back and forth in playing the video. Also it would be more appropriate if there is available figma file for any project you work on , you could share as well. Thank you.
Exactly.
first of all thank you for all the knowledge you share, i learn alot from it. regarding the skipping of parts and pasting code - i think it can be good for like type definitions and so on, but i would have liked to see for example the update/delete functions - you can go over them super quickly. thank you again :)
Greay stuff as usual Adrian, the auto suggestions is great but i find having to copy and paste code is not so great for my learning. id have to look at the codes over and over to get a grasp, building everything from scratch renforces my learning and makes it easier for me to remember. I know it might get a bit repetitive sometimes but repitition is the father of learning. The point of the course for me is to learn new techniques and not jusy build a cool project. Thank you for all your hardwork. Your videos made me a better dev and landed me a frontend gig.
I love the tutorial and the way you teach! Thank you very much! Just one little thing, please remove the auto collapse for the class names of the elements. It is really hard to keep up with the speed 😊
Loved the stack looking forward to go through and learn more out of it. Thanks for notifying me 🎉
Thank you!
Congrats on another massive project
Enjoy!
Sir i was just waiting for your video and here it is 🎉
Hope you enjoyed it!
your tutorials has really helped me
Another advanced and amazing project. ❤
Please create an intermediate-level MERN stack course with updated technologies. 😇
This is it :)
what are you using for state management context api or redux toolkit ? @@iamsanzu_45insta60
Hey, i finished it! Thank you for this tutorial, i learn so much from you
you deploy this application ? if yes please give link)
Thank you so much for your time sharing many great things with us, I've finished the project and learned a lot of new knowledge, I truly appreciate it
did u get any error while creating the project???
beautiful project, i love ideas out of the box .
Thank you! Cheers!
How many hours do you need to produce such a high quality content? I really appreciate that.
Hey, I have just finished, and I can't thank you enough! ❤
import type { FileWithPath } from "@uploadthing/react";
it show error FileWIthPath not exported
on component/shared/FileUploader.tsx if anyone got the answer please reply
Hi :)
The deployment link are good or there are some issues ?
I really want to do your projects full time to be honest. I have done most of your projects following along. and I want to do this for all the projects but I am scared I will be stuck in the tutorial hell. I desperately wanna watch this video and do this project with you. Quite a pickle I am in. You're my favorite youtuber btw! 💖
Thank you!
I have been in a situation where I was also always in the tutorial hell what saved me was totally disconnecting from coding for sometime and then making a comeback by trying to build my own projects, I got notebooks I started designing everything from UI to the API I would get stuck but thanks to google, chatGPT, watching Videos about my specific issue and also my courage to not give up I ended up really getting it
Next 14 is amazing. Currently building mern with spline. Next14 makes it incredible quick
It does!
this is a great way to end the 2023. Thans JSM team!!!
Enjoy!
Nice i was looking for those ficzers !! thanks!
also yes you moving with the code and hearing your thought process is essentially what builds our mental framework. so please especially for types and how you connect them we will want to understand as much as possible.
Another great video, thank you Adrian
Glad you enjoyed it
I agree with the repeated stuff you provide the snippets to speed up the process
Well as a developer from Iraq, firstly I appreciate what u put to work and wat u give us of a really valuable info.
secondly I just CAN'T access Vercel even with vpn on.
Hi Adrian and thanks for the incredible tutorial and app! Feedback: since ... it has become much more difficult to write styles, you need to pause the video more, please return to the old practice! ))
The project is absolutely amazing !!! I'm junior web dev and I gave myself a goal to complete all of your youtube tutorials.
As a beginner I would love to do everything from absolute scratch without copy-pasting code. Can you reccommend any past tutorials?
Gotta love...that email notification code...cuz I like what I see❤
Right!!
Wow! simply amazing! thanks for sharing!
Thank you!
What a nice one ❤❤, keep posting bro ❤
Thanks!
Thanks Adrian for the wonderful app.
No problem 👍
It was funny to see moment with uploadthing/tw :)
Someone was also watchful at this moment and noticed? :D
Continue providing the necessary documents and files to make the learning process easy
The master again with a wonderful app 🎉
🎉🎉🎉
Thank you for your videos. You are so awsome. Fully agreed copy paste the parts if it has been taught.
Finally, I finished this course. Thank you for creating this wonderful video!! I really like it. I hope next video you won’t use inline fold because it hardly to see the code. 🎉🎉🎉🎉🎉
Bro I'm getting an error in the clerk session can please reply to me if u have completed this video
same with me unable to create the user in the database
@@vilokmasuti4772
@@vilokmasuti4772 Same issue for me
This man is far better than many paid courses thank u adrian 😍😍😘
Enjoy!
You are completely right, I agree with you.
Hello, sir. Firstly, thank you very much for creating such awesome content for us. However, could you please also develop some projects from scratch without copying and pasting code? As a beginner like me, it can be challenging to understand when and where to use TypeScript, generics, and interfaces. Thank you!❤
Finished it! Thanks for a great tutorial!
Hi :)
The deployment link are good or there are some issues ?
Can't express I just love your content
Thank you!
that was perfect
Thank you very much😍❤
Make one separate video of pro tips, which tech all best practices while code writing, and how to optimise and get reference source, and more about different ui framework or library, and all about that library use and projects
Hey! I finished it !!
Thanks for this wholesome Video, there were couple of errors i faced while coding and that was just because the documentation(for few) was updated xD, anyways enjoyed your video and once again a BIG fat THANK YOU!!!
how did you manage to store user data from clerk on mongo db
can you provide me link of your github repo?
I eagerly wait for your new projects.... ❤
More to come!
I think the three dot in className make me difficult to follow, 😂 but its just my opinion. Keep create best course like this.👍
Can't wait to start this one
Enjoy!
Yes, I want this type of foundations!
the 3 dot (inline-fold) extension is making little bit harder to watch or follow your coding. I am also a big fan of you 😀. Thanks for providing us with quality contents.
Its great as always Adrian.., please bring a followup video on Figma and Prisma..🔥🔥
You got it!
Hey!!!! I finished it. You are the best.
Hello, have you encountered any issues with saving user data in MongoDB after creating a user?
@@sandipsarkar1702 Hi, did you fix the issue ?
Just another EPIC video
Thank you!
Amazing tutorial !! Do house selling and renting web app next video pleaseeee
You are always a legend big bro
Love the content so far 🎉 3:20:52, please remove the hiding classname extension so that it's easier to internalise how the styling is rendered, thanks 😊
Will do, thanks!
Bro I'm getting an error in the clerk session can please reply to me if u have completed this video
I agree on that! I had to go back multiple times because once his cursor is out of the className attribute, I cannot see the classes used anymore
best tutorial to date :) cant wait to finish this 44:17 :)
Hope you enjoy it!
thank you for everything love your contents
Just complete the project thank you so much bro love u
Can you share Github repo link?
i like your videos so much, more next js videos
Was feeling blue then saw this notification code .
how can you feel blue when there is soooo so much software to be improved??
Enjoy!
thank you for everything you do, can you do a tutorial on using firebase with nextjs to properly architect and organize your project. THANKS
You have a heart as good as gold! Common good of the society!
Appreciate it!
Amazing course❤
I'm glad you like it
That three dots make me annoy while coding along with you!
Thank you for reminding me to teach myself.
You are so welcome!
It's alright to copy the repetitive part. It saves a lot of time for you and everyone too!
Great looking project and I plan on following along. Wee bit of feedback, the "minimised" className attributes looks very aesthetic, but it's isn't very helpful in a follow along tutorial such as this one. I feel like it means a lot more pausing and rewinding if the opportunity to copy the classes is missed before you click out of the area.