Personal trainer

Created as my final project for a university Front-end Programming course, the 'Personal Trainer' web app, built with React.js, simplifies customer and training management. It includes a Customer List for easy info access, Trainings List for quick removal of sessions, a Calendar for scheduling, and Statistics with clear diagrams showing total training durations.

Table of Contents

• Usage Guied
• Features
• Technologies Used
• Dependencies
• Screenshots

Usage Guide

1. Clone the project
   git clone https://github.com/alexonthespot7/personalTrainer.git
   
2. run the following command in a terminal window (in the complete) directory:
   npm install
   
3. run the following command in a terminal window (in the complete) directory:
   npm start
   
4. Navigate to localhost:3000

Features

• Customer List:

  • Displays a comprehensive list of customers.
  • Allows viewing and editing of customer details.
  • Supports the deletion of customer profiles.
  • Facilitates the addition of new training sessions for specific customers.

• Trainings List:

  • Presents a detailed overview of all training sessions.
  • Provides information about each training session.
  • Enables the removal of individual training sessions.

• Calendar:

  • Exhibits a visual representation of scheduled training sessions.
  • Integrates seamlessly with a calendar view for a holistic overview.

• Statistics:

  • Offers a visual summary of training statistics across all customers.

• User-Friendly Interface:

  • Features an intuitive and easy-to-navigate interface.

Technologies Used

• React.js
• css

Dependencies

• @date-io/date-fns (^1.3.13): Date management library supporting Date-Fns, facilitating date operations for UI components.
• date-fns (^2.28.0): Versatile JavaScript date utility library for parsing, manipulating, and formatting dates.
• fullcalendar (^5.11.*): FullCalendar package components for building interactive, customizable calendars in React.
• @mui/icons-material: Material-UI Icons library for customizable icons following Material Design guidelines.
• @mui/material: Material-UI framework providing pre-designed React components.
• @mui/x-data-grid (^5.10.0): Advanced data grid component library based on Material-UI.
• @mui/x-date-pickers (^5.0.0-alpha.2): Experimental date picker components from Material-UI.
• ag-grid-react: React wrapper for AG-Grid to seamlessly integrate its functionalities.
• recharts (^2.1.9): React charting library for building responsive and customizable charts.
• lodash (^4.17.21): A comprehensive JavaScript utility library offering functions for common programming tasks.

Screenshots