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.
Head to New laptop setup
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 |
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.
Once the DB is running, you can migrate & seed it using:
yarn db:migrate:runWe 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 .envThe 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
The main branch is automatically deployed as the acter-dev app on Heroku to https://demo.acter.app.
Deployment to production is achieved as a manual deploy of main as the acter-prod app on Heroku to https://acter.app.
Acter's codebase is laid out in a monorepo.
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.
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.
Pure Javascript/Typescript functions meant to encapsulate our business logic into small, testable functions.
Currently a combination of our Prisma schema, the output from TypeGraphQLPrisma, and our GraphQL queries, mutations, and fragments.
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.
Various asynchronous jobs like email notifications and daily digest creation
Custom configuration, currently just for eslint.
We use Github for a code repository, and to run basic CI tests by way of Github Actions.
Our applications and databases are hosted on Heroku. We currently have both a demo/dev instance as well as production.
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.
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.
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).
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.
We use Sendgrid for sending emails.
We currently have Sentry monitoring our application for bugs and performance.