Navigate Select ESC Close

Next.js Projects: Build a Full-stack App with Next.js, Tailwind, Radix UI, and Prisma

2023-10-10 Education
222.6k
4.6k
198
Programming with Mosh
Programming with Mosh
5.1m subscribers

Unlock all features

FREE: Get instant access to 10 AI summaries, chats, or transcripts per day.

Description

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: https://bit.ly/nextjs-series - Subscribe for more videos like this: https://goo.gl/6PYaGF PART 1: GETTING STARTED WITH NEXT.JS https://youtu.be/ZVnjOPwW4ZA?si=yiWvZ96djRq9eX9F LEARN REACT YouTube Tutorial: https://youtu.be/SqcY0GlETPk?si=QHDzD9EaoXoPm1KM Complete React Course: https://bit.ly/3l0vWYR MORE FROM MOSH Courses: https://codewithmosh.com Blog: https://programmingwithmosh.com Facebook: https://www.facebook.com/programmingwithmosh/ Twitter: https://twitter.com/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

Top Comments (10)

@programmingwithmosh 2024-04-12

🚀Want to master Next.js? - Check out my full Next.js course: https://bit.ly/nextjs-series - Subscribe for more videos like this: https://goo.gl/6PYaGF

4 3 replies
@webapple1 2024-01-27

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;

26 6 replies
@sauravkumarjha2838 2023-10-20

You have made huge impact in my journey as a developer. Glad to see you progressing.

12
@imclowdy 2023-10-10

You are the best, because of you I got an amazing job. Thank you for such great content sir.

16
@FutureCodingStars 2025-09-09

I really appreciate how you started with a clear roadmap. The emphasis on refactoring over initial perfection is a critical mindset for any developer. Your use of React Hook Form with Zod for validation is a powerful combination for ensuring data integrity.

0
@typingofthecode 2023-10-10

I can't express how much I have learned from you! Thanks for the hard and smart work. <3

12
@S_tan1 2023-10-10

IVE TAUGHT MYSELF ALOT THROUGH YOUR VIDEOS

2
@code-byte-hub 2023-10-10

Thank you, your tutorials helps me to to get my job and work with real projects.

5
@NobleOsinachi 2023-10-15

Bro's rolling out tutorials for every JS framework. Wow.

0
@FlockofBees 2024-05-29

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.

0

Unlock the Data Inside
Turn Videos into Knowledge

  • Get FREE 10/day: transcripts, summaries, chats
  • Chat with videos, export text & PDF
  • $1 free API credit for RAG, chatbots & research

Free forever plan • All features unlocked

App screenshot