Skip to content

symptomizer/frontend

Repository files navigation

Symptomizer

The frontend of Symptomizer

Prerequisites

  • Node.js

    v15.6.0 on macOS Big Sur is confirmed to work.

Getting Started

  1. git clone [email protected]:symptomizer/frontend.git

  2. cd frontend

  3. npm i

  4. npm run test

    This will ensure the project is in a good state. It performs linting and formatting, it builds the artifacts, and it runs the tests.

Project Structure

This project is primarily a Create React App. It uses TypeScript to aid the developer experience.

React App

If you only need to run the React app, you can just run npm run start. This auto hot-reloads so is great for developing the UI.

The code can be found in ./src. It uses React Router for navigation and Apollo Client for data transport. The UI itself is predominately built with Tailwind UI.

FAB

This project is enhanced as a FAB, which allows us to sprinkle in some server-side functionality. These plugins can be found in the ./api folder. Right now, there's just a mock GraphQL server, but in the future, we could use this for user authorization etc.

To run the full FAB build (which is as close to production as you can get), npm run build:fab && npx fab serve

Testing

Pretty minimal at this point, but CRA comes with Jest built-in and there's one example in ./src/App.test.tsx.

Static Testing & Linting

ESLint comes pre-installed with CRA, and Prettier is setup with lint-staged and husky so it be run automatically when you git commit (along with the Jest tests).

Deployment

Linc is setup to handle the CI/CD pipeline to build and deploy the FAB on Cloudflare Workers. Preview builds happen for every commit, and anything merged into the default branch is deployed to production (currently that's https://symptomizer.gregbrimble.workers.dev/, but we'll obviously get setup with a custom domain at some point).