Overview

This design document outlines the development of a SaaS web application for an Electric Vehicle (EV) charging station booking system. With the surge in EV purchases, drivers are increasingly seeking reliable charging options, especially when traveling to new cities.

While the rise of EVs increases environmental sustainability, the scarcity of easily locatable charging stations presents a challenge. This platform aims to bridge the gap   between EV drivers and charging station providers, including commercial vendors and  private households, enabling them to rent out their charging facilities at specified times.

The target audience for this project includes EV drivers looking for convenient charging solutions and charging station owners interested in monetizing their facilities. By facilitating a connection between these two groups, the system not only supports environmental sustainability efforts but also ensures charging stations are utilized efficiently. This service will offer a straightforward signup process and a comprehensive booking system, filling a gap in the market for an accessible, user-friendly platform dedicated to EV charging needs.

The application will initially launch as a web-based platform, developed using the CodeIgniter MVC framework to ensure a scalable, secure, and maintainable architecture. Data management will be handled through the MySQL relational database system, emphasizing security and integrity. While the primary focus is on creating an accessible and responsive user interface suitable for various devices, the development of a native mobile application will only be considered for future phases.

Key Features

Each of these features is designed with the user experience in mind, ensuring that both vendors and drivers can navigate the platform with ease:

.    Administration Dashboard

An admin dashboard will be integral for managing the ecosystem of EV charging station vendors and EV car owners/drivers. This feature will facilitate the oversight of user activities and resolve disputes.

.    Vendor Registration and Management

Vendors can register on the platform, after which they'll have access to a dashboard allowing them to manage their profile. This includes adding their charging station's location via longitude and latitude, setting available charging times, and viewing

bookings. This ensures that vendors have full control over their listings and can adjust their availability as needed.

.    Booking Trend Insights for Vendors

Beyond basic management functionalities, vendors will have access to insights regarding projected revenue and booking trends. This data-driven feature will help vendors understand demand patterns and optimize their availability and pricing strategies.

.    EV Driver Registration and Management

EV drivers can easily register and log into the platform, where they can manage their profiles, view their booking history, and access other relevant functionalities.

.    Charging Station Discovery and Booking with Maps

A pivotal feature for EV drivers is the capability to locate charging stations using an interactive map, which displays options based on location, availability, and other specified preferences. This integration of mapping technology allows users to visually navigate and identify the most convenient charging stations in real-time.

Once a suitable station is found, drivers can book a charging slot directly through the platform. This streamlined process aims to minimize the hassle associated with finding and securing charging stations, especially in unfamiliar areas.

Database Design

The database is designed to allow users to assigned to both a vendor and be an EV driver. Vendors can have multiple charging stations. EV drivers can make multiple bookings.

Mockups

[HTML Mockups are not provided in this example document. In this section you can include a few screengrabs and refer to the HTML files that are submitted with your assessment item.]

Technology Research

It is crucial to evaluate different mapping services based on their features, customization capabilities, and compatibility with React Native for future mobile app development. Below is a comparative analysis of three popular mapping services/libraries: Google Maps, Mapbox, and Leaflet.

Based on this evaluation Mapbox has been chosen as the mapping library that will be

used in the project It provides a good balance between extensive customization options

(support for custom icons and detailed mapping features), React Native compatibility, and a developer-friendly pricing model.

Timeline

The timeline allocates time across different phases, ensuring that each critical aspect of the development process is allocated sufficient time for an individual developer to implement. The web application will be deployed and released at the end of May  2024.

[Note: This is a real-world timeline and includes some items that are not required in your student project assessment]

.    Planning (1-2 weeks):

Initial phase focusing on gathering requirements, selecting technologies, and creating initial mockups.

.    Design (2 weeks):

Detailed database design followed by the finalization of UI/UX mockups.

.    Development (5 weeks):

Setting up the development environment, followed by focused periods on backend and frontend development, and integration testing.

.    Testing & Deployment (3 weeks):

Conducting user acceptance testing, addressing any issues, deploying the system to production, and reviewing post- deployment.

References

CodeIgniter. (2024, Feb 29).https://www.codeigniter.com/

Google Maps Developer Platform. (2024, Feb 29).https://developers.google.com/maps

Leaflet. (2024, Feb 29).https://leafletjs.com/

Mapbox. (2024, Feb 29).https://www.mapbox.com/

Use of GenAI and other tools:

.    DALLE 3 via ChatGPT was used to generate the image on the cover page and the logo used in the page headers.

.    ChatGPT was used to help brainstorm the timeline tasks and generate the Gantt Chart in Mermaid.js format.

.    Usedhttps://kroki.io/to preview DBML but rendered the DBML ER diagram in https://dbdiagram.io/