https://github.com/jeremiasvillane/snipper
A simple URL shortener created using Next.js 14, Typescript, NextAuth, Next-Themes, NextUI, Framer Motion, Headless-UI, Prisma, PostgreSQL and Tailwind CSS.
https://github.com/jeremiasvillane/snipper
framer-motion headless-ui next-themes nextauth nextjs nextui postgresql prisma project server-actions tailwindcss typescript
Last synced: 11 days ago
JSON representation
A simple URL shortener created using Next.js 14, Typescript, NextAuth, Next-Themes, NextUI, Framer Motion, Headless-UI, Prisma, PostgreSQL and Tailwind CSS.
- Host: GitHub
- URL: https://github.com/jeremiasvillane/snipper
- Owner: JeremiasVillane
- License: mit
- Created: 2023-10-29T18:56:23.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-10T02:35:41.000Z (12 months ago)
- Last Synced: 2025-04-12T02:04:14.621Z (11 days ago)
- Topics: framer-motion, headless-ui, next-themes, nextauth, nextjs, nextui, postgresql, prisma, project, server-actions, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://snppr.vercel.app
- Size: 3.11 MB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Snipper: A simple URL shortener/tracker.
[](https://github.com/jeremiasvillane/snipper/blob/main/LICENSE)
[](https://app.fossa.com/projects/git%2Bgithub.com%2FJeremiasVillane%2Fsnipper?ref=badge_shield&issueType=license)
[](https://github.com/prettier/prettier)
---
This is a [Next.js](https://nextjs.org) project implementing [TypeScript](https://www.typescriptlang.org), [NextAuth](https://next-auth.js.org), [Next-Themes](https://www.npmjs.com/package/next-themes), [NextUI](https://nextui.org), [HeadlessUI](https://headlessui.com), [Framer Motion](https://www.framer.com/motion), [Prisma](https://www.prisma.io), [PostgreSQL](https://www.postgresql.org) and [Tailwind CSS](https://tailwindcss.com).
## 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`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Google Fonts.
### Prerequisites
**Node version 20.x.x**
### Setup .env file
```js
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)
```shell
npx prisma generate
npx prisma db push
```
### Start the app
```shell
npm run dev
```
Open [http://localhost:3000](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**](LICENSE).
[](https://app.fossa.com/projects/git%2Bgithub.com%2FJeremiasVillane%2Fsnipper?ref=badge_large&issueType=license)
## Contact me
- [LinkedIn](https://snppr.vercel.app/2Vt7W2xMe)