Light Bright

View project

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
  • Prerequisites
  • Installation
  • Running the project for development
• Usage
  • Starting the project
  • Building the project
  • Running the tests
  • Code formatting and linting
  • Build pipeline
  • Note about the Git hook
• Built with
• License

Getting started

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

Prerequisites

• NPM

Installation requires NPM which is included with Node. You can install Node by downloading the installer from the website.

To update NPM to the latest version:

npm install -g npm@latest

Installation

1. Clone the repo

git clone https://github.com/sargalias/light-bright

2. Install NPM packages

npm install

Running the project for development

npm start

Usage

Starting the project

• Start the project on a local server: npm start

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: npm test
• 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

Build pipeline

• 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

Built with

• React - The JavaScript framework used.
• Webpack - Bundler
• Babel - JavaScript transpiling
• Jest - Test framework
• React testing library - Test utilities for React
• Cypress - End-to-end tests
• ESLint - JavaScript static code analysis
• 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.

License

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