This web version allows users to register yourself, look for another users by technologies and see their GitHub profile information. All the resources used by this application comes from its API.
Click to expand.
Easy peasy lemon squeezy:
$ yarn
Or:
$ npm install
Was installed and configured the
eslintandprettierto keep the code clean and patterned.
Configure your environment variables and remember to start the API before to start this app.
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_URL | Utilized to created the redirect url to GitHub OAuth process | http://localhost:3000 |
| REACT_APP_API_URL | API's url with version (v1) | http://localhost:3333/v1 |
| REACT_APP_SOCKET_URL | API's socket url | http://localhost:3333 |
| REACT_APP_MAP_LAT and REACT_APP_MAP_LNG | Where the map will center by default | - |
| REACT_APP_GOOGLEMAP_API_KEY | API Key to allow Google Maps to be rendered (See Get an API Key) | - |
| REACT_APP_GITHUB_CLIENT_ID | GitHub App Client ID (the same utilized in the 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.
To start the app run:
$ yarn start
Or:
npm run start
The project saves user's data and token into a localStorage key: devradar. Before use this data you need parse the data to a JavaScript object with JSON.parse function. Below you can see fictitious data:
{
"_id": "60062bebde7800844cc23a26",
"avatar_url": "https://avatars3.githubusercontent.com/u/15165349?v=4",
"techs": "Node.js, React, ReactNative",
"latitude": -22.424944399999973,
"longitude": -46.979399400000005,
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYwMDYyYmViZGU3ODAwODQ0Y2MyM2EyNiIsImlhdCI6MTYxMTAxODc4NywiZXhwIjoxNjExNjIzNTg3fQ.Ut25eM4tyFvBkhFf_Ox9qLhjLsKSyEjNYAKiReF-eBU"
}Jest was the choice to test the app, to run:
$ yarn test
Or:
$ npm run test
You can see the coverage report inside tests/coverage. They are automatically created after the tests run.