Published On Jan 10, 2023
#React #Tutorial #Beginners #Programming #WebDevelopment
Let's Build a URL Shortener with Next.js, Prisma, & TailwindCSS from scratch.
We will be touching API Routes in Next.js 13+, building our database using Prisma, and lastly styling up our front end using TailwindCSS!
📚 Materials/References:
Finished Code: https://github.com/ericz619/url-short...
Next.js 13+ Beta Docs: https://beta.nextjs.org/docs
Prisma Docs: https://www.prisma.io/docs/reference/...
💡 Stuff you will learn:
Learning the newest /app directory of Next.js Beta
Writing your Database Schema in Prisma
Code Structure / Organizing
Styling using TailwindCSS
🌎 Social:
GitHub: https://github.com/ericz619
👇 Time Stamps:
00:00 Intro
00:03:02 Project Setup
00:05:35 Setting Up Database
00:15:38 API Routes
01:01:00 Starting our Front end
01:09:02 Shorten Form Component
01:28:06 Copy Board Component / Success Page
01:40:00 Analytic Page
01:49:00 Outro