It's an app made for keeping track of all the letters which are written during the Amnesty International marathon at our school. The system consists of a public statistics page and a dashboard for the admins to put the data in.
The main concepts and features of the app were put toghether on this board: https://miro.com/app/board/uXjVOf8j2IY=/?invite_link_id=98643837632
- Next.js
- Prisma
- PostgreSQL
- Docker (for development)
- Material UI
- React Query
- react-hook-form
The development process is designed to be as simple to start as possible. The database is automatically created and maintained using Docker Compose, so you don't have to care about it while developing!
Clone the repo and switch to the dev branch. You'll be checking out all the branches from the dev branch.
Be sure to have Docker, Node.js and yarn installed on your machine (I recommend to install Node using NVM and use the version defined in the .nvmrc file).
Copy the contents of .env.sample into .env
Then, just launch the following command in your terminal:
yarn dev
It will create and launch the development database, do all the required migrations and start the development server.
Modify the prisma schema in the prisma/schema.prisma file, and restart the development server.
Use the PGAdmin launched automatically alongside the database, available at localhost:5050 with the following credentials:
Emial: [email protected]
Password: admin
If the database is not visible inside the PGAdmin, add it manually with the following data:
host: amnesty_db
port: 5432
username: postgres
password: postgres
Another option is using Prisma Studio, which you can launch via the following command, being sure that the development process (DB and app) is running concurrently:
yarn dev:start:studio
Be sure to have the development process running concurrently, and launch:
yarn db:seed
For any more database operations, check out the Prisma Migrate and Prisma CLI documentation.
For more context about the development process, check out the docker-compose.yml and package.json files.
Currently, the app is deployed using:
-
Vercel is responsible for hosting the Next.js app, and handling the data storage with Vercel Postgres.
The app has two environments set up - Preview and Production. Each of them has its own database.
Production is deployed automatically from the main branch, whereas a new instance of Preview is deployed on every commit to the dev branch, and every PR to the main or dev branch.
Important thing to note are the database migrations. For that, we use the Prisma's built-in prisma migrate module. We run the migrations on the databases during the deployment phase on Vercel, if the commit is made on the main branch (and then, the migration is run on the production database) or on the dev branch (in that case, we run the migration on the staging/preview database). If the deployment is made in any other case (for example, is made from a PR), the migrations won't be run.
For more context about the whole CI/CD process, check out the package.json and prod-migrate.sh files.
If you want to deploy this app on your own (we are not planning on transfering ownership of this repo to anyone else), you can use the following steps:
- Fork or clone this repo
- Set up a a deployment of your own choice - all you need to provide is a hosting for the Next.js app, and the following environment variables:
- POSTGRES_URL: the connection string/url of the PostgreSQL database. You can also use the Prisma Cloud Data Proxy. You can always inspire from the way how we deployed the app 😄
Our suggestion for the simpliest and fastest deployment setup is just using Heroku for both deploying the App and Database, without having to worry about Prisma Cloud. But the limitation is a harder setup of multiple environments.
Run the following queries on the database:
DELETE FROM "Letter";
DELETE FROM "Author";
DELETE FROM "Destination";
REFRESH MATERIALIZED VIEW "AnonymousLettersByDestination";
REFRESH MATERIALIZED VIEW "BasicStats";
REFRESH MATERIALIZED VIEW "LettersByClass";
REFRESH MATERIALIZED VIEW "LettersByDestination";