An open-source URL shortener built with T3 Stack.
Dashboard ย ย โย ย Roadmap ย ย โย ย Contribute ย ย โย ย Create issue ย ย โย ย X/Twitter
Slug is a service that offers to shorten urls in a simple, fast and secure way. It's built with T3 Stack, a web development stack made by Theo focused on simplicity, modularity, and full-stack typesafety.
This project uses the following technologies:
- create-t3-app - The best way to start a full-stack, typesafe Next.js app.
- Next.js 14 App Router - The React Framework for the Web.
- Auth.js v5 - Authentication for the Web.
- Prisma - A next-generation Node.js and TypeScript ORM.
- Turso (SQLite) + libSQL - SQLite for Production.
- Next.js Server Actions - Asynchronous functions that are executed on the server.
- TailwindCSS + shadcn/ui & Radix Primitives - Design System.
- Prettier with prettier-plugin-tailwindcss - Code Formatter.
- Lucide Icons + svgl - Beautiful SVG icons & logos for the web.
โ ๏ธ This is a community project, not associated with Vercel.
Requirements:
- Node.js (+v18.x) installed.
- pnpm (v8+) installed.
- Turso CLI installed (for Windows users, it's necessary to activate WSL 2).
- Visual Studio Code with the recommended extensions installed (ESLint, Prettier, Tailwind CSS IntelliSense).
Steps:
- Fork this project:
- Clone the repository:
git clone [email protected]:YOU_USER/slug.git
- Install dependencies:
# Install pnpm globally if you don't have it:
npm install -g pnpm
# and install dependencies:
pnpm install
- Create a .env file with the following content:
๐ง The environment variables must match the following schema.
# Database:
DATABASE_URL= # "file:./dev.db"
TURSO_DATABASE_URL=
TURSO_AUTH_TOKEN=
# Auth.js =>
AUTH_SECRET=
# Github Provider =>
GITHUB_ID=
GITHUB_CLIENT_SECRET=
# Google Provider =>
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
Database:
Auth.js:
- Get Auth.js Secret.
AUTH_URL
is the URL of your Auth.js API, for example,/api/auth
. You can change it in theauth.ts
file.
Github Credentials:
Google Credentials:
- Generate a new migration file with Prisma:
pnpm db:migrate
- Insert the migration data into the Turso database. To do this, go to
package.json
, modify thedb:push
command with the name of the migration folder (2024xxxxxxxxxx_init) and run it in your terminal:
pnpm db:push
- Run:
- Development server:
pnpm dev
and open http://localhost:3000 with your browser ๐
- Prisma Studio:
pnpm db:studio
and open http://localhost:5555 with your browser โจ
This is the roadmap I will be following for the complete migration to v3:
- โ = Stable, completed.
- ๐ = Stable, but unexpected errors may appear.
- โ๏ธ = In progress.
โฌ๏ธ Known issues:
- โ๏ธ Fix issue when logging in with different provider but with the same email. Redirect to an existing route in the app (authjs error).
โฌ๏ธ Dependencies:
- โ
Update
@prisma/adapter-libsql
,@prisma/client
&prisma
to the stable version when it's released. - โ๏ธ Update
authjs
to the stable version (v5) when it's released.
โฌ๏ธ Auth:
- โ Sign In with Github.
- ๐ Sign In with Google.
๐ Only for users who have not previously logged in with an existing email address in their Github account. This is an issue that will be worked on soon.
โฌ๏ธ Middleware:
- โ
Redirect with
/*
and/s/*
. - โ Separate public, protected & authentication routes.
โฌ๏ธ Dashboard (main):
- โ Create a new short URL.
- โ List all shorted URLs.
- โ Delete a shorted URL.
- โ Update a shorted URL.`
โฌ๏ธ Dashboard (tags):
- โ Add search links by tags in the dashboard.
- ๐ Create a new tag.
- โ Delete a tag.
- โ๏ธ Update the tags of a link.
๐ Add option to change tag color.
โฌ๏ธ Dashboard (settings):
- โ Change name.
- โ Change email.
- โ Delete account.
- โ Download all links data.
- โ slug.vercel.app.