• Model: Apollo GraphQL for data with demo Graphcool BaaS, and React State/Context hooks for state
• View: React
• Controller: React function components
• Dev Stack: Create React App with TypeScript support
• Design: Material-UI components with built-in CSS-in-JS styling
• Package Manager: Yarn for speed, without PnP (needs workarounds, not mature yet)
• Code Style: Prettier with 120 chars/line, no semicolons, and single quotes (except JSX)

In the project directory, you can run:

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Launches the test runner in the interactive watch mode.

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Creates a new app release:

• Analyzes commits since the last version tag and determines the next semantic version
• Generates a changelog
• Pushes the release commit and new release version tag to master
• Comments on released Pull Requests and Issues

Deployment to GitHub Pages using gh-pages branch is handled separately for flexibility and due to gh-pages-plugin/git-plugin issue.

Requires setting GH_TOKEN or GITHUB_TOKEN with public_repo scope in your environment, or in a local .env file.

Deploys build to GitHub Pages using gh-pages branch.

Install Prettier and TSLint support for your editor/IDE.

• Define code style
• Add component storybook

• Create GraphQL schema
• Add sample data loaders

• Design decisions
• Roadmap
• Contributing

• Create React app with TypeScript support
• Setup Apollo GraphQL
• Setup Material UI
• Setup routing
• Setup authentication

• Login and logout

• View expenses
• Edit expenses
• Add expenses
• Edit categories
• Add categories
• Filter expenses
• View expenses timeline chart
• View expenses chart by category
• View expenses using infinite loader

• Share expenses with other users
• View mutual debt chart by user
• Balance mutual debt

• Test load speed
• Analyze bundle size
• Load offline using service worker
• Work offline using GraphQL cache

• Test components
• Test code style
• Test code quality
• Test code for security vulnerabilities
• Test dependencies for security vulnerabilities
• Test responsive design
• Test GraphQL queries and mutations with backend

• Add release process
• Add deployment process
• Run tests and deployment in CI/CD pipeline
• Log errors to issue tracker
• Extend logged errors with session replay data

We use the same dotenv files as Create React App.

To define permanent environment variables, create a file called .env in the root of your project:

REACT_APP_NOT_SECRET_CODE=abcdef

The .env files should be checked into source control, with the exclusion of .env*.local.

• .env: Default.
• .env.local: Local overrides. This file is loaded for all environments except test.
• .env.development, .env.test, .env.production: Environment-specific settings.
• .env.development.local, .env.test.local, .env.production.local: Local overrides of environment-specific settings.

The environment is determined by NODE_ENV variable. The basic Yarn commands use different environments by default. Files on the left have more priority than files on the right:

• yarn start: Defaults to development environment and loading .env.development.local, .env.development, .env.local, .env.
• yarn build: Defaults to production environment and loading .env.production.local, .env.production, .env.local, .env.
• yarn test: Defaults to test environment and loading .env.test.local, .env.test.

These variables will act as the defaults if the machine does not explicitly set them. Please refer to the dotenv documentation for more details.