https://github.com/kanadshee-18/url-shortner
🔗ShortNet ✨ Minimal URL Shortener built with Next.js 15, Tailwind CSS, Prisma, and PostgreSQL. Paste ➡️ Get Short Link ➡️ Redirect! 🚀 Powered by Neon DB · 🎨 Styled with shadcn/ui · ⚙️ Smooth & simple logic.
https://github.com/kanadshee-18/url-shortner
nextjs15 postgresql prisma-orm react19 shadcn-ui sonner tailwindcss-v4 typescript urlshortener
Last synced: 3 months ago
JSON representation
🔗ShortNet ✨ Minimal URL Shortener built with Next.js 15, Tailwind CSS, Prisma, and PostgreSQL. Paste ➡️ Get Short Link ➡️ Redirect! 🚀 Powered by Neon DB · 🎨 Styled with shadcn/ui · ⚙️ Smooth & simple logic.
- Host: GitHub
- URL: https://github.com/kanadshee-18/url-shortner
- Owner: KanadShee-18
- License: mit
- Created: 2025-06-21T19:59:58.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-12-15T13:10:45.000Z (7 months ago)
- Last Synced: 2026-04-29T06:38:46.204Z (3 months ago)
- Topics: nextjs15, postgresql, prisma-orm, react19, shadcn-ui, sonner, tailwindcss-v4, typescript, urlshortener
- Language: TypeScript
- Homepage: https://url-shortner-redirector.vercel.app/
- Size: 1.27 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🔗 ShortNet: URL Shortener
[Check Out🌐](https://url-shortner-redirector.vercel.app/)
A simple, minimal URL shortener built with **Next.js 15**, **Tailwind CSS**, **shadcn/ui**, **Lucide icons**, **Prisma**, and **PostgreSQL (hosted on Neon DB)**.
---
## 📸UI Preview
## ✨ Features
- 🔥 Built with the latest **Next.js 15 App Router**
- 🎨 Beautiful, responsive UI using **Tailwind CSS** and **shadcn/ui**
- 🧠 Shortens any valid URL and saves it to the database with a unique code
- ⚡ Displays shortened URLs instantly after submission
- 🚀 Redirects to the original URL when a shortened link is clicked
- 🛢️ Uses **Prisma ORM** for type-safe DB access with **PostgreSQL**
---
## 🛠️ Tech Stack
| Tool | Usage |
| ---------- | ------------------------ |
| Next.js 15 | React framework |
| Tailwind | Styling and layout |
| shadcn/ui | UI components |
| Lucide | Icons |
| Prisma | ORM for database queries |
| Neon | PostgreSQL cloud DB |
---
## 🧑💻 How It Works
1. **Paste URL:** User enters a long URL into the input form.
2. **Generate Code:** A short unique code is generated and saved in the database with the original URL.
3. **Show Result:** The shortened URL (based on your app’s base URL + short code) is shown to the user.
4. **Redirect:** When someone clicks the shortened URL:
- The app extracts the `code` from the URL params.
- It queries the database using `Prisma` to find the matching original URL.
- Then, it **redirects** the user to the original site.
---
## 🧪 Getting Started (Dev)
```bash
# 1. Clone the repo
git clone https://github.com/KanadShee-18/URL-Shortner.git
cd URL-Shortner
# 2. Install dependencies
npm install
# Make sure to configure your .env file with your Neon DB connection string.
# .env
DATABASE_URL=postgresql://:@/?schema=public
NEXT_PUBLIC_BASE_URL=http://localhost:3000
# 3. Set up the database
npx prisma generate
npx prisma migrate dev
# 4. Run the dev server
npm run dev
```
## 📄 License
[LICENSE](LICENCE)
## ⭐ Support
If you found this project useful, consider giving it a ⭐️ to support the repository!
Feel free to fork it, suggest improvements, or open issues. Contributions are welcome!