SmartCampus - A Campus Navigation and Safety App

SmartCampus is a cutting-edge campus navigation and safety app for students of George Mason University made to address the everyday challenges of navigating a large university environment. The application is designed to improve both safety and convenience around campus by implementing a range of useful functionalities:

Safe Campus Routes: Navigate confidently with recommended paths that prioritize safety.

Real-Time User Reported Safety Alerts: Stay informed with instant notifications about campus incidents as reported by fellow users.

Full Interactive GMU Map: Explore George Mason University through a detailed, interactive map featuring key landmarks and facilities.

Schedule Integration: Seamlessly add your class schedule to the map to view your class locations and timings at a glance.

Emergency Contacts and Services: Access a comprehensive list of emergency contacts and essential campus services whenever needed.

Inspiration

SmartCampus was inspired by the real-world challenges faced by students navigating large university campuses. As someone who has experienced the confusion of finding classrooms, dealing with campus alerts, and needing quick access to emergency information, I wanted to create a solution that would make campus life easier and safer for students.

What I Learned

Throughout the development of this project, I gained valuable experience in several areas:

React Development: I deepened my understanding of React hooks, state management, and component lifecycle
Map Integration: I learned to work with Leaflet.js for interactive maps, including custom markers and routing
Data Persistence: I implemented localStorage for saving user data like class schedules and alerts
Responsive Design: I improved my skills in creating interfaces that work well across different devices
Error Handling: I developed better practices for handling errors and providing user feedback

How I Built the Project

The application was built using a modern web development stack:

Frontend:
- React for the user interface
- Leaflet.js for map functionality
- CSS for styling with responsive design principles
Features:
- Interactive campus map centered on the Johnson Center
- Class schedule management with chronological ordering
- Campus alerts system with severity indicators
- Emergency contacts information
- Navigation tools for route planning
- Weather information integration
Data Management:
- Used localStorage for persistent data storage
- Implemented sample data for alerts and navigation points
- Created functions for adding, updating, and removing data

Challenges Faced

During development, I encountered several challenges:

Map Centering: Initially, the map would default to a general campus view. I solved this by setting specific coordinates for the Johnson Center and adjusting the zoom level for optimal viewing.
Class Schedule Organization: Implementing chronological ordering of classes required careful state management and sorting algorithms to ensure classes appeared in the correct order by day and time.
Port Conflicts: When running the application, I faced issues with ports already in use. This required learning about process management and how to properly start and stop development servers.
ESLint Warnings: The codebase had several unused variables and imports that needed to be addressed. While these didn't affect functionality, they required cleanup for better code quality.
PowerShell Command Syntax: Working in Windows PowerShell required adapting command syntax, as the && operator wasn't supported in the version being used. This led to using alternative methods for running multiple commands.