mist3rm / launchpoint-frontend

This project is a dashboard and management system for a network of drone battery swapping stations. It facilitates the operation and monitoring of station statuses and logistics.

Drone Battery Station Management Dashboard

This project is a dashboard and management system for a network of drone battery swapping stations. It facilitates the operation and monitoring of station statuses and logistics. Built with React.js and TypeScript, it offers a responsive UI with smooth animations powered by Framer Motion and is bundled efficiently with Vite.

Technologies Used

Install and Run

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (which includes NPM)

Install Dependencies

Make sure you are in the project directory first

Install the necessary project dependencies by running:

npm install

To run the project, execute the following command:

npm run dev

This command starts the development server by default on port 5173. Once the server is running, you can view the application by navigating to http://localhost:5173 in your web browser.

launchpoint-frontend's Issues

Environmental Impact Reporting

Estimate and display CO2 emissions saved.

• Create a formula to estimate emissions saved.
• Design a UI component for displaying this data.
• Integrate the CO2 saving calculation into the dashboard.

Monitor and report energy consumption of the stations.

• Develop a system to track energy usage data.
• Design UI components to display energy consumption.
• Implement real-time energy consumption tracking on the dashboard.

Operational Efficiency Metrics

Calculate and display the average battery swap time.

• Develop algorithm to calculate average swap time.
• Design UI components to display this metric.
• Integrate calculation with real-time data.

Implement downtime statistics tracking.

• Develop system for tracking and categorizing downtime.
• Create UI components to display downtime statistics.

Develop an overview of operational costs per station.

• Create a cost analysis algorithm.
• Design UI components to display cost data.
• Integrate cost data into the dashboard.

Station-Specific Data Display

Design UI components to show individual station status.

• Create UI mockups for station status display.
• Develop frontend components based on mockups.
• Integrate real-time data fetching for station status.

Integrate graphs for displaying battery charge levels at each station.

• Design battery level graph UI.
• Implement data fetching for battery levels.
• Create the graph component with dynamic data integration.

Create a maintenance and issues tracking system for each station.

• Design the UI for displaying maintenance schedules and issue logs.
• Develop backend support for maintenance and issue tracking.
• Integrate the tracking system into the frontend.

Implement Login Functionality

Login

Design the Login Form Interface

• Create UI mockups for the login form.
• Develop frontend components for the login interface.

Implement Backend Integration for Login

• Develop API endpoints for user authentication.
• Integrate the login form with backend authentication endpoints.

Implement Secure Authentication Mechanisms

• Set up secure session management.
• Implement measures against common security threats (e.g., brute force attacks).

Implement Signup Functionality

Signup

Design the Signup Form Interface

• Create UI mockups for the signup form.
• Develop frontend components based on the mockups.

Implement Backend Integration for Signup

• Develop API endpoints for user registration.
• Integrate the signup form with backend registration endpoints.

Add Client-Side Validation

• Implement form validations (e.g., email format, password strength).
• Provide user feedback for validation errors.

Geographical Overview Implementation

Develop an interactive map to show the location of all stations.

• Choose and integrate a mapping library (e.g., Leaflet, Google Maps API).
• Design a map UI that shows station locations.
• Implement interactive features like zooming and station details on click.

Create a feature to visualize station usage by location.

• Develop logic to aggregate usage data by location.
• Design a UI to visualize this data on the map.
• Implement the feature with real-time data updates.

Customizable Report Generation

Develop a system for users to generate custom reports.

• Design a user interface for selecting report parameters.
• Implement backend logic for generating reports based on user selection.
• Create a mechanism to display or download the generated reports.

Implement data export functionality for offline analysis.

• Design the export feature interface.
• Develop the functionality to export data in various formats (CSV, Excel, PDF).
• Integrate the export feature with existing data views.

Develop Usage Statistics Interface

Integrate graphs or charts to show battery swaps over time.

• Design graph/chart UI elements.
• Develop a data fetching mechanism for historical battery swap data.
• Implement data visualization using the chart library.

Implement functionality to identify and display peak usage times.

• Create an algorithm to analyze and identify peak times.
• Develop UI components to display peak usage information.

Create visualizations for usage patterns and trends.

• Design UI for displaying usage patterns.
• Implement data processing for trend analysis.
• Develop the trend visualization component.

User Experience Enhancements

Improve intuitive navigation throughout the dashboard.

• Conduct a UX review to identify navigation pain points.
• Redesign navigation elements for clarity and ease of use.
• Implement the redesigned navigation.

Ensure responsive design for accessibility on various devices.

• Audit existing design for responsiveness.
• Make necessary adjustments to CSS and layout for better responsiveness.
• Test the dashboard across different devices and screen sizes.

Allow users to customize dashboard views and save layouts.

• Design the UI for customizing dashboard views.
• Develop the functionality to save and load user-specific dashboard layouts.
• Implement user preferences storage, either locally or on the server.

Implement Overall Network Health and Status

Implement a component to display the total number of operational stations.

• Design the UI layout for the station count display.
• Fetch the total station count from the backend.
• Integrate the data with the UI component.

Develop a network status indicator with color codes.

• Design the network status indicator component.
• Implement logic to determine network health (e.g., percentage of stations online).
• Apply color coding based on health status.

Create an alert/notification system for critical network issues.

• Design the UI for alerts and notifications.
• Set up a system to detect and categorize different types of alerts.
• Integrate real-time alert notifications into the dashboard.

Enhance Interactive Elements

Implement search and filter capabilities for station data.

• Design a UI for the search and filter feature.
• Develop backend logic for searching and filtering data.
• Integrate the search and filter functionality into the dashboard.

Integrate real-time data updates where possible.

• Identify parts of the dashboard that can benefit from real-time updates.
• Implement WebSocket or similar technology for real-time data transmission.
• Update the frontend to handle and display real-time data.