Next.js Projects: Build an Issue Tracker
7h 1m 57s
English
Paid
Course description
Learn to Build Full-stack Apps with Next.js, TypeScript, Prisma, Tailwind, and Radix UI. Clear. Concise. Comprehensive. Tired of piecing together disconnected tutorials or dealing with rambling, confusing instructors? This course is for you! It's perfectly structured into a series of bite-sized, easy-to-follow videos that cover both theory and practice.
Read more about the course
What You'll Learn
- Confidently build full-stack apps with Next.js 13+ and TypeScript
- Master a methodical approach to build software
- Build beautiful, modern UIs with Radix UI and Tailwind
- Implement routing and navigation using the new App router
- Build RESTful APIs
- Use Prisma to integrate your Next.js apps with a database
- Implement user authentication with NextAuth.js
- Optimize your apps for performance and SEO
- Learn VSCode shortcuts to increase your productivity
- Properly structure your Next.js projects
- Apply the latest techniques and best practices
- Troubleshoot errors with ease
- Deploy your Next.js apps
Watch Online
Watch Online Next.js Projects: Build an Issue Tracker
0:00
/ #1: 1- Welcome
All Course Lessons (87)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | 1- Welcome Demo | 02:06 | |
| 2 | 2- Prerequisites | 00:51 | |
| 3 | 3- Source Code | 00:39 | |
| 4 | 4- How to Take This Course | 00:59 | |
| 5 | 1- Project Roadmap | 02:17 | |
| 6 | 2- Setting Up the Development Environment | 01:18 | |
| 7 | 3- Creating the Project | 02:53 | |
| 8 | 4- Building the navbar | 08:53 | |
| 9 | 5- Styling the Active Link | 06:19 | |
| 10 | 1- Setting Up MySQL | 01:59 | |
| 11 | 2- Setting Up Prisma | 01:47 | |
| 12 | 3- Creating the Issue Model | 06:41 | |
| 13 | 4- Building an API | 06:56 | |
| 14 | 5- Setting Up Radix UI | 02:34 | |
| 15 | 6- Building the New Issue Page | 04:58 | |
| 16 | 7- Customizing Radix UI Theme | 04:54 | |
| 17 | 8- Adding a Markdown Editor | 01:57 | |
| 18 | 9- Handling Form Submission | 08:44 | |
| 19 | 10- Handling Errors | 06:50 | |
| 20 | 11- Implementing Client-side Validation | 06:15 | |
| 21 | 12- Extracting the ErrorMessage Component | 03:23 | |
| 22 | 13- Adding a Spinner | 04:22 | |
| 23 | 14- Discussion- Code Organization | 03:59 | |
| 24 | 1- Showing the Issues | 05:05 | |
| 25 | 2- Building the Issue Status Badge | 08:09 | |
| 26 | 3- Adding Loading Skeletons | 06:20 | |
| 27 | 4- Showing Issue Details | 06:47 | |
| 28 | 5- Styling the Issue Detail Page | 04:11 | |
| 29 | 6- Adding Markdown Preview | 03:35 | |
| 30 | 7- Building a Styled Link Component | 06:41 | |
| 31 | 8- Additional Loading Skeletons | 05:16 | |
| 32 | 9- Disabling Server-side Rendering | 02:59 | |
| 33 | 10- Refactoring- Organizing Imports | 05:28 | |
| 34 | 1- Adding the Edit Button | 04:44 | |
| 35 | 2- Applying the Single Responsibility Principle | 07:32 | |
| 36 | 3- Building the Edit Issue Page | 06:29 | |
| 37 | 4- Building an API | 06:45 | |
| 38 | 5- Updating Issues | 02:04 | |
| 39 | 6- Understanding Caching | 08:18 | |
| 40 | 7- Improving the Loading Experience | 06:59 | |
| 41 | 1- Adding a Delete Button | 07:03 | |
| 42 | 2- Adding a Confirmation Dialog Box | 04:05 | |
| 43 | 3- Building an API | 02:44 | |
| 44 | 4- Deleting an Issue | 02:12 | |
| 45 | 5- Handling Errors | 04:30 | |
| 46 | 6- Improving the User Experience | 02:22 | |
| 47 | 7- Removing Duplicate Skeletons | 04:03 | |
| 48 | 1- Setting Up NextAuth | 03:48 | |
| 49 | 2- Configuring Google Provider | 05:47 | |
| 50 | 3- Adding the Prisma Adapter | 05:29 | |
| 51 | 4- Adding the Login and Logout Links | 05:19 | |
| 52 | 5- Change the Layout of the NavBar | 04:31 | |
| 53 | 6- Adding a Drop-down Menu | 04:23 | |
| 54 | 7- Troubleshooting- Avatar Not Loading | 03:03 | |
| 55 | 8- Refactoring the NavBar | 08:08 | |
| 56 | 9- Adding a Loading Skeleton | 01:50 | |
| 57 | 10- Securing the Application | 07:46 | |
| 58 | 1- Building the Assignee Select Component | 02:58 | |
| 59 | 2- Populating the Assignee Select Component | 05:37 | |
| 60 | 3- Setting Up React Query | 04:21 | |
| 61 | 4- Fetching Data with React Query | 06:46 | |
| 62 | 5- Add Assigned Issues to Prisma Schema | 04:06 | |
| 63 | 6- Implementing the API | 10:59 | |
| 64 | 7- Assigning an Issue to a User | 04:39 | |
| 65 | 8- Showing Toast Notifications | 02:43 | |
| 66 | 9- Refactoring the Assignee Select Component | 05:17 | |
| 67 | 1- Building the Filter Component | 05:54 | |
| 68 | 2- Filtering Issues | 06:42 | |
| 69 | 3- Making Columns Sortable | 07:20 | |
| 70 | 4- Sorting Issues | 03:08 | |
| 71 | 5- Fix Filtering Bugs | 05:21 | |
| 72 | 6- Generating Dummy Data | 02:52 | |
| 73 | 7- Building the Pagination Component | 06:15 | |
| 74 | 8- Implementing Pagination | 04:04 | |
| 75 | 9- PaginatingIssues | 05:00 | |
| 76 | 10- Refactoring- Extracting IssueTable Component | 08:38 | |
| 77 | 1- Building the LatestIssues Component | 07:40 | |
| 78 | 2- Building the IssueSummary Component | 07:21 | |
| 79 | 3- Building the BarChart Component | 06:18 | |
| 80 | 4- Laying Out the Dashboard | 02:30 | |
| 81 | 1- Adding Metadata | 04:12 | |
| 82 | 2- Optimizing Performance Using React Cache | 04:22 | |
| 83 | 3- Removing.env File | 03:25 | |
| 84 | 4- Setting Up Error Tracking | 03:59 | |
| 85 | 5- Setting Up the Production Database | 02:34 | |
| 86 | 6- Deploying to Vercel | 10:31 | |
| 87 | 1- Course Wrap Up | 00:26 |
Unlock unlimited learning
Get instant access to all 86 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionBooks
Read Book Next.js Projects: Build an Issue Tracker
| # | Title |
|---|---|
| 1 | Troubleshooting |
| 2 | Additional Exercises |
Comments
0 commentsSimilar courses
React, NextJS and NestJS: A Rapid Guide - Advanced
Sources: udemy
React with Typescript, Next.js, Redux, NestJS, Docker, Redis, Stripe, Frontend & Backend Filtering. Learn how to create an Ambassador App using React, NextJS an
8 hours 40 minutes 51 seconds
Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)
Sources: udemy
GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to
28 hours 38 minutes 19 seconds
React Node AWS - Build infinitely Scaling MERN Stack App
Sources: udemy
Master the art of building a highly scalable real world project using MERN Stack for a new startup that will scale infinitely. I will demonstrate how you could launch a project...
25 hours 1 minute 19 seconds
Duolingo Clone
Sources: Code With Antonio
In this 11-hour course, you will learn how to create your own SaaS application for language learning, similar to Duolingo. Users will be able to choose language
11 hours 12 minutes 32 seconds
Testing Next.js Apps with Jest, Testing Library and Cypress
Sources: udemy
Learn to test a real-world serverless React app with routes, authentication, database and more! Learn how to test your Next.js app from top to bottom! Tests pro
7 hours 35 minutes 24 seconds
Want to join the conversation?
Sign in to comment