iki / expenses-app-react-ts-gql

Sample expenses app using React, TypeScript and GraphQL

Sample expenses app using React, TypeScript and GraphQL

Design decisions

• 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)

Getting started

In the project directory, you can run:

yarn start

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.

yarn test

Launches the test runner in the interactive watch mode.

yarn build

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.

yarn release --no-ci

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.

yarn deploy

Deploys build to GitHub Pages using gh-pages branch.

Code Style

Install Prettier and TSLint support for your editor/IDE.

Roadmap

Codebase

• Define code style
• Add component storybook

Data

• Create GraphQL schema
• Add sample data loaders

Docs

• Design decisions
• Roadmap
• Contributing

Core

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

Features

Users

• Login and logout

Expenses

• 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

Shared expenses

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

Performance

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

Testing

• 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

DevOps

• 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

Settings

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.

Used environment files

• .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.