YoVDO

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

Offered By: Frontend Masters

Tags

Next.js Courses Web Development Courses React Courses Typescript Courses PostgreSQL Courses Database Modeling Courses Serverless Functions Courses Chakra UI Courses

Course Description

Overview

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

Related Courses

Building Web Applications in Django
University of Michigan via Coursera
Building Web Applications in Django
University of Michigan via edX
Django for Everybody
University of Michigan via edX
Database Creation and Modeling using MYSQL Workbench
Coursera Project Network via Coursera
NEW:Angular Material: The full guide using a Spring boot API
Udemy