Snipper: A simple URL shortener/tracker.

---

This is a Next.js project implementing TypeScript, NextAuth, Next-Themes, NextUI, HeadlessUI, Framer Motion, Prisma, PostgreSQL and Tailwind CSS.

Features:

• Generate uniques links
• Track how many times a link has been clicked
• Redirection screen
• UI created with TailwindCSS and NextUI
• Full responsivity and mobile UI
• Light / Dark mode using next-themes
• ORM using Prisma
• PostgreSQL database using Vercel Storage
• Authentication with next-auth
• This project uses next/font to automatically optimize and load Google Fonts.

Prerequisites

Node version 20.x.x

Setup .env file

POSTGRES_PRISMA_URL =
  "postgresql://username:password@host:port/database?schema=public";
POSTGRES_URL_NON_POOLING =
  "postgresql://username:password@host:port/database?schema=public";
NEXT_PUBLIC_APP_URL = "https://www.your-deploy-url.com";

NEXTAUTH_SECRET = "secretkey";
NEXTAUTH_URL = "https://www.your-deploy-url.com";

// Visit: https://console.cloud.google.com/apis/credentials
GOOGLE_CLIENT_ID = "your-google-client-id";
GOOGLE_CLIENT_SECRET = "your-google-client-secret";

Setup Prisma

Add PostgreSQL Database (I used Vercel Storage)

npx prisma generate
npx prisma db push

Start the app

npm run dev

Open http://localhost:3000 with your browser to see the result.

Screenshots

Show

Landing

Form to create a new Link

Modal to copy the new link

My Links section

Light Theme

Profile section

About section (mobile)

License

Distributed under the MIT License.

Contact me

• LinkedIn