Telemetron Web v1.1

Telemetron is a comprehensive, real-time telemetry tracking and analysis platform built with React. This web application is designed for motorsport teams, cyclists, runners, and other sports enthusiasts to analyze performance data both during live sessions and post-event.

Note: This is V1.1 of the project and is designed to work specifically with V1.1 of the Telemetron API repository, available at: https://github.com/Santi-49/telemetron-api

Table of Contents

• Features
• Tech Stack
• Prerequisites
• Installation & Setup
• Available Scripts
• Project Structure
• Authentication Levels
• API Integration
• Contributing
• License

Features

Core Functionality

• Secure Authentication: JWT-based authentication system with login/logout capabilities.
• Role-Based Access Control: Differentiated user permissions for features like user management, log viewing, and administrative actions.
• Light & Dark Theming: Easily switch between light and dark modes for user comfort.
• Responsive Design: Built with Bootstrap to ensure a seamless experience across devices.
• GDPR Compliant: Includes a cookie consent banner and detailed privacy/cookie policies.
• reCAPTCHA Integration: Protects against automated abuse with Google reCAPTCHA.

Session & Data Analysis

• Live Session Streaming: Real-time data tracking with automatic lap detection and timing.
• Post-Session Analysis: In-depth review of completed sessions with comprehensive data visualization.
• Interactive Maps: Custom Leaflet maps with start/finish lines, sector points, and route markers.
• Custom Route Creation: Upload GPX files to define tracks with custom checkpoints and sectors.
• Data Export: Download track data in GPX and JSON formats.

Data Visualization & Dashboard

• Customizable Dashboard: A dynamic dashboard powered by GridStack, featuring draggable and resizable widgets.
• Interactive Plots: Analyze performance with detailed charts for lap times and speed vs. distance, built with Canvas.js.
• Live Weather & Telemetry: Widgets for displaying live weather, speed, temperature, and other telemetry data.
• Filterable Data Tables: Robust tables for viewing logs, users, sessions, and tracks with powerful filtering options.

Tech Stack

• Framework: React 19
• Build Tool: Vite
• Routing: React Router DOM
• Styling: Bootstrap & Custom CSS
• Charts: Canvas.js
• HTTP Client: Axios
• Grid Layout: GridStack.js
• Mapping: Leaflet & React-Leaflet
• Date/Time: date-fns & Moment.js
• Linting: ESLint

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher recommended)
• npm (usually comes with Node.js)

Installation & Setup

1. Clone the repository:

   git clone https://github.com/Santi-49/Telemetron-Web.git
   cd Telemetron-Web

2. Install dependencies:

   npm install

3. Set up environment variables: Create a .env file in the root of the project by copying the example file:

   cp .env.example .env

   Update the .env file with your specific configuration:

   VITE_API_URL=http://your-backend-api-url
   VITE_SITE_KEY=your_recaptcha_site_key
   

Available Scripts

In the project directory, you can run:

• npm run dev

  • Runs the app in development mode. Open http://localhost:5173 to view it in the browser. The page will reload if you make edits.

• npm run build

  • Builds the app for production to the dist folder. It correctly bundles React in production mode and optimizes the build for the best performance.

• npm run lint

  • Runs the ESLint checker to find and fix problems in your JavaScript code.

• npm run preview

  • Serves the production build locally to preview it before deployment.

Project Structure

Telemetron-Web/
│
├── public/                # Static assets (icons, fonts, images)
├── src/
│   ├── api/               # API communication (axios setup, caching)
│   ├── components/        # Reusable React components
│   │   ├── Auth/          # Auth context, protected routes
│   │   ├── Chart/         # Charting components
│   │   ├── CookieConsent/ # GDPR cookie banner and context
│   │   ├── FlashMessages/ # User notification system
│   │   ├── GridStack/     # Dashboard grid layout system
│   │   ├── Map/           # Leaflet map components
│   │   ├── Sidebar/       # Main navigation sidebar
│   │   └── Table/         # Data table and filtering components
│   │
│   ├── pages/             # Application pages/routes
│   │   ├── core/          # Core pages (Login, Settings, About)
│   │   └── web/           # Main app pages (Sessions, Live View)
│   │
│   ├── App.jsx            # Main application component with routing
│   └── main.jsx           # Application entry point
│
├── libs/                  # Third-party libraries included as source
│   └── gridstack-react/   # GridStack React integration
│
├── .env.example           # Example environment variables
├── index.html             # Main HTML file
├── package.json           # Project dependencies and scripts
└── README.md              # This file

Authentication Levels

The application uses a permission-based system to control access to different features:

• Level 0: Not Active (user account is disabled)
• Level 1: Basic User (can view sessions)
• Level 2: Super User (can view/create sessions and manage devices/tracks)
• Level 3: Moderator (can manage users)
• Level 4: Super Moderator (can view system logs)
• Level 5: Admin (full access)

API Integration

This frontend application is designed to communicate with a corresponding backend API. The API handles authentication, data storage, and business logic. Key endpoint categories include:

• Authentication: /login, /logout, /id
• User Management: /get_users, /get_user/:id, /edit_user/:id, /add_user
• Session Management: /session, /live_session, /track
• Settings: /change_theme, /change_user_details, /change_password
• Analytics: /get_logs, /get_usage

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

The Ubuntu font used in this project is licensed under the Ubuntu Font Licence - see public/fonts/Ubuntu/UFL.txt for details.