byoungd/slug

🌱 An open-source URL shortener built with T3 Stack.

✨ We are preparing a new version with Next.js 13 /app router, you can see the progress here: next ✨

🚀 Short link   •   🤝 Contribute   •   🐦 Twitter

🤔 What is T3 Stack?

The T3 Stack is a web development stack made by Theo focused on simplicity, modularity, and full-stack typesafety. This project is using:

• ✅ Bootstrapping: create-t3-app.
• ✅ Framework: Nextjs 13 + Typescript.
• ✅ Auth: Next-Auth.js
• ✅ ORM: Prisma.
• ✅ Database: Planetscale.
• ✅ Styling: TailwindCSS + HeadlessUI.
• ✅ Typescript Schema Validation: Zod.
• ✅ End-to-end typesafe API: tRPC.
• ✅ Safely serialize JavaScript expressions: Superjson.

📦 Project structure

- prisma
- public
- src
  |- components
  |- env
  |- layout
  |- motions
  |- pages
  |- schema
  |- server
  |- styles
  |- types
  |- ui
  |- utils

👨‍🚀 Getting Started

🚧 You will need Nodejs +16 (LTS recommended) installed.

1. Fork this project:

• Click here.

2. Clone the repository:

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

3. Install dependencies:

npm install
# or
pnpm install
# or
yarn install
# or
ultra install

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

🚧 The environment variables must match the following schema.

# Planetscale DB URL:
DATABASE_URL:

# Github OAuth secrets:
GITHUB_ID:
GITHUB_CLIENT_SECRET:

# Next Auth config:
NEXTAUTH_SECRET:
NEXTAUTH_URL:

🔑 How to get environment variables:

Planetscale database:

• Create a new database.
• Create a dev branch.
• In the dev branch, click on "Connect" and select "Prisma". Now you have the DATABASE_URL.

🚧 The environment variable in the dev branch is not the same as main. When you deploy your app to production, in the environment variables change DATABASE_URL to the main variable.

Github OAuth:

• Click here to create new Github OAuth app.
• Go to "Client secrets" and generate new client secret and and paste it into GITHUB_CLIENT_SECRET env.
• Copy the Client ID and paste it into GITHUB_ID env.

Next Auth:

• NEXTAUTH_SECRET: mykey123 for example.
• NEXTAUTH_URL: http://localhost:3000/.

5. Ready 🥳, now run:

# Push your DB to Planetscale:
npx prisma db push

# Run the project:
npm run dev

# (Optional) Run Prisma Studio to see your DB data:
npx prisma studio

😊 Contributing:

🎉 Deploy on Vercel

• ✅ https://slug.vercel.app/.

🔑 License

• MIT.