Ev Glob Online Ev Station Booking webapp

EV Glob Overview

Key Features

1. User Dashboard
   • Centralized hub for all user activities.
   • Access to:
     • Analytics
     • Profile settings
     • Bookings
     • Feedback
     • Notifications
2. Booking Management
   • View and manage EV charging station bookings.
   • Filter bookings by:
     • Date
     • Type
     • Search terms
   • View payment details and download invoices.
3. User Feedback
   • Collect and manage feedback and ratings from users about EV stations.
   • Provides actionable insights to improve the user experience.
4. Profile Management
   • Enables users to update and manage their profile information.
5. Settings
   • Offers customization options for user preferences and settings.
6. Analytics
   • Visualize user data through dynamic charts and graphs.
   • Key metrics include:
     • Bookings
     • Payments
     • User activity trends
   • Built using Chart.js for robust data visualization.
7. EV Station Details
   • Displays detailed information about EV charging stations.
   • View station-specific data, user reviews, and ratings.
8. Notifications
   • Manage and view notifications for:
     • Bookings
     • Payments
     • Other key activities
9. Payments
   • Detailed view of payment history and transaction details.
   • Includes invoice downloads for user convenience.

Technology Stack

• Frontend: Angular
• Backend: Node.js
• Database: MongoDB
• Charts Library: Chart.js

Vision

• Users: Offering an easy-to-navigate platform to find, book, and manage charging sessions.
• Station Owners: Providing valuable insights, feedback management tools, and analytics to improve station operations and profitability.

User Module

Module Information

Components Overview

1. UserdashboardComponent
   • Displays user information, toggles the sidebar, implements dark mode, and includes functionality for user logout.
2. UserbookingComponent
   • Displays a list of bookings for a user.
   • Filters bookings by:
     • Date
     • Type
     • Search term
   • Views payment details and downloads invoices.
3. UserfeedbackComponent
   • Manages user feedback and ratings.
4. UserprofileComponent
   • Displays and manages user profile information.
5. UsersettingComponent
   • Provides settings for updating profile details.
6. UseranalyticsComponent
   • Displays analytics related to:
     • Bookings
     • Payments
     • User counts
   • Uses Chart.js for rendering data.
7. EvdetailspageComponent
   • Displays detailed information about an EV station and formats event data (date and time).
8. NotificationsComponent
   • Manages and displays user notifications.
9. UserpaymentsComponent
   • Displays payment details related to user bookings.

UserDataService Overview

Key Responsibilities

1. Fetch User Data
   • Retrieve essential user profile information.
   • Access user-specific data like:
     • Bookings
     • Feedback
     • Notifications
2. Update User Data
   • Manage user profile updates and preferences.
   • Support modifications to user settings.
3. Booking Management
   • Retrieve a user's bookings from the backend.
   • Access detailed information about bookings, payment details, and statuses.
4. Feedback Management
   • Collect and store feedback provided by users.
   • Manage user ratings for EV stations.
5. Analytics Data
   • Fetch analytics data and enable dynamic chart rendering using libraries like Chart.js.
6. Notification Management
   • Retrieve user-specific notifications and manage them effectively.

Integration Flow

• Frontend Components: Angular components rely on the UserDataService to fetch and manage data.
• Backend API: Communicates with the Node.js backend to perform CRUD operations and retrieve data from MongoDB.

Core Features

• Centralized Data Handling: Encapsulates all user-related operations in one service.
• Performance Optimization: Reduces redundant API calls by caching frequently accessed data.
• Extensibility: Easily adaptable to accommodate additional features like advanced analytics or push notifications.

Benefits

• Improved User Experience: Ensures smooth and consistent data flow between the user interface and backend.
• Modular Architecture: Decouples data operations from frontend logic, making the system more maintainable.
• Real-Time Data: Supports dynamic and real-time updates for bookings, feedback, and notifications.

Admin Module Overview

Components

1. DashboardComponent: Provides an overview of platform status and key metrics.
2. ManageUsersComponent: Allows admins to view, add, edit, and delete user accounts.
3. ManageStationsComponent: Enables admins to manage EV charging stations.
4. AnalyticsComponent: Displays detailed platform usage reports.

Benefits

• Centralized Administration: Provides a single interface for managing all aspects of the platform.
• Enhanced Control: Efficient management of users and stations.
• Data-Driven Insights: Informed decisions based on comprehensive analytics.

SuperAdmin Module Overview

Components

1. DashboardComponent: Provides an overview of platform status and key metrics.
2. ManageAdminsComponent: Allows super admins to manage admin accounts.
3. SystemSettingsComponent: Enables configuration of platform settings.
4. AnalyticsComponent: Displays platform usage insights.

Benefits

• Advanced Administration: Provides a comprehensive interface for managing the entire platform.
• Enhanced Control: Efficient management of admins and system settings.
• Data-Driven Insights: Informed decision-making based on analytics.

Server and Project Directory Structure

• Root-Level Files: Includes environment files, city data, metadata, and project documentation.
• Controllers: Subdirectories for admin, superadmin, and user role-specific functionalities.
• db: Includes database configuration and scripts.
• Router: Defines routes for admin, superadmin, and user-related requests.
• server.js: Sets up the Express.js server.
• uploads: Directory for storing uploaded files.

/server/
├── .env
├── city.json
├── controllers/
│ ├── admin/
│ │ ├── auth.js
│ │ ├── booking.js
│ │ ├── dependencies.js
│ │ ├── notification.js
│ │ ├── passwordReset.js
│ │ ├── rating.js
│ │ └── reset-password.html
│ ├── superadmin/
│ │ ├── approve.js
│ │ ├── auth.js
│ │ ├── chartData.js
│ │ └── dependencies.js
│ └── user/
│ ├── auth.js
│ ├── booking.js
│ ├── dependencies.js
│ ├── imageController.js
│ ├── notification.js
│ ├── passwordReset.js
│ ├── paymentController.js
│ └── rating.js
├── db/
│ ├── d.json
│ ├── db.js
│ └── sql/
├── package.json
├── README.md
├── router/
│ ├── adminRouter.js
│ ├── superadminRouter.js
│ └── userRouter.js
├── server.js
└── uploads/

Video Demo