Next.js Projects: Build an Issue Tracker

Focused View

7:00:30

10 View

1. 1- Welcome .mp4

02:05

2. 2- Prerequisites.mp4

00:50

3. 3- Source Code.mp4

00:38

4. 4- How to Take This Course .mp4

00:58

5. 1- Project Roadmap.mp4

02:16

6. 2- Setting Up the Development Environment.mp4

01:17

7. 3- Creating the Project.mp4

02:52

8. 4- Building the navbar.mp4

08:52

9. 5- Styling the Active Link.mp4

06:18

10. 1- Setting Up MySQL.mp4

01:58

11. 2- Setting Up Prisma.mp4

01:46

12. 3- Creating the Issue Model.mp4

06:40

13. 4- Building an API.mp4

06:55

14. 5- Setting Up Radix UI.mp4

02:33

15. 6- Building the New Issue Page.mp4

04:57

16. 7- Customizing Radix UI Theme.mp4

04:53

17. 8- Adding a Markdown Editor.mp4

01:56

18. 9- Handling Form Submission.mp4

08:43

19. 10- Handling Errors.mp4

06:49

20. 11- Implementing Client-side Validation.mp4

06:14

21. 12- Extracting the ErrorMessage Component.mp4

03:22

22. 13- Adding a Spinner.mp4

04:21

23. 14- Discussion- Code Organization.mp4

03:58

24. 1- Showing the Issues.mp4

05:04

25. 2- Building the Issue Status Badge.mp4

08:08

26. 3- Adding Loading Skeletons.mp4

06:19

27. 4- Showing Issue Details.mp4

06:46

28. 5- Styling the Issue Detail Page.mp4

04:10

29. 6- Adding Markdown Preview.mp4

03:34

30. 7- Building a Styled Link Component.mp4

06:40

31. 8- Additional Loading Skeletons.mp4

05:15

32. 9- Disabling Server-side Rendering.mp4

02:58

33. 10- Refactoring- Organizing Imports.mp4

05:27

34. 1- Adding the Edit Button.mp4

04:43

35. 2- Applying the Single Responsibility Principle.mp4

07:31

36. 3- Building the Edit Issue Page.mp4

06:28

37. 4- Building an API.mp4

06:44

38. 5- Updating Issues.mp4

02:03

39. 6- Understanding Caching.mp4

08:17

40. 7- Improving the Loading Experience.mp4

06:58

41. 1- Adding a Delete Button.mp4

07:02

42. 2- Adding a Confirmation Dialog Box.mp4

04:04

43. 3- Building an API.mp4

02:43

44. 4- Deleting an Issue.mp4

02:11

45. 5- Handling Errors.mp4

04:29

46. 6- Improving the User Experience.mp4

02:21

47. 7- Removing Duplicate Skeletons.mp4

04:02

48. 1- Setting Up NextAuth.mp4

03:47

49. 2- Configuring Google Provider.mp4

05:46

50. 3- Adding the Prisma Adapter.mp4

05:28

51. 4- Adding the Login and Logout Links.mp4

05:18

52. 5- Change the Layout of the NavBar.mp4

04:30

53. 6- Adding a Drop-down Menu.mp4

04:22

54. 7- Troubleshooting- Avatar Not Loading.mp4

03:02

55. 8- Refactoring the NavBar.mp4

08:07

56. 9- Adding a Loading Skeleton.mp4

01:49

57. 10- Securing the Application.mp4

07:45

58. 1- Building the Assignee Select Component.mp4

02:57

59. 2- Populating the Assignee Select Component.mp4

05:36

60. 3- Setting Up React Query.mp4

04:20

61. 4- Fetching Data with React Query.mp4

06:45

62. 5- Add Assigned Issues to Prisma Schema.mp4

04:05

63. 6- Implementing the API.mp4

10:58

64. 7- Assigning an Issue to a User.mp4

04:38

65. 8- Showing Toast Notifications.mp4

02:42

66. 9- Refactoring the Assignee Select Component.mp4

05:16

67. 1- Building the Filter Component.mp4

05:53

68. 2- Filtering Issues.mp4

06:41

69. 3- Making Columns Sortable.mp4

07:19

70. 4- Sorting Issues.mp4

03:07

71. 5- Fix Filtering Bugs.mp4

05:20

72. 6- Generating Dummy Data.mp4

02:51

73. 7- Building the Pagination Component.mp4

06:14

74. 8- Implementing Pagination.mp4

04:03

75. 9- PaginatingIssues.mp4

04:59

76. 10- Refactoring- Extracting IssueTable Component.mp4

08:37

77. 1- Building the LatestIssues Component.mp4

07:39

78. 2- Building the IssueSummary Component.mp4

07:20

79. 3- Building the BarChart Component.mp4

06:17

80. 4- Laying Out the Dashboard.mp4

02:29

81. 1- Adding Metadata.mp4

04:11

82. 2- Optimizing Performance Using React Cache.mp4

04:21

83. 3- Removing.env File.mp4

03:24

84. 4- Setting Up Error Tracking.mp4

03:58

85. 5- Setting Up the Production Database.mp4

02:33

86. 6- Deploying to Vercel.mp4

10:30

87. 1- Course Wrap Up .mp4

00:25

Description

Learn to Build Full-stack Apps with Next.js, TypeScript, Prisma, Tailwind, and Radix UI

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

Who is this for?

Web developers seeking to master Next.js 13+ and TypeScript for full-stack app development Frontend devs looking to explore full-stack development with Next.js. Next.js developers looking to fill in knowledge gaps and solidify their expertise

More details

This course is the second part of my Ultimate Next.js Series. To take this course, you should have completed the first part or be familiar with all the concepts covered there. More specifically, you need to be familiar with client and server components, routing, building APIs, database integration with Prisma, and implementing user authentication with NextAuth.js

User Reviews

Rating

average 0

Total votes0

Focused display

Next JS

CodewithMosh

View courses CodewithMosh

Engaging courses, focused on developing practical skills to fast track your career. Carefully designed real-world examples & exercises. Access on Mobile & TV. Downloadable. Lifetime Access. Highlights: Offering Fun And Engaging Lessons, Providing Comprehensive Courses.