Full-Stack URL Shortener with Next.js 14, Prisma & PostgreSQL
In this tutorial, I’ll show you how to build a full-stack URL shortener using Next.js 14, Prisma, and PostgreSQL. We’ll style the app with Tailwind CSS and Shadcn UI to create a clean, modern look.
🛠️ Tools & Packages Used:
[Shadcn UI]: https://ui.shadcn.com/docs/installati...
[Nextjs]: https://nextjs.org/
[NanoId]: https://www.npmjs.com/package/nanoid
⏱️ Timestamps:
00:00 - Introduction
01:05 - Install and Set Up Next.js
03:58 - Install Shadcn UI
06:40 - Create UI Form
11:20 - Create UI for Listing URLs
18:24 - Install & Set Up Prisma
23:12 - Create API Route [POST]
29:27 - Create API Route [GET]
32:26 - Fetch All URLs
39:08 - Create Redirect Page
45:00 - Add Copy URL Functionality
50:00 - Find and Fix Bugs
🌐 Check out more content:
Prisma NextJs Guide: https://www.cand.site/blog/prisma-nex...
🌐 Recommended Digital Tools (Affiliate Links):
Hostinger: Get 20% Off on Web Hosting - https://dub.sh/zrpWarU
👍 If you found this video helpful, please like, and subscribe!
❓ Any questions? Drop them in the comments below!
#Coding #nextjs #fullstack
