Make Your List

The main goal of this repository is to put technologies learned into practice. You can follow what is been to arrive following the issues, and working in progress following the pull requests opened.

This is a simple application that creates a space to have your lists separated from other people. This approach is a good way to share your URL generated to friends or family to share your list of items.

The main technology used to build this project was React.js using the CRA (Create React App).

Backend repository

The backend for this project has been developed by Arthur Soares in this repository Make Your List API

Environments

If you want to enter this application to see how it is, follow the links below:

• Production The app tries to connect to the real backend server.
• Preview The app runs based on mocks intercepting the requests to the backend server. After accessing that link chooses to view a deployment version.

Features already implemented

• CRA usage
• Typescript usage
• Lighthouse running on Github Actions on every pull request
• .nvmrc setting the node version
• Code format: Eslint and Prettier setup
• Chakra UI usage as the design system
• Axios usage as the network handler
• React-Query as the state distribution to requests
• React-Hook-Form as the formulary handler
• React-Router-Dom as the page handler
• Unit tests implemented using Jest
• MSW (Mock Service Worker) usage to intercept requests for test environment only
• Service Worker installed to cache bundles.
• Github Actions on every pull request targeting the branch "main" integrating the app (CI)
• Vercel integration to deployment (CD)
• Hotjar tracking
• Sentry as the monitoring service for the application
• Sonarqube as the code quality and code security analyzer
• Cypress as the end-to-end tool testing the application
• Multi-language support

Running application locally

After cloning the repository, open a terminal inside the repository directory and follow the steps below.

Install dependencies

npm i

Copy and rename the file .env.example to .env

If you want MSW to intercept the requests to the backend server keep the REACT_APP_USE_API_MOCKED=true in the .env file.

You can also set your backend server domain by changing the REACT_APP_LISTS_API

Start application

npm start

To run unit tests:

npm test

This command also will generated a coverage report

To build the app:

npm run build

Where is the app deployed?

This repository is integrated with Vercel to deploy new versions on each environment of this app, production and previews.

When opening a new pull request, Vercel rapidly starts a build to deploy that source code to a preview environment.

When merged a pull request to the branch main, Vercel starts a deployment to the production environment.

Github Action workflow

This repository has a workflow built to integrate the source code on every pull request opened to the default branch, "main".

The workflow consists of these steps:

• Install dependencies
• Code lint
• Code format
• test
• build
• Lighthouse check

Workflow map:

Dependabot

Dependabot is activated to every Monday check if this repository has a dependency vulnerability.

If Dependabot finds a dependency vulnerable, it'll open a pull request describing and suggesting a change upgrading usually upgrading the package version.

Author

Pedro Oliveira