https://github.com/salimi-my/url-shortener

URL Shortener is an app to shorten URLs created using NextJS. Users can create custom keyword short link and view statistics or analytics of the links.
https://github.com/salimi-my/url-shortener

clerk mysql nextjs planetscale prisma shadcn-ui tailwindcss typescript zustand

Last synced: 2 months ago
JSON representation

URL Shortener is an app to shorten URLs created using NextJS. Users can create custom keyword short link and view statistics or analytics of the links.

• Host: GitHub
• URL: https://github.com/salimi-my/url-shortener
• Owner: salimi-my
• Created: 2023-08-06T11:23:42.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2024-04-22T15:33:33.000Z (over 1 year ago)
• Last Synced: 2025-03-20T18:06:41.196Z (7 months ago)
• Topics: clerk, mysql, nextjs, planetscale, prisma, shadcn-ui, tailwindcss, typescript, zustand
• Language: TypeScript
• Homepage: https://url.salimi.my
• Size: 1.94 MB
• Stars: 15
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# [URL Shortener](https://url.salimi.my) · [![Author Salimi](https://img.shields.io/badge/Author-Salimi-%3C%3E)](https://www.linkedin.com/in/mohamad-salimi/)

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](/.env.example) and fill in your Database URL & Clerk Auth Configurations then save it as .env the run the following command:

```bash

npm install

npx prisma db push

npx prisma generate

npm run dev

```

## Demo

The app is hosted on Vercel. [Click here](https://url.salimi.my) to visit.




Direct link: `https://url.salimi.my`

## Screenshots

#### Sign in

![Sign in](/screenshots/screenshot-1.png)

#### Sign up

![Sign up](/screenshots/screenshot-2.png)

#### Dashboard

![Dashboard](/screenshots/screenshot-3.png)

#### Listing

![Listing](/screenshots/screenshot-4.png)

#### Create short URL

![Create short URL](/screenshots/screenshot-5.png)

#### Short URL details

![Create short URL](/screenshots/screenshot-6.png)

#### Profile

![Profile](/screenshots/screenshot-7.png)

#### Mini sidebar

![Mini sidebar](/screenshots/screenshot-8.png)

#### Dark mode

![Dark mode](/screenshots/screenshot-9.png)