Slug

<div align="center"> <a href="https://slug.vercel.app"> <img src="https://raw.githubusercontent.com/pheralb/slug/refs/heads/main/public/images/logo_svg.svg" alt="Slug Logo" height="64" /> </a> <p></p> <p> <b> An open-source URL shortener built with T3 Stack. </b> </p>

<a href="https://slug.vercel.app/dashboard">Dashboard</a> <span>  ❖  </span> <a href="#-roadmap">Roadmap</a> <span>  ❖  </span> <a href="#-getting-started">Contribute</a> <span>  ❖  </span> <a href="https://github.com/pheralb/slug/issues/new/choose">Create issue</a> <span>  ❖  </span> <a href="https://twitter.com/pheralb_">X/Twitter</a>

<div align="center"> <a href="https://slug.vercel.app"> <img src="public/images/screenshot_png.png"> </a> <p></p> </div>

</div>

👨‍🚀 Introduction

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.

🚀 Getting Started

Requirements:

• [x] Node.js (+v18.x) installed.
• [x] pnpm (v8+) installed.
• [x] Turso CLI installed (for Windows users, it's necessary to activate WSL 2).
• [x] 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 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:

• Create a new database with Turso.
• Get Turso Auth Token.
• Get Turso Database URL.

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 the auth.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 to package.json, modify the db: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 open http://localhost:3000 with your browser 🚀

• Prisma Studio:

pnpm db:studio

and open http://localhost:5555 with your browser ✨

🔭 Roadmap

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.

✌️ Contributing

<a href="https://github.com/pheralb/slug/graphs/contributors"> <img src="https://contrib.rocks/image?repo=pheralb/slug" /> </a> <p></p>

☁️ Deploy on Vercel

• ✅ slug.vercel.app.

🔑 License

• GPL-3.0 license.