SportSee is a web application that provides users with information on their daily physical activity and health indicators, such as calories burned, session duration, and much more. The application retrieves and visualizes user data through various charts and cards to offer a detailed view of their fitness journey.
- Dashboard : Displays the user's health indicators, including daily activities, average session duration, and performance.
- Dynamic Data Visualization: Provides detailed information via charts and visual components.
- Responsive Design: Ensures readability on screens with a minimum width of 1024px.
- React : JavaScript library for building the user interface.
- Recharts : Library used for rendering data visualizations.
- Styled Components : CSS-in-JS library for styling components.
- React Router : Library for route management and navigation.
-
Clone the repository:
-
Navigate to the project directory:
cd SportSee -
Install the dependencies:
npm install
-
Start the development server:
npm start
The application should now be running at http://localhost:3000.
- Open the application in your browser at http://localhost:3000.
- Access a user's profile by entering a URL like http://localhost:3000/profile/{userID}, replacing {userID} with a valid user ID (e.g., 12 or 18).
- Explore the dashboard to see the user's health indicators visualized with different charts.
src/
├── assets/ # Images and icons
├── components/ # Reusable UI components (e.g., Header, SideBar)
├── models/ # Data models for structuring API responses
├── pages/ # Page components (e.g., ProfilePage)
├── services/ # API service functions for data fetching
└── index.jsx # Entry point of the applicationThe application connects to the following endpoints:
- Get User Info: /user/{userID} - Retrieves the user's main information, including user ID, personal information (first name, last name, age), today's score (todayScore), and key data (calories, macronutrients, etc.).
- Get User Activity: /user/{userID}/activity - Retrieves a user's daily activity with kilograms and calories.
- Get User Average Sessions: /user/{userID}/average-sessions - Retrieves the average sessions of a user per day. The week starts on Monday.
- Get User Performance: /user/{userID}/performance - Retrieves a user's performance (energy, endurance, etc.). Note: Currently, only two users have been mocked. They have userId 12 and 18 respectively.
Examples of Requests
- http://localhost:3000/user/12/performance - Retrieves the performance of the user with ID 12.
- http://localhost:3000/user/18 - Retrieves user 18's main information.
- NodeJS (version 12.18) or higher (tested up to Node 20.0)
- Yarn
If you are working with several versions of NodeJS, we recommend you install nvm. This tool will allow you to easily manage your NodeJS versions.
- Fork the repository
- Clone it on your computer.
- The
yarncommand will allow you to install the dependencies. - The
yarn devcommand will allow you to run the micro API.
- The
docker image build --no-cache -t micro-api .command will allow you to build your image. - The
docker container run --name micro-api -p 3000:3000 -dt micro-api yarncommand will allow you to create your Docker container and run your image on port 3000. - The
docker container stop micro-apicommand will allow you to stop your micro-api. - The
docker container rm micro-apicommand will allow you to delete your micro-api container.
Finally, if you have VsCode, you can easily launch your project in a docker environment.
You will need the Remote Development extension. Once you have this extension installed, just click on the Reopen in Container button.
Once in the container, run the yarn dev command.