Personal Trainer Frontend Application

Overview

This is a React-based front-end application for managing customers and their training sessions for a personal trainer company. The app integrates with a REST API to perform CRUD operations on customer and training data. Features include sorting, searching, filtering, and additional functionalities like exporting data, viewing training sessions in a calendar, and visualizing statistics in a bar chart.

Features

Task 1: List Pages

Customers list page with sorting and searching.

Trainings list page with sorting, searching, and formatted date display (dd.mm.yyyy hh:mm).

Navigation between Customers and Trainings pages.

Task 2: CRUD Operations

Customers: Add, edit, and delete customers (with confirmation dialog).

Trainings: Add training to a customer (with date picker), edit training, and delete training (with confirmation dialog).

Task 3: Export & Calendar

Export all customer data to a CSV file (excluding unnecessary data).

Calendar view to display training sessions in monthly, weekly, and daily formats.

Deployment of the app to a cloud server.

Task 4: Statistics & Charts

Statistics page displaying training minutes by activity using bar charts.

Technologies Used

React for building the front-end.

React Bootstrap for UI components and theme.

React Router for navigation.

Day.js for date formatting.

React Calendar Component for the training calendar.

Installation & Setup

Prerequisites

Node.js (v16+ recommended)

npm or yarn

Installation Steps

Clone the repository:

git clone https://github.com/usifschool/trainer_app.git

Navigate to the project folder:

cd personal-trainer-app

Install dependencies:

npm install

Start the development server:

npm start

Open http://localhost:3000 in your browser.

This project is licensed under the MIT License