Charity Activations

This application tracks charity activations per event. Attendees will see a donations dashboard and be able to select a charity to be donated to by scanning a QR code and completing a form. Optional lead data can be requested. The dashboard will update in real time as donation choices are made.

🥞 Tech Stack

Web Framework - 💿 Remix
Database - 🪳 CockroachDB
Database ORM - △ Prisma
Styling - 🍃 Tailwind CSS
UI Components - 🧱 shadcn/ui and Radix
Hosting - 🎈 Fly.io

🎨 Customization

Parts of this application are ready to customize for you use. You can update information in the application config file (/app/app.config.ts). Styles can be updated using the Tailwind CSS config file (tailwind.config.ts). You can even specify a logo by updating the Company Logo component (/app/components/company-logo.tsx).

💾 Database Setup

This application uses Prisma to manage our database.

🧳 Migrate Schema Changes

Update the DATABASE_URL environment variable with your CockroachDB connection string.
Run npx prisma migrate to create the database schema.

You can view the ER Diagram generated from the Prisma Schema.

🚰 Create the Changefeed

^{This only needs to be done once.}

In a terminal, run

npx prisma db execute --file ./prisma/sql/set_cluster_settings.sql
npx prisma db execute --file ./prisma/sql/create_changefeed_prod.sql

Note You may also execute the contents of set_cluster_settings.sql and create_changefeed_prod.sql in a sql shell.

🔐 Environment Variables

The following are other environment variables you need to set for the application to opperate. You can find them all in the .env.sample file.

Remix Auth

SESSION_SECRET - any string will work or you can generate one with openssl rand -hex 32.

If you are using the Okta Strategy, you'll need the following from your Okta web app:

OKTA_DOMAIN - Your Okta domain
OKTA_CLIENT_ID - Your Okta client id
OKTA_CLIENT_SECRET - Your Okta client secret
OKTA_CALLBACK_URL - Your Okta callback url

🧑‍💻 Development

You should be able to develop without the need to be connected.

🪳 Set up a local CockroachDB Node

To create a local environment that most closely resembles our production CockroachDB serverless cluster, we'll start a local CockroachDB node running in demo mode. This will allow us to start a temporary, in-memory CockroachDB single-node cluster with a temporary Enterprise license.

Install CockroachDB on our local machine.
Make sure your Prisma Seed file is set up to create any initial data needed.
In a terminal window, run ./dbserver_start.sh to start a local CockroachDB node running in demo mode.
Update the DATABASE_URL in the your .env file to point to your local database.
```
 DATABASE_URL="postgresql://root@localhost:26257/charity_activations"
```
In a new terminal window or tab, run ./dbserver_init.sh. This script will handle a few tasks:
- Create the charity_events database in your local node.
- Create the schema using Prisma
- Seed the database using the Prisma Seed file
- Create the Changefeed that handles new donations on the Event Dashboard

Note If you shut down your local CockroachDB server, you will lose any data added and will need to run the ./dbserver_start.sh and ./dbserver_init.sh scripts again.

💿 Run the Remix app locally with HTTPS

In order to use Changefeeds during local development, we need to configure our Remix developer envronment to use HTTPS.

Follow the How to set up local HTTPS instructions from Remix to create a certificate for localhost. Be sure to create a certs folder in the root of this project and save the key.pem and cert.pem in there.
Make sure the project's local dependencies are installed:
```
npm install
```
Start the Remix development server like so:
```
npm run dev
```
Open up https://localhost:3000 and you should be ready to go!

🎉 You're ready to start developing. Look ma! No interwebs!

🚧 Deployment

This app is set up to deploy to Fly.io and comes with a GitHub Action that handles automatically deploying the app to production.

Prior to your first deployment, you'll need to do a few things:

Install Fly
Sign up and log in to Fly
```
fly auth signup
```
Note: If you have more than one Fly account, ensure that you are signed into the same account in the Fly CLI as you are in the browser. In your terminal, run fly auth whoami and ensure the email matches the Fly account signed into the browser.
Create a new app on Fly:
```
fly apps create [YOUR_APP_NAME]
```
Note: Make sure this name matches the app set in your fly.toml file. Otherwise, you will not be able to deploy.
Add a FLY_API_TOKEN to your GitHub repo. To do this, go to your user settings on Fly and create a new token, then add it to your repo secrets with the name FLY_API_TOKEN.
Add your environment vacriables to your fly app secrets, to do this you can run the following commands:
```
fly secrets set DATABASE_URL="postgresql://" SESSION_SECRET=$(openssl rand -hex 32) [additional secrets] --app [YOUR_APP_NAME]
```
If you don't have openssl installed, you can also use 1Password to generate a random secret, just replace $(openssl rand -hex 32) with the generated secret.

Now that everything is set up you can commit and push your changes to your repo. Every commit to your main branch will trigger a deployment to your production environment.

aydrian/event-charity-activations