Project Overview

Night Crusade Titans is an Angular-based web application designed to report and manage public nuisances in the Lower Mainland. With a vibrant superhero theme, the app encourages users to participate in keeping their community safe by reporting disturbances. The app integrates a map and data list view, allowing for easy tracking and management of incidents in real time.

Objective and Vision

The aims to simplify the process of reporting public nuisances, ensuring community members have an easy-to-use tool for filing reports. Night Crusade Titans provides a seamless experience for users and administrators, combining aesthetics with functionality.

The superhero theme was chosen to make the process engaging and to encourage community involvement. It transforms an otherwise routine task into a collaborative effort, making users feel like they are part of a heroic team fighting for public safety.

Tools and Technologies

Night Crusade Titans leverages the following technologies:

• Angular: The core framework for building the single-page web application.
• Firebase: Used for database services, storing nuisance reports and managing user authentication.
• Bootstrap: Provides responsive design elements to ensure the app works smoothly on various devices.
• Leaflet: Handles the map integration, displaying nuisance reports on an interactive map with markers.

Key Features

Map Display

The map shows all reported nuisances, with markers for each location. Users can interact with these markers to view the number of reports for each location, making it easy to visualise problem areas in the community.

Data List

The Data List provides a sortable table of all nuisance reports. Users can filter and sort the reports based on Time, Name, or Location, offering a clear, detailed overview of all incidents.

Report Management and Creation

The report management system allows users to easily submit new nuisance reports and manage existing ones. Users can create new reports using a user-friendly form accessed via the "CREATE NUISANCE REPORT" button, ensuring a straightforward submission process. For authorised users with the correct passcode ("BaggyJeans"), the system also provides the ability to modify or delete existing reports. This functionality is secured with MD5 hash password verification to ensure that only users with appropriate permissions can make changes to or remove reports. This combined approach streamlines both the creation and management of reports, enhancing the overall user experience and system security.

Challenges Faced and Solutions

Night Crusade Titans was my first project utilising a front-end framework, marking a significant shift from creating static websites to building dynamic, feature-rich applications. Integrating Angular with real-time data updates presented a challenge, especially in managing and displaying a large number of nuisance reports efficiently. I had to learn how to optimise data retrieval to ensure smooth performance, which was a substantial learning curve given my prior experience with static sites.

Additionally, incorporating Firebase as the database services was a new experience. I initially underestimated the complexity of structuring real-time data. Through experimentation and research, I improved my understanding of Firebase’s capabilities and implemented effective solutions for data handling. Due to tight time constraints, I used Bootstrap to simplify the frontend design process.

Takeaways and Insights

Working on Night Crusade Titans was a pivotal moment in my web development journey, marking my transition from static websites to dynamic, interactive applications. This project introduced me to Angular and its powerful features for building single-page applications, fundamentally changing my approach to web development. I gained hands-on experience with real-time data management and learned the importance of optimising performance to handle dynamic content efficiently.

The project also opened my eyes to the value of using frontend libraries like Bootstrap, which I initially underestimated and dismissed for not allowing the designers to add a personal touch to the style. I discovered how such tools can significantly streamline the development process while still offering flexibility for custom design. This experience led me to explore other styling libraries and TypeScript-specific tools. Furthermore, integrating Firebase for the first time provided me with crucial insights into handling backend services and databases in web applications. Overall, this project reinforced my skills in dynamic web development and broadened my understanding of modern web technologies.