Next.js Projects: Build a Full-stack App with Next.js, Tailwind, Radix UI, and Prisma
Вставка
- Опубліковано 10 чер 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
UA-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
🚀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
You have made huge impact in my journey as a developer. Glad to see you progressing.
I can't express how much I have learned from you! Thanks for the hard and smart work.
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.
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.
Thank you, your tutorials helps me to to get my job and work with real projects.
Great content as always.
Never disappointed when I watch a Mosh video.
Mosh, you are the best teacher.
You are the best, because of you I got an amazing job. Thank you for such great content sir.
You are amazing Mosh! Thanks for your great courses. 🙏💯
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
great tutorial, please continue making more such project tutorials. Thank you Mosh
IVE TAUGHT MYSELF ALOT THROUGH YOUR VIDEOS
what a beautiful project, i love out of the box ideas projects
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
I have completed already. It's Awesome course ever i have seen on this earth... thank you so much.mosh
Great material! - As always! 👏
Awesome tutorials really love it thankyou mosh
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 teacher ever 😊
I love your leactire and way of teaching
really want more like this!
Thank you so much for sharing your experience and knowledge, Sir.
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
Great Teacher. Take my love Mosh
I really enjoy this video, thank you so much
can't wait for it!!!!
Awesome... My love for you grows each day master
Bro's rolling out tutorials for every JS framework. Wow.
Very good tuto, we wait for the next part, thnx
Excellent ! Best of the best!
❤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.
Mosh is master at teaching, no other youtuber can compare
many thanks, dear Hamedani ❤
Mosh you're the best ❤️
Thanks
This has been one of the best time investments I have had over the weekend☺☺. Thanks Mosh.
Can’t wait 😮
Can't wait!!!!
Whenever I fell depressed due to my IIT preparation , I remember that I have Mosh's courses
Nice tutorial
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?
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.
Mosh is great !
Next up drizzle ORM would be a great option to build with 🎉
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
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 😎
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..
mosh you are awesome
"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
Thank you sooooooooooo much
Hi Mosh
What are the software you use for your tutorial videos.
I so much love your presentations.
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
Great video u made with mysql there is no video like that on next js with mysql
Preparing my 🍿. 😊
THANK YOU for the video... You gained a new subscriber... by the way, do you have a discord channel?
What are the limitations of using Nextjs as a backend instead of using Express or Nest.js ?
دمت گرم , عالیه
Amazing
When are you creating the database? Or does prisma do it for you?
Waiting 🎉
Hi Mosh, can you please make video how to use Astro 3.0 in generally
As men we don't say much, so much appreciated.
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
Hi Mosh I am facing challenges in editing the layout.tsx on this tutorial
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
Plz a series on next with mysql ecom project
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?
Why are you not using the isSubmitting from react-hook-form formState ?
When Will be the next part of this Application Tutorial will be posted ???
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 ?
Is datagrip necessary for this? Can i exercise the same result without using datagrip?
I can't override Radix theme default font family, seems that Radix repo having an issue with that
sir please tell that which software you use for screen recording
this instructor seems nice
please make a course on PHP and Laravel framework
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 ?
We love you mosh
Iran
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 😊
Mosh sir please give me the idea for a final year project in web based domain. Your help is a lot to me. ❤
Hello sir, which theme and font using in vscode?
There is play list for frome were i start to learn web developer ?
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.
Hi, can you please make a video on, how to create the same effect as daisyUI website.
I'm not familiar with typescript. is it possible to have javascript version ?
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.
When is the next part coming of this video?
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?
WE WAITIN
what font are you using?
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.
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
which vs code theme also nice tutotal
@programmingwithmosh When will you release the NextJS 14 course? I currently pay the monthly subscription, Thank you for your contributions!
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
Give me the knowledge in that dome 🤗🧠
the only suggestion i'd suggest you to please make full stack app that uses the servers like express primsa but on the backend so that we can have the full idea
With Next.js you don’t need Express anymore. That’s the whole point!
@@programmingwithmoshwow