Build and Deploy a Full Stack Next 14 MERN Events App with Stripe, Typescript, Tailwind
Вставка
- Опубліковано 15 тра 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
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
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!
💖💖💖💖💖💖💖
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.
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!
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
Thank you Adrian. Your project based tutorials have been super helpful
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.
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! ❤
What i like about Adrian is that he build advanced projects and also contribute to the open source community, unlike other UA-camrs 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.
Awesome as usual, Adrian. Thank you for another one!
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. :)
Great work, Adrian! Another wonderful project video.
Thank you! Cheers!
You just posted a video I have been waiting for 🎉😊 thanks Adrian.
My pleasure!
Came here as soon i got the mail! Excited to learn new things. Perfect holiday gift 🎁 🎁
Happy holidays!
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!
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.
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.
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 :)
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
Awesome as always😍 Thank you again Adrian!
My pleasure!
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.
Loved the stack looking forward to go through and learn more out of it. Thanks for notifying me 🎉
Thank you!
I agree with the repeated stuff you provide the snippets to speed up the process
Thanks Adrian. You're improving lives
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!
I can never stop thanking you adrian
Enjoy!
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
The Best, thank you for all the hard work, and right on time.
Much appreciated!
I immediately over here after receiving email news letter ❤
Coolest project for resume 😉🤞
Yay! Thank you!
We're looking forward to seeing more of these free high value project tutorials in the upcoming months
More to come!
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.
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.
Thank you very much Adrian, the tutorial was great as usual !
if you deployed this project pls give me a link)
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 😊
Was feeling blue then saw this notification code .
how can you feel blue when there is soooo so much software to be improved??
Enjoy!
your tutorials has really helped me
I am following you from Ethiopia and you are the best teacher out here thank you for your effort
Thank you!
We love it. I love the way you teach
Hey, i finished it! Thank you for this tutorial, i learn so much from you
you deploy this application ? if yes please give link)
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 :)
Finished it! Thanks for a great tutorial!
Hi :)
The deployment link are good or there are some issues ?
Really appreciate your high quality videos for free
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 ?
Another awesome project! 🤩🔥 Thanks Sir!
Thank you!!
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
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
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
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
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???
Nice i was looking for those ficzers !! thanks!
Next 14 is amazing. Currently building mern with spline. Next14 makes it incredible quick
It does!
It was funny to see moment with uploadthing/tw :)
Someone was also watchful at this moment and noticed? :D
Thank you for your videos. You are so awsome. Fully agreed copy paste the parts if it has been taught.
beautiful project, i love ideas out of the box .
Thank you! Cheers!
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.
Great yt channel is back with great content 😍
You already know!
Congrats on another massive project
Enjoy!
Sir i was just waiting for your video and here it is 🎉
Hope you enjoyed it!
How many hours do you need to produce such a high quality content? I really appreciate that.
Continue providing the necessary documents and files to make the learning process easy
Another great video, thank you Adrian
Glad you enjoyed it
Gotta love...that email notification code...cuz I like what I see❤
Right!!
Wow! simply amazing! thanks for sharing!
Thank you!
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?
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! ))
that was perfect
Thank you very much😍❤
What a nice one ❤❤, keep posting bro ❤
Thanks!
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.
thank you for everything you do, can you do a tutorial on using firebase with nextjs to properly architect and organize your project. THANKS
What a great video, I enjoyed it. Wonder what would it be like powering the backend with nestjs.
🤔
thank you for everything love your contents
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!❤
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
You are always a legend big bro
this is a great way to end the 2023. Thans JSM team!!!
Enjoy!
Amazing tutorial !! Do house selling and renting web app next video pleaseeee
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 ?
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.
Can't express I just love your content
Thank you!
Its great as always Adrian.., please bring a followup video on Figma and Prisma..🔥🔥
You got it!
Yes, I want this type of foundations!
The master again with a wonderful app 🎉
🎉🎉🎉
Thanks Adrian for the wonderful app.
No problem 👍
Can't wait to start this one
Enjoy!
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?
this video is good, just few things need to avoid when using a production version or when you build for client.1) dont use shadcn, its a complete mess libarry and conflicting with tailwind css also loading unnessary css in components, you can check for input elements. 2) dont use clerk, its saving users data not good for client, auth must be safe and secure. 3) dont use uploadthing, unnessary library with lots of code, where file upload can done with 8 lines of code with local storage or aws.
yes right, these 3 packages are unnecessary. clerk is worst
any begginer friendly suggestion replacment?
@@Sina-vq2jj try to create UI in nextjs without backend or server actions
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.
That three dots make me annoy while coding along with you!
I eagerly wait for your new projects.... ❤
More to come!
Just another EPIC video
Thank you!
Good work! Can you collaborate with backend developers (Symfony and Laravel) on a project next time?
It is better to copy those codes related to database creation models and webhooks user creation from clerk data as it helps in focusing more in designing the applications and implementation of core functionality
It's alright to copy the repetitive part. It saves a lot of time for you and everyone too!
I think the three dot in className make me difficult to follow, 😂 but its just my opinion. Keep create best course like this.👍
i like your videos so much, more next js videos
Your explanation throughout the project is amazing but I actually believe that copying even a single code from your GITHUB REPO makes us wonder what has been done in that code. It will be really helpful. If we are copying the code you you can explain that code briefly that what has happened in that code.
You Are Great Bro ❤
Appreciate it!