141 lines (104 sloc) 6.31 KB

AaronCurtisYoga.com

Fullstack Next.js App for Aaron Curtis Yoga

Table of Contents

1. Intro
2. Quick Start
3. Tech Stack
4. Features
5. Postgres DB
6. Get in touch

Intro

This app is set up to help current and future yoga students: Learn about me, Find my weekly schedule, sign up to my newsletter, and register for events (work in progress)

Quick Start

Before getting started, create a .env in the root of your project and

Set Up Environment Variables

[//]: # (Vercel Blob Storage for Images)
BLOB_READ_WRITE_TOKEN=

CLERK_SECRET_KEY=

MAILCHIMP_API_KEY=
MAILCHIMP_AUDIENCE_ID=
MAILCHIMP_API_SERVER=

MONGODB_URI=

NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

[//]: # (For Clerk)
WEBHOOK_SECRET=

[//]: # (For Stripe) https://dashboard.stripe.com/apikeys
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=

NEXT_PUBLIC_SERVER_URL

My app is built with Next.js. The common scripts are:

• npm run dev to start dev server
• npm build for prod build
• npm run lint to run eslint
• npm run lint:fix to try & fix lint errors

Tech Stack

• Next.js (TypeScript)

• NextUI (docs)

• React Hook Form docs (docs)

• Vercel Postgres (docs)

• Vercel Blob Storage (docs)

  3rd Party Api's

• Clerk (docs)

• Stripe (docs)

• Mailchimp Marketing API (docs)

Features

1. Newsletter: People can sign up to the Newsletter & stay up-to-date w/ upcoming events

2. ️Authentication: Role Based Access Control (RBAC) with Clerk

3. Events: Admins can create, read, update, and delete events. End users can view events.

4. 🛠️ - Search & Filter: Users can search and filter events

5. 🛠️ - Checkout and Pay: Users can pay for events using Stripe

Vercel Postgres DB

You can use Prisma Studio to view and manage your Vercel Postgres database schema and data. Depending on the environment, use one of the following commands:

• Local Development Database:

  npx prisma studio

  This command opens Prisma Studio using your local .env configuration, connecting to your development database.

• Production Database:

  dotenv -e .env.production -- npx prisma studio

  This command opens Prisma Studio using the .env.production file, connecting to your production database.

Tip: Ensure each environment file has the correct DATABASE_URL for seamless connections.

Get in touch

• IG aaroncurtisyoga
• ✉️ [email protected]