Light bright is a simple application which simulates the toy "Light Brite". It consists of circles and a few buttons.
- When clicked, the circles are colored in with a unique color.
- Circles that are dragged over are all colored in with the same color.
- Double click erases the color on a circle.
- The buttons erase the last color or all colors, respectively.
Table of contents
- Getting started
- Built with
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
To update NPM to the latest version:
npm install -g npm@latest
- Clone the repo
git clone https://github.com/sargalias/light-bright
- Install NPM packages
Running the project for development
Starting the project
- Start the project on a local server:
Building the project
- Build the project for production:
npm run build
- Build the project for development (linting errors won't fail the build):
npm run build:dev
Running the tests
- Start the project on a local server along with Cypress (E2E tests):
npm run start-with-cypress
- Run all tests (Jest and Cypress):
npm run test:all
- Run Jest tests:
- Run Jest tests in watch mode:
npm run test:watch
- Open Cypress (requires a server running):
npm run cy:open
- Run all Cypress tests (requires a server running):
npm run cy:run
Code formatting and linting
- Format code with Prettier code formatter:
npm run format
- Run lint check:
npm run lint
- Run lint check in fix mode:
npm run lint:fix
- Run the entire build process (code formatting, linting in fix mode, all tests):
npm run ci
Note about the Git hook
There is a pretty aggressive Git hook which runs the entire build process for every commit, ensuring linting and tests pass.
The reason for it is because it's preferrable that every commit leaves the project in a working state. That way, reverting to any commit means the project still runs.
However it's not essential, as long as merge commits to master / develop branches are stable.
If needed, you can disable the Git hook by deleting the .huskyrc file, or using the
--no-verify flag during commits.
git commit --no-verify
- Webpack - Bundler
- Jest - Test framework
- React testing library - Test utilities for React
- Cypress - End-to-end tests
- Stylelint - CSS static code analysis
- Prettier - Code formatting
- Husky - Simple Git hooks
- BEM-CSS-Modules - Utility for using CSS modules with BEM.
- array-shuffle - Utility for shuffling arrays.
- Classnames - Utility for working with CSS classes.
- typeface-lato - NPM package for the Lato typeface.
- And many more, particularly plugins and loaders.
This project is licensed under the MIT License - see the LICENSE.md file for details.