Build A Next.js App with Prisma and PlanetScale
A step-by-step guide to creating a Bookstore app where users can submit books via a form, and then display the books that are stored in the database. We'll set up a new database in PlanetScale, create an API route in Next.js, and wire up our front end to make calls to our API. This project serves to walk through the core technical concepts like setting up a database, reading, and writing from your database to allow you to spin up your own app with ease.
GitHub repo where you can see the code files - https://github.com/camiinthisthang/bo...
Blog with the commands in the video for you to copy/paste - https://planetscale.com/blog/how-to-s...
00:00 - Intro
00:23 - Project Overview
00:37 - Tech Stack Overview
01:19 - Database Set Up
01:52 - Next.js Set Up
02:35 - Install TailwindCSS
03:08 - Set Up Form UI
07:00 - Set up Prisma
07:35 - Update .env
07:56 - Set Up Prisma Client
08:48 - Define Schema
10:48 - Run Database Locally
11:20 - Sync Schemas with Prisma Db Push
12:37 - Promote Database Branch To Production
13:20 - Write Our API Route
20:10 - Test API With Insomnia
24:08 - Setting Up State To Capture Book Data
29:37 - Call API From The Front End
37:24 - Displaying Our Data On The Front End
41:35 - Final Demo
42:20 - Wrap Up
📚 Learn more about PlanetScale
• Website: https://planetscale.com/
• Docs: https://docs.planetscale.com/
——————————————————
💬 Follow PlanetScale on social media
• Twitter: / planetscale
• TikTok: / planetscale
• Twitch: / planetscale
• LinkedIn: / planetscale