This project is an interactive web application designed to assist school bus drivers in efficiently locating and managing student pickup points and route planning. By utilizing a map interface, drivers can search for student information by name, grade, student ID, address, and area. The application visualizes student locations on a map, allowing drivers to easily navigate and access relevant details for each student.
- Map Display : The application features a dynamic map using Leaflet.js to visualize student locations.
- Student Data Storage : The student data is stored securely on a MongoDB Atlas Database, thus ensuring that only authorized members can access the data.
- Search Functionality : Drivers can search for students by name, grade, student ID, address, and area.
- Marker Placement : Each student's address is marked on the map with customizable icons.
- Interactive Pop-ups : Clicking on a marker reveals a popup with detailed student information.
- Responsive Design : The map and user interface are optimized for both desktop and mobile devices.
- HTML5 : For structuring the web application.
- CSS3 : For styling and responsive design.
- JavaScript (React.js) : For dynamic functionality and interactive features.
- Leaflet.js : For map integration and marker management.
- Axios: For handling server requests from the frontend and to fetch data from the database.
- Express.js: For working with APIs within the NodeJS framework.
- App.css : The CSS file for styling the application.
- App.jsx : The main JavaScript file where the application logic and interactions are implemented.
- main.jsx : Used in conjunction with index.html to render the App.jsx into the DOM.
- Clone the repository from GitHub.
- Run
npm install
in the terminal while in the main directory. - Run
npm run dev
in the terminal while in the main directory. - Navigate to localhost:5173 in a browser.
- Ensure you have an active internet connection for Leaflet.js to load the map tiles.
- Open the application in a web browser.
- Use the search bar to find students by name, grade, student ID, address, or area.
- Click on the markers on the map to view detailed information about each student.
- Utilize the map controls to zoom in and out or navigate to different areas.
This project provided practical experience in front-end web development, particularly in working with interactive maps and markers. The skills gained include:
- Implementing map functionality using Leaflet.js.
- Enhancing user experience through interactive elements such as popups and responsive design.
- Developing a full-stack application using HTML, CSS, and JavaScript.
For any inquiries or further information, please contact me. Email : [email protected]