React Project

A SPA Client for consuming and endpoint and showing some data.

Tech Stack

React: to help creating the UI
Redux: for managing state
Typescript: to speed up the development experience
SCSS: to power up styling
GitFlow: for Git branching model
Jest: for unit testing
Cypress: for e2e testing
Yarn: faster was of handling package dependencies
Mocky: for mocking HTTP responses
Conventional Commits: to create an explicit commit history
Husky: for Git Hooks
Lint Staged: applying Git Hooks to staged files
Github Actions: for CI/CD
Create React App: for bootstrapping this project

How to run

Using Docker
Using Yarn or NPM

Using Docker

if you have Docker installed just run:

$ docker-compose up --build

The build version of the application will be served on: http://localhost:8080

Using Yarn or NPM

For faster development workflow use Yarn.

Install dependencies:

$ yarn

Alternatively run: npm install

Run the application, it'll be served on: `http://localhost:3000`

$ yarn start

Alternatively run: npm run start

Run unit tests:

$ yarn test

Alternatively run: npm test

Lint code using:

$ yarn lint

Alternatively run: npm run lint

Run e2e tests using the terminal:

$ yarn test:e2e

Alternatively run: npm run test:e2e

Run e2e tests using Electron App:

$ yarn test:e2e:dev

Alternatively run: npm run test:e2e:dev

GitFlow

I'm using feature branches for my features/refactors/etc. Also, Squashing the commits when merging a PR to main, this way the main branch is cleaner and shows only meaningful commits. Not using Development branch but main directly.

GitHub Actions

I'm using GitHub Actions to will run linting, tests, and build tasks when pushing to a PR targeting main branch.

Environment Variables

I'm using cross-env and the .env file. Usually, I don't commit this file, these variables should be set in a CD context change its values for the different environments, i.e: Staging, Production. Check comments on .env file for more details.

the-glima/react-project