Next.js Projects: Build a Full-stack App with Next.js, Tailwind, Radix UI, and Prisma
ฝัง
- เผยแพร่เมื่อ 1 มิ.ย. 2024
- Learn to build a modern, full-stack, production-grade issue tracker with Next.js (app router), Tailwind, Radix UI, Prisma, and MySQL.
- Want to learn more? Get my complete Next.js series: bit.ly/nextjs-series
- Subscribe for more videos like this: goo.gl/6PYaGF
PART 1: GETTING STARTED WITH NEXT.JS
• Next js Tutorial for B...
LEARN REACT
TH-cam Tutorial: • React Tutorial for Beg...
Complete React Course: bit.ly/3l0vWYR
MORE FROM MOSH
Courses: codewithmosh.com
Blog: programmingwithmosh.com
Facebook: / programmingwithmosh
Twitter: / moshhamedani
TABLE OF CONTENT
0:00:00 Introduction
0:02:06 Prerequisites
0:02:55 Source Code
0:03:34 How to Take This Course
0:04:33 Project Roadmap
0:06:49 Setting Up the Development Environment
0:08:07 Creating a New Project
0:10:59 Building the NavBar
0:19:52 Styling the Active Link
0:26:10 Setting Up MySQL
0:28:09 Setting Up Prisma
0:29:55 Creating the Issue Model
0:36:36 Building an API
0:43:31 Setting Up Radix UI
0:46:04 Building the New Issue Page
0:51:02 Customizing Radix UI Theme
0:55:55 Ultimate Next.js Course
0:56:56 Adding a Markdown Editor
0:58:52 Handling Form Submission
1:07:36 Handling Errors
1:14:26 Implementing Client-Side Validation
1:20:40 Extracting the ErrorMessage Component
1:24:03 Adding a Spinner
1:28:24 Discussion- Code Organization
1:32:22 Ultimate Next.js Course
#nextjs #reactjs #webdevelopment
![โอ้มายก๊อด! ไม่ถึงชั่วโมงหมดเป็นแสน 😅 [cc] แดนแพทตี้ SS2 | EP.42 |](http://i.ytimg.com/vi/OH2ShXfO6tA/mqdefault.jpg)
🚀Want to master Next.js?
- Check out my full Next.js course: bit.ly/nextjs-series
- Subscribe for more videos like this: goo.gl/6PYaGF
for anyone having issues around 53:00 , add important to the end of the line of css in the theme-config ; --default-font-family: var(--font-inter) !important;
thanks dude, you've saved the world today :D
thanks bro
I love your explanation style and speed. This is really helpful to code along and get the feel of how to think like an engineer. More like these would be amazing; different stacks, different projects. Criminally under-rated content.
You have made huge impact in my journey as a developer. Glad to see you progressing.
Thanks Mosh. Back when I was starting out, your python tutorial helped me immensely. Now again, you have rescued me from weeks of agonizing pain, lol. Thanks once again.
I can't express how much I have learned from you! Thanks for the hard and smart work.
15mins into this course and I was able to solve a problem in my portfolio website. Thank you so much Mosh. Please all learners ensure disable ads blockers, don't skip ads. When ads plays, see it as break time and quickly go review whatever you have learnt.
We downloaded this video and are watching offline)))))
My kinda guy 👍👍@@xaosland
Hi Mosh, I'm a big fan of your channel and have learned a lot from your tutorials. I wanted to kindly request if you could create a beginner's tutorial series for Golang. I'm really interested in learning the language, and I believe your teaching style would make the learning experience enjoyable. Thank you for considering my suggestion, and keep up the amazing work
Thank you, your tutorials helps me to to get my job and work with real projects.
Mosh, you are the best teacher.
Mosh has helped me a lot on my software engineering journey since discovering him in February this year. Today, I'm able to build Django APIs, web apps, and Python scripts for everyday tasks and his courses have been very instrumental in helping me get to this level.
You are the best, because of you I got an amazing job. Thank you for such great content sir.
great tutorial, please continue making more such project tutorials. Thank you Mosh
You are amazing Mosh! Thanks for your great courses. 🙏💯
I have completed already. It's Awesome course ever i have seen on this earth... thank you so much.mosh
man love the tutorials. Only thing I could even say is that explaining a little bit more on why we are doing some of things would be useful, example being, we import react-hook-form controller, maybe tell us a small bit about what that does. Most of the time you are good a breaking things down, just saying a little more expansion would be the cherry on top.
There are other situations where for an intermediate dev, it would be useful. Hope that makes sense for future videos
IVE TAUGHT MYSELF ALOT THROUGH YOUR VIDEOS
Great content as always.
Never disappointed when I watch a Mosh video.
what a beautiful project, i love out of the box ideas projects
❤I enjoyed your videos! Do you have any plans to create a tutorial on building an inventory management system using Next.js? Your tutorials are fantastic, and I'd love to see one on this topic! I also want to include some Python and machine learning, as well as utilize free APIs for data integration.
I love your leactire and way of teaching
Great material! - As always! 👏
You are the best teacher, brilliant, but there is always one thing missing from the courses: Tests.
We cannot create a professional application without testing. Whether regression, unitary, integrations or end to end.
Thanks for your awesome work 🎉
I’m actually working on a separate course on testing.
@@programmingwithmosh oh thanks 🙏 awesome 😎
really want more like this!
You are the best teacher ever 😊
Awesome tutorials really love it thankyou mosh
Bro's rolling out tutorials for every JS framework. Wow.
Thank you mosh i learn alot just because of your amazing teaching style but here I have a problem if you can answer me how to choose the right framework for the project. i am confused from a long time?
is there going to be another part making it so users can log in, see their issues, stuff like that or is this the end of this project? really enjoyed it, great job
Thank you so much for sharing your experience and knowledge, Sir.
can't wait for it!!!!
Very good tuto, we wait for the next part, thnx
I really enjoy this video, thank you so much
Awesome... My love for you grows each day master
Great Teacher. Take my love Mosh
Mosh thank you!
You brush me up I really loves the course nextjs part 1 particularly on setting up search params, prisma, and next auth. 😊.
One thing I want your advice is after I finished the nextjs series. I would like to learn your Design Pattern. Could I learn your design pattern course even though my primary language would be use is javascript?
Please help me what requisite I need to do before taking that course
That's like doing DSA in JS🤦♂
Anyways, if you aren't going to do Design Patterns in C++ [or some would say Java, C# or Python], then don't bother too much about it.
Design Patterns have their strength when coupled with OOP.
many thanks, dear Hamedani ❤
Mosh is master at teaching, no other youtuber can compare
Thank you Mosh, your teaching style is pedagogy. Please let me know about course and course contain. Redux is also available ?
Hi Mosh, would you please tell me which theme you are using in the VSCODE
Whenever I fell depressed due to my IIT preparation , I remember that I have Mosh's courses
"Hi there! I've been exploring Next.js and I'm really interested in creating an inventory management system with it. It's a crucial project, and I believe a tutorial from your channel would be incredibly insightful and valuable. Could you please consider sharing your expertise on this topic? Your tutorials are always well-explained and appreciated."
you should apply the concepts to develop inventory management system
When are you creating the database? Or does prisma do it for you?
I have been off track for a year now and forget everything I learned.
Once again I'm thinking about starting over with this course, with Mosh's course..
Hi Mosh
What are the software you use for your tutorial videos.
I so much love your presentations.
What are the limitations of using Nextjs as a backend instead of using Express or Nest.js ?
Excellent ! Best of the best!
Nice tutorial
As men we don't say much, so much appreciated.
Can’t wait 😮
Mosh you're the best ❤️
Why are you not using the isSubmitting from react-hook-form formState ?
Thanks
Next up drizzle ORM would be a great option to build with 🎉
Is datagrip necessary for this? Can i exercise the same result without using datagrip?
This has been one of the best time investments I have had over the weekend☺☺. Thanks Mosh.
Hi Mosh, can you please make video how to use Astro 3.0 in generally
Hi @21:56, I have noticed that the logs are printing multiple times on each page navigation. What can be the potential reason for this ?
Hey mosh, a friend of mine recommended your courses to me. Will there be a special offer this year? I'm just waiting for it so I can join 😊
When I saw the part 2 is here....I am like lets finish 1st part quickly
can you share the link please, i also want to finish 1st part, thanks in advance
Can't wait!!!!
Hi Mosh I am facing challenges in editing the layout.tsx on this tutorial
Mosh when you see all theses innovations in the JS community and React/Next and all the rest do you feel C++/C#/JAVA/PHP/PERL will never catchup in term of popularity or web development ? they will become second citizen programming language or more niche ?
Thank you sooooooooooo much
The link you use for prisma code (Best practice for instantiating PrismaClient with Next.js min 40:32) does not exist anymore. Please update your video instructions to reflect this.
Hello, Mosh. Your content is really good. I really like your narrative style and I wanted to buy the Next.js series but it seemed expensive. Do you plan to share this content on Udemy?
Great video u made with mysql there is no video like that on next js with mysql
There is play list for frome were i start to learn web developer ?
One more thing, make a small video that how to deploy node express to GCP, AWS and Azure by using docker and NGINX plus user database server from any service to connect with node express project and it should be run fastly every time not give response slower
When Will be the next part of this Application Tutorial will be posted ???
Mosh is great !
mosh you are awesome
I can't override Radix theme default font family, seems that Radix repo having an issue with that
Hello sir, which theme and font using in vscode?
Preparing my 🍿. 😊
I'm not familiar with typescript. is it possible to have javascript version ?
This code fails static pre-rendering and will fail to actually deploy anywhere.
The issue is with the SimpleMDE, it is attempting to access a 'navigator' resource on the server and it needs to be dynamically imported and put into a variable so that it doesn't fail to static-prerender.
THANK YOU for the video... You gained a new subscriber... by the way, do you have a discord channel?
Mosh sir please give me the idea for a final year project in web based domain. Your help is a lot to me. ❤
Hi, can you please make a video on, how to create the same effect as daisyUI website.
@programmingwithmosh When will you release the NextJS 14 course? I currently pay the monthly subscription, Thank you for your contributions!
This isn't a full tutorial. I think it would be helpful if you are clear with that at the start itself
Ja feel the same way I thought I was the only one , he did the same thing with the React beginner video in the beginning he spoke about the game app he will be creating but never did I even searched for part 2 of the video in his video catalog nothing .
Ja feel the same way I thought I was the only one , he did the same thing with the React beginner video in the beginning he spoke about the game app he will be creating but never did I even searched for part 2 of the video in his video catalog nothing .
I have been creating my NextJS app for a long time now and it is working very well when I run npm run dev. When I try to host it on vercel it does not work. Always says Build failed. I cant get to fix it. how do you avoid such a situation. This is very stressful. I can only view my app on localhost and i am almost giving up. It won't let me deploy.
Amazing
I am a beginner with mysql. when I tried to add mysql data source in DataGrip it showing the error 'issue-tracker' database not found. How can I solve this issue?
can you do a frontend project like an ecommerce store , thanks
how do you create a in layout.tsx like that it shows up an error
I'm having problem with setting the default Font to Inter. Followed all the steps but default family is still apple-system.
From the console we can see that .radix-themes we have set in theme-config.css are getting overridden by the .radix-themes values, and therefor default font family is not being set to Inter.
Is there a better way to enforce the use of the Inter, without adding the !important ?
Also creating our own isSubmitting state is not needed...you can use isSubmitting from the formState.
I'm having the exact problem. Not sure why.
same, fuk this tutorial, btw how to apply !important?
.radix-themes {
--default-font-family: var(--font-inter) !important;
} works for me
what font are you using?
دمت گرم , عالیه
When is the next part coming of this video?
this instructor seems nice
please make a course on PHP and Laravel framework
Plz a series on next with mysql ecom project
I guess this is not the complete course? or for that I need to join your course... please clarify that
which vs code theme also nice tutotal
Can you make a video on how to implement google AdSense on next js 13 without losing SSR?
Hello there I would like to ask about the The Ultimate React Native Series Course in your website. Why does it cost -$29 ?? Id like to buy it and it cost $99 usd in bundle. Whats goin on? Thank you.
We love you mosh
Iran
Does anyone know the ohmyzsh theme he is using for his terminal?