martinandreev / code

Acter

About

Acter is a free community management tool for grassroots, activists, researchers, NGOs basically anyone working for an equal, peaceful and regenerative future. It is both an internal organizing tool for individuals and groups as well as a database to find new collaborators or initiatives. The platform has been online since 2021.

The Acter platform is the main initiative in the Danish based non-profit organization Acter Global. Acter Global was founded in 2020 and has as its ultimate goal to promote an equal, peaceful and regenerative world by furthering existing solutions to global challenges and engaging more people in and around their implementation.

Table of contents

• Laptop setup
• Technology Stack
• Getting started
  • Service Dependencies
  • Installation, build and dev server
  • Deployment
    • Demo
    • Production
• Monorepo Layout
  • apps/web
  • packages/components
  • packages/lib
  • packages/schema
  • services/api
  • services/jobs
  • tools
• Vendors
  • Github
  • Heroku
  • Auth0
  • Amazon AWS
  • Google
  • Imgix
  • Sendgrid
  • Sentry

Laptop setup

Head to New laptop setup

Technology Stack

Acter is built with the following stack.

Role	Technology
Language	Typescript
Frontend	Next.js
Components	Material-UI
Testing	Jest, Testing Library, Storybook
Authenticaton	Auth0
Hosting/DNS	Heroku, CloudFlare
Notification/Email	Sendgrid, Fake SMTP Server on dev
API/Data	GraphQL, Apollo (server), URQL (client), TypeGraphQL, Prisma TypeGraphQL
Database	PostgreSQL, Prisma ORM

Getting started

Service Dependencies

The application's dependencies are dockerized. Currently this consists of a Postgres database and a fake SMTP server. Make sure that Docker, copy .env.example to .env and set the appropriate fields is set up, then run:

docker-compose up -d --build

Or better yet use the VS Code built-in Docker command: command+shift+p and select "Docker Compose: Up"

We have a fake SMTP server that is deployed with Docker which allows us to receive emails in development. When our app is running in Docker, it is available at http://localhost:1080.

Database setup

Once the DB is running, you can migrate & seed it using:

yarn db:migrate:run

Auth0, Google Maps, etc.

We use a .env file to manage keys and secrets to various 3rd party providers like Auth0 and Goolge Maps. To set this up, copy .env.example to .env, then get keys and secrets from someone, probably Emil.

cp .env.example .env

Installation, build and dev server

The app currently uses Yarn 3 with workspaces to manage it's monorepo dependencies. Get started by running the following from the root folder:

yarn

After that, you will need to build various parts of the application:

yarn build

Finally, start the Next.js server with:

yarn dev

The app will be available at http://localhost:3000

Deployment

Demo

The main branch is automatically deployed as the acter-dev app on Heroku to https://demo.acter.app.

Production

Deployment to production is achieved as a manual deploy of main as the acter-prod app on Heroku to https://acter.app.

Monorepo Layout

Acter's codebase is laid out in a monorepo.

apps/web

This is the main Next.js application. It is the primary glue between our component library and Next.js. It is also the entrypoint for serving the application.

packages/components

The React components used to build our application. Acter uses Component Driven Develompment to build the application from the "bottom up" using smaller components incorporated into larger components. While not complete, some effort has been made to migrate the application to use Atomic Design principals. Smaller components use Material-UI to build larger functional pieces.

Components should use Storybook to visualize & test their look and behavior.

packages/lib

Pure Javascript/Typescript functions meant to encapsulate our business logic into small, testable functions.

packages/schema

Currently a combination of our Prisma schema, the output from TypeGraphQLPrisma, and our GraphQL queries, mutations, and fragments.

services/api

The Apollo GraphQL server used to serve both generated and custom resolvers. The API layer starts with GraphQL and the Apollo GraphQL client/server library. On the backend, the GraphQL resolvers use Prisma as an ORM for interactions with the database as well as database migrations. We use the TypeGraphQL Prisma integration to autogenerate types, which can be imorted via @acter/schema after running yarn generate.

services/jobs

Various asynchronous jobs like email notifications and daily digest creation

tools

Custom configuration, currently just for eslint.

Vendors

Github

We use Github for a code repository, and to run basic CI tests by way of Github Actions.

Heroku

Our applications and databases are hosted on Heroku. We currently have both a demo/dev instance as well as production.

Auth0

We use Auth0 for managing our authentication layer. It provides "authentication as a service" and a library for integrating with Next.js. Note that we use two different "tenants": one for production and one for demo & local.

Amazon AWS

We use Amazon AWS for the storage of images, both our static images and user-uploaded avatars and banners. Items live in S3 and are managed by IAM keys.

Google

We use the Google Maps & Places APIs for our mapping and places, respectively. Management of keys is done via the APIs and Services Credentials page for development and production).

Imgix

We use Imgix for image resizing. This was done because of bugs in Next.js' own image resize library and issues with performance on Heroku, though this should probably be revisited.

Sendgrid

We use Sendgrid for sending emails.

Sentry

We currently have Sentry monitoring our application for bugs and performance.