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.
- prisma
- public
- src
|- components
|- env
|- layout
|- motions
|- pages
|- schema
|- server
|- styles
|- types
|- ui
|- utils
🚧 You will need Nodejs +16 (LTS recommended) installed.
- Fork this project:
- Clone the repository:
git clone git@github.com:YOU_USER/slug.git- Install dependencies:
npm install
# or
pnpm install
# or
yarn install
# or
ultra install- 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: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:
mykey123for example. - NEXTAUTH_URL:
http://localhost:3000/.
- 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:
- MIT.