totominc / bookshelf-react

React exercice projet by creating a Bookshelf web-application.

Bookshelf React - Real-world React project exercise

Building a full React application with React ecosystem.

---

Setup the project locally

Prerequesites

• NodeJS LTS (tested with v14.18.0)
• npm v6 or greater
• Yarn v1 (project created with Yarn, we recommend using it instead of npm)

Setup local environment

Make sure to clone the repository locally. You can make a fork first, before cloning, if you want to make changes.

Run the following commands to clone the repository and install the dependencies:

# Replace this URL with your fork if you have done it.
# This URL will not let you push changes to my repository.
git clone https://github.com/TotomInc/bookshelf-react.git

cd bookshelf-react

# Install project dependencies with Yarn.
yarn install

Running the app

To get the app running in development mode, run:

yarn run dev

# You should see an URL that points to your local environment server.

The app is also deployed with a production build on react-bookshelf-exercise.netlify.app, thanks to Netlify.

Unit-tests

Make sure to create/update unit-tests when making changes.

This project is using jest and @testing-library/react to encourage good practices for unit-testing: it helps to write tests that resemble the way the software/website is used by clients.

Generally tests are created alongside components with a .spec.tsx file-extension.

You can run the following commands for unit-tests:

# Run unit-tests
yarn run test

# Run unit-tests in watch mode (like HMR but for Jest)
yarn run test:watch

# Run tests and generate a code-coverage
yarn run test:coverage

Linting (ESLint)

This project have an enforced ESLint config that cover TypeScript to React (hooks) and code-styling with Prettier and unit-testing. It integrates very well in VS Code dans can auto-fix ESLint warnings/errors when saving files.

The ESLint config used is from @totominc/eslint-config-react.