React Counter App

React based counter single page application built with TypeScript.

Demo:
https://jnahumphreys.github.io/react-counter-app/

Application overview

This is a simple React based counter app to allow a user to increment, decrement and reset a pesistent counter. Its primary purpose was to act as a demo for the following concepts:

• TypeScript source within a React based project
• CSS in JS styling using emotion
• Replicating a basic Redux style store using a JavaScript reducer along with React useReducer hook.
• Sharing the global state and reducer actions to the application component tree using React useContext hook
• Persisting the count value using browser localStorage API
• Dark mode support using prefers-color-scheme media query
• Husky pre-commit hooks for linting and formatting or source-code
• GitHub actions for CI / CD pipelines
• End to End testing using Cypress

Getting started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

See deployment for notes on how to deploy the project on a live system.

Prerequisites

To get this project up and running on your local system you'll need both npm and node.js installed on your development system. Note: Requires LTS version of node, currently v16

Installing

To install all dependencies required for the project, clone or download the source cd into the project root and from your terminal run:

npm install

Local development

The project uses Create React App, which includes a local development server cd into the project root and run the following command from the terminal:

npm start

Create React App will build a development version of the app. The localhost / local network preview address will be printed to the console.

Available development scripts

Lint source

Will lint all source (js, jsx, ts, tsx) within the source directory using ESLint.

npm run lint

Check formatting

Will check formatting of all files within the source directory using Prettier.

npm run check-formatting

Check and fix formatting

As above will check formatting, fix any issues and write changes.

npm run fix-formatting

Pre-commit hooks

Pre-commit hooks will run using Husky to:

• Lint all committed source (js, jsx, ts, tsx) using ESLint rules
• Format all known filetypes using Prettier

Testing

Tests can be run (end to end) using Cypress. Note: An instance of the application must be running for the test suite to function; run npm run start ensuring the default port of 3000 is used.

npm run test

Deployment

To build a production copy for deployment cd into the project root and run the below command from your terminal. Note: The build will be performed as per the homepage key in package.json.

npm run build

Built with

• TypeScript - Typed extenstion of JavaScript
• React - JavaScript UI development library
• Emotion - CSS in JavaScript library

Author

Built by James Humphreys

License

This project is licensed under the MIT License - see the LICENSE.txt file for details