Full Stack LinkedIn Prototype With Next.js
Build And Deploy A Professional Network App With NextJS, Drizzle ORM, PostgreSQL, TailwindCSS, NextAuth, And Vercel
What you'll learn
- Build a well crafted, full stack, and modern business web application
- Implement features commonly found in modern applications including pagination, sorting, authentication, and more
- Leverage NextJS features such as App Router, Route Groups, Server Components, Client Components, Server Actions, and Caching
- Build a recommendation system from scratch
- Deploy the app to Vercel and troubleshoot deployment gotchas
Course Content
- Introduction00:25
- Project Description00:33
- Project Requirements00:45
- Ui Design01:40
- Database Design01:10
- Technologies00:48
- Installation01:42
Requirements
- Basic knowledge of Web Dev and Command Line is recommended
- Basic knowledge of JavaScript and React is recommended
- Basic knowledge of Git and GitHub is recommended
Description
Embark on a transformative journey in our comprehensive course, "Full Stack Next.js: Professional Network App," where you'll gain the skills and knowledge needed to develop a cutting-edge full stack web application. This course is designed to equip you with proficiency in Next.js, a powerful framework for building modern web applications.
Here's a glimpse of what you'll learn:
Build with Next.js: Learn the art of developing a full stack web application using Next.js, leveraging its capabilities for seamless server-side rendering.
Database Interaction: Utilize TablePlus to interact seamlessly with a PostgreSQL database, gaining hands-on experience in managing and retrieving data.
Design with TailwindCSS: Elevate your application's aesthetic appeal by styling it with TailwindCSS, a utility-first CSS framework known for its flexibility and responsiveness.
Caching Strategies: Explore various caching mechanisms in Next.js to optimize performance and enhance user experience.
Authentication with NextAuth: Set up OAuth authentication seamlessly with NextAuth, ensuring secure and user-friendly login processes.
ORM Schemas with Drizzle: Dive into Drizzle ORM schemas to efficiently manage database updates, and use Drizzle Kit to push schema changes effortlessly.
Dashboard Creation: Build a dynamic and feature-rich dashboard using Mantine AppShell, enhancing the usability of your application.
Responsive Design: Implement responsive design principles using Mantine AppShell and TailwindCSS breakpoints, ensuring a seamless experience across devices.
Web Development Patterns: Implement common web development patterns such as pagination, sorting, and filtering for an intuitive user experience.
Advanced Database Features: Implement fuzzy search with pg_trgm
Scripting: Write TypeScript scripts to seed the database with realistic fake data.
Form Building: Construct robust forms using React's useFormState hook and Server Actions, while ensuring server-side data validation with zod.
Rich Text Editing: Leverage Mantine's TipTap Rich Text Editor to enhance content creation within your application.
Data Visualization: Build visually appealing charts using Mantine charts, adding depth and clarity to your application's insights.
Dark Mode Switcher: Implement a local storage-based dark mode switcher, providing users with a personalized and visually comfortable experience.
Recommendation System: Construct a recommendation system using Cosine Similarity and K Nearest Neighbors algorithm, and validate its functionality with unit testing using Vitest.
Deployment: Deploy your application seamlessly to Vercel, while learning to debug unexpected deployment challenges like a pro.
Embark on this transformative learning experience, and empower yourself with the skills needed to create robust and professional full stack web applications. Elevate your career with "Full Stack Next.js: Professional Network App" today.
Who this course is for
- Beginner to intermediate web developers seeking proficiency in full stack development with NextJS
- Beginner to intermediate web developers looking to build a business dashboard app with a modern tech stack
Full Stack LinkedIn Prototype With Next.js
Section 1: Introduction
- 00:25
- 01:40
- 01:10
- 00:48
- 01:42
Section 2: Initial Setup
- 6.Mantine Setup01:59
Section 3: Caching
Section 4: Authentication Nextauth Drizzleorm
- 2.Create Database02:15
- 4.Create Schema01:05
- 13.Session Provider02:50
- 23.Drizzle Orm03:09
Section 5: Dashboard Layout Appshell Mobile Burger Nav Links
- 3.Dashboard Layout02:16
- 5.Mobile Burger03:31
- 7.Nav Links02:16
Section 6: People Page Database Seed Pagination Skeletons
- 2.Seed Users Script08:13
- 3.Seed Job Titles03:41
- 4.Render User List02:39
- 6.Limit And Offset01:25
Section 7: Search Page Ilike Fuzzy Matching
- 2.Search Input04:24
- 3.Search Page04:53
- 5.Drizzle Logger00:56
Section 8: Skills List Page Drizzleorm Aggregates
- 2.Skills Schema07:07
- 5.Skills List Page05:31
Section 9: Skill Detail Page Sorting Query Building
Section 10: Profile Page Rich Text Editor Forms Notifications
- 4.Install Zod00:24
- 6.Bio Field00:45
- 8.User Form04:58
- 9.Fix Session Bug00:45
- 14.Editor Style01:48
Section 11: Manage Skills Page Ratings Modals Select Inputs
- 2.Profile Tabs04:53
- 4.Style The Table02:17
Section 12: Mantine Colors
Section 13: Dashboard Page Charts
- 2.Fix Skills Chart00:21
Section 14: Person Detail Page And Recommendation System
- 2.User Card02:27
- 5.Cosine Similarity03:59
- 6.Testing Pyramid01:33
Section 15: Deployment
- 8.Migrate Script01:19