URL Shortener ·

URL Shortener is an app to shorten URLs and generate short links created using NextJS. URL Shortener allows users to create a custom keyword shortened link making it easy to share and viewing analytics of that link.

Simple URL shortener tool

• Custom keyword for short URL slug
• Statistics / analytics of links
• Light / dark / system mode
• Authentication using Clerk
• PostgreSQL, Neon & Prisma for database
• Zustand for state management
• Hosted in Vercel

Tech/framework used

• Next.js 13 App Dir
• Shadcn/ui
• Clerk
• Tailwind CSS
• TypeScript
• PostgreSQL
• Neon
• Prisma
• Zustand
• Vercel

Starting the project

Open the .env.example and fill in your Database URL & Clerk Auth Configurations then save it as .env the run the following command:

npm install
npx prisma db push
npx prisma generate
npm run dev

Demo

The app is hosted on Vercel. Click here to visit.
Direct link: https://url.salimi.my

Screenshots

Sign in

Sign up

Dashboard

Listing

Create short URL

Short URL details

Profile

Mini sidebar

Dark mode