Coursera Plus Annual is 40% Off — Ends July 6.

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Frontend Masters

Build a Fullstack App from Scratch (feat Next.js)

via Frontend Masters

Go to class Write review
University of the People Ad

Earn Your Business Degree, Tuition-Free, 100% Online!

Learn More → Scrimba Ad

Free courses from frontend to fullstack and AI

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One plan covers every Professional Certificate on Coursera.
Unlock All Certificates
Learn by coding through a fun, project-based course full real-world design problems from front-end to back-end. You’ll build a music app with features like playlists, audio player, shuffle, and more! Use a modern stack of tools: React, Next.js, Typescript, and Postgres. Code reusable UI components, database schemas and migrations, API calls with serverless functions, and deploy it for the world to see!

Syllabus

  • Introduction
  • Setup
  • Setup Next.js, ESLint, & Typescript
  • Course App Overview
  • Setup Chakra UI
  • Creating Player Layout
  • Playlist Container Setup
  • Creating the Sidebar
  • Adding the Logo
  • Create a List Nav with LinkBox
  • Create Playlist Menu
  • Setup Prisma & PostgreSQL on Heroku
  • Prisma Schema
  • Data Modeling
  • Creating Schema & Migrations with Prisma
  • Seeding Data
  • Running the Seed Script
  • Seeding User Data
  • Seeding Playlist Data
  • Seeding Playlist Data Q&A
  • Serverless API Overview
  • Signup API Route
  • Signup API Route Recap & Test
  • Signin API Route
  • Fetcher & Auth Mutation
  • Auth Pages
  • Sign In & Sign Up
  • Protected Route Handler
  • Middleware Edge Functions
  • Middleware Q&A
  • Custom Hooks for Fetching Data
  • Fetch & Render Data into Components
  • Gradient Background & Image Box
  • Title & Subtitle UI Layout
  • Load Artists Data
  • Artists List UI Layout
  • Seed User Data
  • Build Dynamic Playlist Pages
  • Playlist Page UI
  • Songs Table UI
  • Song UI & Time format
  • Auth Error Handling
  • Player UI Container
  • Player State with Easy Peasy
  • Player Controls UI
  • Seek Bar UI
  • Player Controls State
  • Playing Songs State
  • Shuffle and Next Song Controls
  • Seek Bar Controls
  • requestAnimationFrame & Synching UI
  • End Song & Repeat Handlers
  • Deploying with Vercel
  • Testing & CI
  • Wrapping Up

Taught by

Scott Moss

Reviews

Start your review of Build a Fullstack App from Scratch (feat Next.js)

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.