[Web] Tindev

This web version allows users to like or dislike another users and see your previous matches.. All the resources used by this application comes from its API.

Table of Contents

• Screenshots
• Installing
  • Configuring
    • .env
    • API
• Usage
  • localStorage
• Running the tests
  • Coverage Report

Screenshots

Click to expand.

Installing

Easy peasy lemon squeezy:

$ yarn

Or:

$ npm install

Was installed and configured the eslint and prettier to keep the code clean and patterned.

Configuring

Configure your environment variables and remember to start the API before to start this app.

.env

In this file you may configure the API's url. Rename the .env.example in the root directory to .env then just update with your settings.

key	description	default
REACT_APP_API_URL	API's url with version (v1)	http://localhost:3333/v1

API

Start the API (see its README for more information). In case of any change in the API's port or host remember to update the .env too.

Usage

To start the app run:

$ yarn start

Or:

npm run start

localStorage

The project saves user's data into a localStorage key: tindev_user. Before use this data you need parse the data to a JavaScript object with JSON.parse function. Below you can see fictitious data:

{
  "id": "5fcff2ed42922f8128ab42ce",
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibWVzc2FnZSI6IkVhZSwgdHVkbyBibHo_IiwiaWF0IjoxNTE2MjM5MDIyfQ.MgLoxvRXoXeEHv36H4KuUQ3kfVl66uSOzJYll2IsZHE"
}

Running the tests

Jest was the choice to test the app, to run:

$ yarn test

Or:

$ npm run test

Coverage report

You can see the coverage report inside tests/coverage. They are automatically created after the tests run.