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.

• 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.

Node version 20.x.x

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";

Add PostgreSQL Database (I used Vercel Storage)

npx prisma generate
npx prisma db push

npm run dev

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

Distributed under the MIT License.

• LinkedIn