Linkr

• Jcanotorr06
• 3
• 1

🌱 A URL shortener built with Create JD App: Solid Start + Tailwind CSS + Typescript + tRPC + Authjs & Prisma.

#authjs #mysql #planetscale #prisma #solidjs #solidstart #trpc #typescript #vite #zod

Demo Download

🤔 What is Create JD App?

Create JD App is the quickest and most efficient way to start a new fullstack Solid web app, inspired by the T3 Stack, which is a web development stack made by Theo focused on simplicity, modularity, and full-stack typesafety. This project is using:

• ✅ Bootstrapping: create-jd-app.
• ✅ Framework: Solid Start + Typescript.
• ✅ Auth: Auth.js
• ✅ ORM: Prisma.
• ✅ Database: Planetscale.
• ✅ Styling: TailwindCSS + DaisyUI + KobalteUI.
• ✅ Typescript Schema Validation: Zod.
• ✅ End-to-end typesafe API: tRPC.
• ✅ Safely serialize JavaScript expressions: Superjson.

📦 Project structure

- prisma
- public
- src
  |- components
  |- env
  |- layout
  |- routes
  |- schema
  |- server
  |- styles
  |- utils

👨‍🚀 Getting Started

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

1. Fork this project:

• Click here.

2. Clone the repository:

git clone [email protected]: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:

# Auth.js config:
AUTH_SECRET
AUTH_URL
AUTH_TRUST_HOST=true

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

• AUTH_SECRET: mykey123 for example.
• AUTH_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://linkr.josephcano.com/.

🔑 License

• MIT.