Sports See

Link to website
Link to project repo
Project Gallery

1/4

Github
JSDoc
React
Recharts
Styled Components

SportSee est une startup dédiée au coaching sportif. En pleine croissance, l'entreprise va lancer une nouvelle version de la page de profil de l'utilisateur. Cette page permet à l'utilisateur de suivre le nombre de sessions réalisées ainsi que le nombre de calories brûlées. Ainsi, la nouvelle page de profil utilisateur doit être refaite avec React, en intégrant les graphiques sur l'activité sportive de l'utilisateur en utilisant soit D3 soit Recharts.

Fonctionnalités

  • Un menu de navigation horizontal pour permettre la navigation entre les différents écrans.
  • Un menu de navigation vertical pour permettre la navigation entre les futurs blocs de navigation.
  • L'affichage de l'activité quotidienne (poids et calories brûlées), sous la forme d'un Barchart. Un tooltip apparaît au survol.
  • L'affichage de la durée moyenne des sessions sous la forme d'un LineChart. Un tooltip apparaît au survol.
  • L'affichage des informations concernant la réalisation de l'objectif journalier (score moyen) sous la forme d'un RadialBarChart.
  • L'affichage des types d’activités réalisées sous la forme d'un RadarChart.
  • L'affichage des informations concernant les calories, protéines, glucides et lipides de la journée sous forme de card.

Contraintes

  • Utiliser les maquettes Figma et le Kanban avec les User Stories.
  • La résolution minimale de l'écran est d'au moins 1024 par 780 pixels.
  • Un backend (NodeJS) est fourni qui permet les appels HTTP et la récupération de données.
  • Utiliser soit Fetch soit Axios pour la gestion des appels eux-mêmes.
  • Les appels doivent être effectués en dehors des composants React
  • Créer un service séparé qui se chargera de faire ces appels.
  • Démarrer le projet avec les données simulées. Une fois le projet fonctionnel, intégrer l'API.
  • Inclure des proptypes pour chacun des composants.
  • Utiliser JsDoc pour documenter les fonctions et les méthodes.
  • Toute la documentation doit être faite en anglais.

Compétences

  • Assurer la qualité des données d'une application
  • Interagir avec un service Web
  • Développer des éléments graphiques avancés à l'aide de bibliothèques JavaScript
  • Produire de la documentation technique pour une application

Notes

Pour le prototype, il n'y a actuellement que deux utilisateurs : Cecelia et Karl.