Build a Fullstack App from Scratch (feat Next.js)
Offered By: Frontend Masters
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 DjangoUniversity 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