We may earn an affiliate commission when you visit our partners.
Course image
Travis Luong

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.

Read more

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.

Enroll now

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

Syllabus

Introduction
Project Description
Project Requirements
UI Design
Read more
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
Login Button Component
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

Save this course

Save Full Stack LinkedIn Prototype With Next.js to your list so you can find it easily later:
Save

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
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
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
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
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
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
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
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
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.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Full Stack LinkedIn Prototype With Next.js.
Full Stack Markdown App With Next.js
Most relevant
Mastering Next.js - Build Airbnb Clone from Scratch (2024)
Most relevant
Full Stack Twitter Prototype With Next.js
Most relevant
The complete guide to building a full-stack app with...
Most relevant
Next.js by Example
Most relevant
TypeScript & Next.js 14: Building a Tech Ticketing App
Most relevant
Master Next.js 14 - Full-Stack Complete Guide
Most relevant
Next.js - Build Full Stack Apps with Next.js & TypeScript
Most relevant
Building a Full Stack App with React 16 and Express 4
Most relevant
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser