Full Stack LinkedIn Prototype With Next.js from Udemy

Embark on a transformative journey in our comprehensive course, "Full Stack Next.js: LinkedIn Prototype," 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.

What's inside

Learning objectives

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

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

Syllabus

Introduction

Project Description

Project Requirements

UI Design

Database Design

Technologies

Installation

Resources

Initial Setup

Initialize Next.js Project

Open Project Directory

Clean Up Home Page And Global CSS

Home Page Design Review

Install Mantine Dependencies

Mantine Setup

Hard Code Dark Mode

Style The Home Page

Mantine Vs TailwindCSS

Caching

Caching Introduction

Cached Page Example

Not Cached Page Example

Time Based Revalidation Example

On Demand Revalidation Example

Link Prefetching Example

What Makes A Page Dynamic

Authentication: NextAuth, DrizzleORM

Authentication Introduction

Create Database

Install Dependencies

Create Schema

Create Config File

Create Drizzle DB Instance

Create Auth Options

Create NextAuth API Routes

Create GitHub OAuth App

Copy Env Variables Into Env Local

Create Drizzle Config

Run The Push Command

Session Provider

Test The Login Button

Create Restricted API Route

Create Restricted Page

Create Custom Sign In Page

Test Custom Sign In Page

Problem With Session Provider At Root Layout

Route Group For Dynamic Routes

Style The Sign In Page

Drizzle ORM

Dashboard Layout: App Shell, Mobile Burger, Nav Links

Dashboard Introduction

Dashboard Page Stub

Dashboard Layout

App Shell Container

Mobile Burger

Header Menu And Sign Out

Nav Links

Display Avatar Image

People Page: Database Seed, Pagination, Skeletons

People Page Introduction

Seed Users Script

Seed Job Titles

Render User List

Page Search Params

Limit And Offset

Count And Num Pages

Pagination Container

Pagination On Change

Highlight Active Page

User Card And Grid Layout

Loading Skeletons

Path Param And Link To Person Detail

Loading Page For Person Detail

Search Page: ILIKE And Fuzzy Matching

Search Introduction

Search Input

Search Page

Search Result Table

Drizzle Logger

Fuzzy Search And Raw SQL

Skills List Page: DrizzleORM Aggregates

Skills Page Introduction

Skills Schema

Seed Skills Script

Seed Users To Skills

Skills List Page

Skill Detail Page: Sorting And Query Building

Skill Detail Page Introduction

List Users With Skill

Sort Skill Select Component

Order By Sort Param

Style Skill Detail Page

Profile Page: Rich Text Editor, Forms, And Notifications

Profile Page Introduction

Server Actions Vs API Routes

Server Component Vs Client Component

Install Zod

Update User Action

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Provides hands-on experience and guidance for building a full stack web application using a comprehensive stack of modern technologies

Utilizes Next.js, a widely adopted and powerful framework in industry for developing high-performing and scalable server-side rendered web applications

Covers core concepts and best practices for building web applications, including database interaction, styling, authentication, caching, and deployment

Provides a comprehensive overview of Next.js features such as App Router, Route Groups, Server Components, Client Components, Server Actions, and Caching, enabling learners to build feature-rich web applications

Leverages industry-standard technologies and tools such as PostgreSQL, TailwindCSS, and Vercel, providing learners with practical experience in a professional development environment

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Full Stack LinkedIn Prototype With Next.js with these activities:

Follow a tutorial on building a simple CRUD application with Next.js

Show steps

Following a guided tutorial will provide you with a structured and step-by-step approach to building a fully functional CRUD application in Next.js.

Browse courses on Next.js

Show steps

Find a reputable tutorial on building a CRUD application with Next.js
Follow the tutorial steps carefully
Understand the concepts and techniques used in the tutorial

Practice basic CSS skills

Show steps

Building a solid foundation in CSS will help you create visually appealing and user-friendly applications in Next.js.

Browse courses on Next.js

Show steps

Review CSS fundamentals
Practice writing CSS rules
Build a simple web page using CSS

Attend a local meetup or conference focused on Next.js

Show steps

Connecting with other Next.js developers will expand your knowledge and provide valuable insights into the latest trends and best practices.

Browse courses on Next.js

Show steps

Research local meetups or conferences
Attend the event and engage with other attendees
Share your experiences and knowledge with others

Five other activities

Expand to see all activities and additional details

Show all eight activities

Mentor junior developers or students learning Next.js

Show steps

Mentoring others will reinforce your understanding of Next.js concepts and help you develop valuable communication and leadership skills.

Browse courses on Next.js

Show steps

Identify opportunities to mentor others
Share your knowledge and experience with mentees
Provide feedback and guidance to support their learning

Practice fetching and displaying data from a REST API

Show steps

Mastering data fetching and display techniques will empower you to work with real-world data in your Next.js applications.

Browse courses on Next.js

Show steps

Review REST API concepts
Practice making HTTP requests using fetch or axios
Display API data in a React component

Attend a workshop on advanced Next.js techniques

Show steps

Workshops led by experienced instructors can provide in-depth training on specific Next.js topics to advance your skills.

Browse courses on Next.js

Show steps

Research and identify relevant workshops
Attend the workshop and actively participate
Apply the techniques learned in your own projects

Build a small Next.js project

Show steps

Hands-on project experience will reinforce your understanding of Next.js concepts and prepare you for real-world development scenarios.

Browse courses on Next.js

Show steps

Plan and design your project
Set up a Next.js project
Implement core features and functionality
Test and debug your project
Deploy your project to a hosting platform

Contribute to an open-source Next.js project

Show steps

Contributing to open-source projects will not only enhance your skills but also expose you to real-world development practices.

Browse courses on Next.js

Show steps

Identify a suitable open-source Next.js project to contribute to
Review the project's documentation and codebase
Propose and implement a feature or fix
Submit a pull request and collaborate with the project maintainers

Career center

Learners who complete Full Stack LinkedIn Prototype With Next.js will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

Full Stack LinkedIn Prototype With Next.js

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses