Full-Stack URL Shortener with Next.js 14, Prisma & PostgreSQL

Опубликовано: 16 Февраль 2025
на канале: Cand Dev

3,440

165

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