C-19 Tracker

• A demo can be found at C-19 Tracker

Built with

• ReactJS → for all things frontend
• Typescript → for developer experience
• Tailwindcss → for all things css
• Context API → for managing state in react application natively
• Github Actions → for CI/CD
• React Testing Library → for unit tests

Hosted on

• AWS S3

Running locally

• Clone and change directory (cd covid-tracker) to the repository
• Run the commands npm ci to clean install and download exatct versions of all the dependencies
• To start the setup issue the command npm run start, this starts a react client at localhost:3000

Folder structure

• The project files are stored in the ./src directory
• The layout components like page layout, header, footer, and side navigations are stored at the ./src/containers folder
• The components used as the table, stats card, etc. are stored at the ./src/components folder
• State in the application is maintained via context APIs, these are placed in the ./src/contexts folders
• Project uses hooks extensively and the custom ones are placed in the ./src/hooks folder
• The project is served on s3 via the /build folder that is created with npm build

Running tests

• The tests are located in __tests__/ folders within each folder inside of ./src, this ensures that tests are locallized and yet aggregated at one place
• the test runner can be initiated via npm run test, this generate ./coverage file, this can be used to further analyse or prevent deployments if the coverage dips below a given threshold, ref:Link Link

Running on prod

• A push to the master branch will upload and deploy your latest changes to S3 via Github
• In case the unit tests do not pass, the deployment fails (the action fails)

Notes on tailwindcss

• For building the CSS files in development build:tailwind command is used via npm prestart
• For building the CSS files in production build:css command is used via npm prebuild, this uses @fullhuman/postcss-purgecss package to remove unused CSS in production

Notes on hosting to S3

• Set GitHub action secrets via GitHub project page > settings > actions
• Secrets to be set are

AWS_S3_BUCKET
AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
AWS_REGION

Patterns used

• state-reducer react hooks pattern, ref: Link

  • used for all context apis

• reducers pattern for state within component via use-reducer hook, ref: Link

  • used for emulating a state machine in case such as that of an api call where the status can be idle, loading, and fetched