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 startAlternatively run:
npm run start
Run unit tests:
$ yarn testAlternatively run:
npm test
Lint code using:
$ yarn lintAlternatively run:
npm run lint
Run e2e tests using the terminal:
$ yarn test:e2eAlternatively run:
npm run test:e2e
Run e2e tests using Electron App:
$ yarn test:e2e:devAlternatively 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.