Build a URL Shortener With Next.js, Prisma, and TailwindCSS
Dev Pulse Dev Pulse
331 subscribers
2,003 views
49

 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

show more

Share/Embed