4- Building the navbar | Code with Mosh

Show Sidebar

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Next.js Projects: Build an Issue Tracker

Getting Started

1- Welcome (2:05)
2- Prerequisites (0:50)
3- Source Code (0:38)
4- How to Take This Course (0:58)
5- Questions and Support
6- Connect with Me
7- Learning Paths

Setting Up the Project (22m)

1- Project Roadmap (2:16)
2- Setting Up the Development Environment (1:17)
3- Creating the Project (2:52)
4- Building the navbar (8:52)
5- Styling the Active Link (6:18)

Creating Issues (65m)

1- Setting Up MySQL (1:58)
2- Setting Up Prisma (1:46)
3- Creating the Issue Model (6:40)
4- Building an API (6:55)
5- Setting Up Radix UI (2:33)
6- Building the New Issue Page (4:57)
7- Customizing Radix UI Theme (4:53)
8- Adding a Markdown Editor (1:56)
9- Handling Form Submission (8:43)
10- Handling Errors (6:49)
11- Implementing Client-side Validation (6:14)
12- Extracting the ErrorMessage Component (3:22)
13- Adding a Spinner (4:21)
14- Discussion- Code Organization (3:58)
Troubleshooting: Extra attributes from the server

Viewing Issues (54m)

1- Showing the Issues (5:04)
2- Building the Issue Status Badge (8:08)
3- Adding Loading Skeletons (6:19)
4- Showing Issue Details (6:46)
5- Styling the Issue Detail Page (4:10)
6- Adding Markdown Preview (3:34)
7- Building a Styled Link Component (6:40)
8- Additional Loading Skeletons (5:15)
9- Disabling Server-side Rendering (2:58)
10- Refactoring- Organizing Imports (5:27)

Updating Issues (43m)

1- Adding the Edit Button (4:43)
2- Applying the Single Responsibility Principle (7:31)
3- Building the Edit Issue Page (6:28)
4- Building an API (6:44)
5- Updating Issues (2:03)
6- Understanding Caching (8:17)
7- Improving the Loading Experience (6:58)

Deleting Issues (27m)

1- Adding a Delete Button (7:02)
2- Adding a Confirmation Dialog Box (4:04)
3- Building an API (2:43)
4- Deleting an Issue (2:11)
5- Handling Errors (4:29)
6- Improving the User Experience (2:21)
7- Removing Duplicate Skeletons (4:02)

Authentication (51m)

1- Setting Up NextAuth (3:47)
2- Configuring Google Provider (5:46)
3- Adding the Prisma Adapter (5:28)
4- Adding the Login and Logout Links (5:18)
5- Change the Layout of the NavBar (4:30)
6- Adding a Drop-down Menu (4:22)
7- Troubleshooting- Avatar Not Loading (3:02)
8- Refactoring the NavBar (8:07)
9- Adding a Loading Skeleton (1:49)
10- Securing the Application (7:45)

Assigning Issues to Users (48m)

1- Building the Assignee Select Component (2:57)
2- Populating the Assignee Select Component (5:36)
3- Setting Up React Query (4:20)
4- Fetching Data with React Query (6:45)
5- Add Assigned Issues to Prisma Schema (4:05)
6- Implementing the API (10:58)
7- Assigning an Issue to a User (4:38)
8- Showing Toast Notifications (2:42)
9- Refactoring the Assignee Select Component (5:16)

Filtering, Sorting, and Pagination (55m)

1- Building the Filter Component (5:53)
2- Filtering Issues (6:41)
3- Making Columns Sortable (7:19)
4- Sorting Issues (3:07)
5- Fix Filtering Bugs (5:20)
6- Generating Dummy Data (2:51)
7- Building the Pagination Component (6:14)
8- Implementing Pagination (4:03)
9- PaginatingIssues (4:59)
10- Refactoring- Extracting IssueTable Component (8:37)

Dashboard (24m)

1- Building the LatestIssues Component (7:39)
2- Building the IssueSummary Component (7:20)
3- Building the BarChart Component (6:17)
4- Laying Out the Dashboard (2:29)

Going to Production (29m)

1- Adding Metadata (4:11)
2- Optimizing Performance Using React Cache (4:21)
3- Removing.env File (3:24)
4- Setting Up Error Tracking (3:58)
5- Setting Up the Production Database (2:33)
6- Deploying to Vercel (10:30)

Conclusion

1- Course Wrap Up (0:25)
2- Feedback
3- Additional Exercises

4- Building the navbar

Complete and Continue