Repository files navigation

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 withT3 Stack, a web development stack made byTheo focused on simplicity, modularity, and full-stacktypesafety.

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 withprettier-plugin-tailwindcss - Code Formatter.
• Lucide Icons +svgl - Beautiful SVG icons & logos for the web.

⚠️ This is a community project, not associated withVercel.

Requirements:

• Node.js (+v18.x) installed.
• pnpm (v8+) installed.
• Turso CLI installed (for Windows users, it's necessary toactivate WSL 2).
• Visual Studio Code with the recommended extensions installed (ESLint, Prettier, Tailwind CSS IntelliSense).

Steps:

1. Fork this project:

• Click here.

2. Clone the repository:

git clone git@github.com:YOU_USER/slug.git

3. Install dependencies:

# Install pnpm globally if you don't have it:npm install -g pnpm# and install dependencies:pnpm install

4. Create a.env file with the following content:

🚧 The environment variables must match the followingschema.

# 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:

• Create a new database with Turso.
• Get TursoAuth Token.
• Get TursoDatabase URL.

Auth.js:

• Get Auth.jsSecret.
• AUTH_URL is the URL of your Auth.js API, for example,/api/auth. You can change it in theauth.ts file.

Github Credentials:

• Create a new OAuth App.

Google Credentials:

• Create a new OAuth 2.0 App from Google API Console.

5. Generate a new migration file with Prisma:

pnpm db:migrate

6. Insert the migration data into the Turso database. To do this, go topackage.json, modify thedb:push command with the name of the migration folder (2024xxxxxxxxxx_init) and run it in your terminal:

pnpm db:push

7. Run:

• Development server:

pnpm dev

and openhttp://localhost:3000 with your browser 🚀

• Prisma Studio:

pnpm db:studio

and openhttp://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.
• ⚙️ Updateauthjs 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.

• GPL-3.0 license.