david-ponc/slug

🌱 A URL shortener using create-t3-app.

⚒ With 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 + 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.

👨‍🚀 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

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

🎉 Deploy on Vercel

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