Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/oth21dev/oxanatheis_12_20062022

:sparkles: SPORTSEE - React web application used for analytics dashboard allowing to integrate the sporting activity data into the graphics using Recharts library.
https://github.com/oth21dev/oxanatheis_12_20062022

css3 heroku-deployment html5 javascript jsdoc react recharts-library styled-components

Last synced: 24 days ago
JSON representation

:sparkles: SPORTSEE - React web application used for analytics dashboard allowing to integrate the sporting activity data into the graphics using Recharts library.

Awesome Lists containing this project

README

        

[![VALIDATED - HTML5](https://img.shields.io/badge/VALIDATED-HTML5-A8000E?style=for-the-badge)](https://) [![MADE WITH - JAVASCRIPT](https://img.shields.io/badge/MADE_WITH-JAVASCRIPT-1D75C2?style=for-the-badge)](https://) [![STYLED - CSS](https://img.shields.io/badge/STYLED-CSS-E034BE?style=for-the-badge)](https://) [![USES - RECHARTS](https://img.shields.io/badge/USES-RECHARTS-red?style=for-the-badge)](https://) [![BUILT WITH - REACT](https://img.shields.io/badge/BUILT_WITH-REACT-4F28B0?style=for-the-badge)](https://)

# SportSee - front-end web development using Recharts

SportSee is an application dedicated to sports.
It allows users to view in real time the number of sessions performed, the number of calories burned and many other information to monitor sports performance.

## Skills

- initializing a web application with ReactJS
- creating components with React
- developing routes for a web application with React Router
- using Recharts to display the data
- API call

## Prerequisites

- NodeJS

## View in production (build)

- login with user id : 12 or 18

## Local installation

- git clone https://github.com/OTH21DEV/OxanaTheis_12_20062022.git
- npm install

## Launch locally

- npm start
- open http://localhost:3000 to view it in the browser

## API installation (back-end)

- git clone https://github.com/OpenClassrooms-Student-Center/P9-front-end-dashboard.git
- read the documentation on readme to launch API with Docker or NPM

## Config React App

- indicate the user's id in the form (actually available 12 | 18)
- to use mocked data, add in url "?mocked=true" (ex: http://localhost:3002/user/12?mocked=true )

## Technologies:

- HTML
- CSS (Styled Components)
- Javascript
- React
- Recharts

## Tools:

- Visual Studio Code
- Git
- ESLint
- Prettier