- ⚙️ SvelteKit: Full stack JS framework that handles our server and client side code
- 💦 Drizzle: Lightweight high power ORM for interfacing with our DB
- 🌩️ Cloudinary: Image hosting and manipulation
- 💳 Stripe: Payment processing
- 💽 PlanetScale: Cloud hosted MySQL database (with data branching)
- 🚀 Vercel: Serverless hosting
- 🎨 ShadCN for Svelte: Beautifully designed components
- 🖌️ TailwindCSS: Inline styles
- 🔒 Lucia V3: Authentication library and OAuth helpers
- 📦 Pnpm: Package manager
In order to run this project you will need to setup Cloudinary, Stripe, GitHub OAuth, and PlanetScale.
- Create a Cloudinary account: https://cloudinary.com/users/register_free
- Create a new Cloudinary project, and add the cloud name to your
.env
:VITE_PUBLIC_CLOUDINARY_CLOUD_NAME="your env here"
- Create a new upload preset, and add the preset name to your
.env
:PUBLIC_CLOUDINARY_UPLOAD_PRESET="your env here"
- Add your images into your cloudinary account, then insert them into the
seed.ts
file where it is marked "TODO CLOUDINARY:"
- Create a PlanetScale account: https://app.planetscale.com
- Create a new database, then add your DB credentials to the
.env
file (you can find the credentials under the "Connect" tab in PlanetScale):DATABASE_HOST="your env here"
DATABASE_USERNAME="your env here"
DATABASE_PASSWORD="your env here"
- Get a database connection string (from the same place) and add it to your
.env
(it will be under "NodeJS"):DATABASE_CONNECTION_STRING="mysql://your env here"
- Apply the schema to your database with
pnpm run db:push
- Wait to seed the database until your setup stripe
- Create a Stripe account: https://dashboard.stripe.com/register
- Get your (TEST) public and secret keys, and add them to the
.env
:PUBLIC_STRIPE_PUBLIC_KEY="pk_test_..."
STRIPE_SECRET_KEY="sk_test_..."
- Create your products in stripe, then add them to the
seed.ts
file where it is marked "TODO STRIPE:" (it is also a good idea to change the products, prices, and images in theseed.ts
file to match your own products) - Install the stripe CLI and get webhook signing secret: https://stripe.com/docs/stripe-cli, then add it your your
.env
:STRIPE_WEBHOOK_SECRET="whsec_..."