jeansibelius / outcome

Work in progress: A simple app to track household income and expenses against a set budget.

Outcome

A simple app to track the outcome of your income against a set budget

License: All rights reserved © Rafael Linnankoski (further details here).

Demo

Demo hosted on Heroku

(Might take a moment to start while the heroku instance wakes up.)

• The application has been developed mobile-first, which is why it's currently still best used on mobile (or the responsive design mode of a browser).
• Demo credentials
  • username: [e-mail]
  • password: test

Project structure

The project is structured as a monorepo with utility scripts in the root package.json (e.g. build). It is divided into two folders (client & server) and further within those all source code is located in ./src/. Build directories are gitignored.

The project is written in TypeScript in vim with eslint and prettier enabled.

Server

The server uses the following stack:

• Apollo Server with Express
• TypeGraphQL (to build the schema without duplicating type definitions)
• typegoose (to help with mongoose model creation without further duplication of types)
• MongoDB (using MongoDB atlas)

Client

The client created with Create React App with PWA typescript template and uses the following stack:

• Apollo Client (GraphQL)
• Semantic UI react components (with Fomantic UI CSS)
• Tailwindcss in a few places (mainly to test out the framework)
• Formik (for form related things)

How to run

Required env variables

• The server requires the following env vars to be set
  • MONGODB_URI_PROD: a connection URI containing the username and password of the MongoDB instance
  • MONGODB_URI_DEMO: a connection URI for the demo instance
  • MONGODB_URI_TEST: a connection URI for testing
  • MONGODB_URI_DEV: a connection URI for development
  • JWT_SECRET: used to create and verify hashed passwords

Production mode

In the root...

• npm run install to run installation script for both sub-folders (client & server)
• npm run build to run build scripts in both sub-folders
• npm start to run the backend production build (which serves also the client build)
• npm run deploy:demo to deploy the project to the Heroku demo instance (might need to update script to deploy the correct/desired branch)
• npm run deploy to deploy the project to the production instance of Heroku

Development

To run with Docker: docker compose -f docker-compose.dev.yml --env-file ./server/.env up

Or directly:

• In ./client...
  • npm start to run the project at localhost:3000
  • and other basic installation/build scripts, as required
• In ./server...
  • npm run dev to run the backend in development mode with hot reloading at localhost:4000/graphql
  • and other basic installation/build scripts, as required

Testing

In ./server

• npm test to run jest.
• npm run test:coverage to update coverage reports
• npm run test:badges to update coverage reports and create badges from them
• npm run test:watch to have jest watching for changes

Roadmap

The roadmap can be viewed here.