venturalp/modec-case

Statements	Branches	Functions	Lines

---

🗺 Modec Case - Cities Weather

This is a case assigned to me to evaluate my front-end skills in a job application process. It consists of displaying a map and allowing users to click and mark a location on the map and then search the 15 surrounding cities and their weather (max/min temperatures).

One can access the application running at https://modec-case.netlify.app/

🛠 Stack

Main tools used in this project:

ReactJS	Yarn	Webpack	Jest	Testing Library
MSW	Zustand	Styled Components	React Leaflet

⚠️ Requirements

• Node v12+
• NPM v 6.14.8+

🗃 Environment variables

Variable	Description
ENVIRONMENT	As its name says, is the environment of the application. default value: dev. values: dev/prd/hml

🚀 Installation and Running

This project was developed using yarn but one can use npm as well.

To run this project one must first install all project dependencies by running:

npm

npm install

or

yarn

yarn

Then run the application:

npm

npm start

or

yarn

yarn start

After that, the application will open and run at http://localhost:3000

💻 Code patterns

This project uses Prettier to auto format code, following Eslint rules (based on airbnb rules). For those who are using VSCode, this repository already has a vscode config versionated to be easily used.

The project is all set with alias to make things easier when it comes to importing files and modules. One can find this settings inside package.json, jest.config.js, jsconfig.json, webpack.config.js and .esling.js files. Find more about here

📋 Tests

For tests this application uses Jest and React testing Library

Jest setup is located in jest.config.js file where one can see that a file setupTests.js is being used, this file basically defines a few useful mocks.

One has a few helpers to use on tests located here: Commons/tests/Tests.Helpers.js

Running tests:

yarn test:all

Generate coverage report:

yarn coverage

Then the report can be accessed at /coverage/lcov-report/index.html

🌐 Mock Server Worker

MSW is used to mock all API requests in our application. Before all tests, the mock server must be started, this happens in setupTests.js file, and after each test, the mock is reseted, this is because one can change a few responses to specific tests and still avoid side effects on other tests, and at the end of our tests the server is stopped. All application handlers are located in Tests.ServerMockHandlers.js file, so every new service must also be included here to be available for tests.

Ok, but if one wants a different return for a specific request, what can one do? This can be easily handled by importing our MSW server and passing the new request specifications, for example:

import { server, rest } from 'Commons/tests/Tests.MockServer'

server.use(
  rest.get(`https://api.openweathermap.org/data/2.5/find`, (req, res, ctx) =>
    res(ctx.status(400)),
  ),
)

As it can be seen in the example above, one just needs to import server and rest from our MockServer and with the server method use pass the new request wanted.

🌍 Global State Management

This application uses Zustand lib to manage global state. When one creates a new store with Zustand, it returns a hook, ready to be used.

📡 Axios and Requests

This project uses Axios for http requests, and for this, there is a hook (useRequests) into the Requests.defaults.js file, this hook returns an Axios instance with set interceptors. Why is that? Well, the project's interceptors handle global loading feedbacks.

For global loading feedbacks (a loading over all the application), one can pass showLoading flag as true as an axios request config and the loading will be removed when the request is finished.

📝 Commit convention

This project follows Angular commit convention for commit patterns. If one is familiar with it just follow it, otherwise Commitizen CLI can be used to commit changes, remember, one first needs to stage changes before committing, and in order to commit one can use the script yarn cz to run Commitizen CLI and follow the wizard/helper mode. The project also uses husky to handle a pre-commit hook which will run tests before allowing the commit, if one doesn't want to run tests on a commit, use the parameter --no-verify on the commit command.