Cityscope Monitor

Inspiration:

We have plenty of navigation apps, however we don't have one that tailors to pedestrians and people with accessibility needs. This is why we created Cityscape Monitor to allow people to navigate around the city safely.

What it does:

Imagine navigating the city with the confidence that you'll never unexpectedly hit a dead end again. Our web application, powered by SvelteKit, is the ultimate urban companion, designed to help users detect and navigate around everyday road hazards. With Google's Firebase securing user data and Auth0 ensuring a secure login experience, our app prioritizes users experience on the web application while maintaining data security. From elevators and ramps to unexpected stairs and areas with limited wheelchair access, our solution identifies and reports various city impediments in real-time. Plus, with our community-driven review system, users contribute to a live map of accessible routes and obstacle-laden areas, making city navigation a collective effort. By harnessing HTML and CSS, we’ve crafted an intuitive user interface that’s as beautiful as it is functional.

How we built it:

Our website was crafted with SvelteKit for a seamless front-end experience, paired with Firebase Firestore for robust database operations. We implemented Leaflet and OpenStreetMap for comprehensive mapping capabilities, enriched by the Google Places API for precise storage and retrieval of coordinates and addresses. User authentication is securely managed via OAuth, ensuring data protection and privacy. Additionally, the site's aesthetic and responsive design was achieved using Tachyons CSS, allowing for a visually appealing and user-friendly interface.

Challenges we ran into:

At first, some of our teammates did not know how to program in Svelte so we had to spend some time learning and getting familiar with the programming language. Then, we had divide the work among ourselves so that each of us had the opportunity to not only learning the new materials but also make useful contributions to our final product. We also faced some technical issues related to APIs and GitHub collaboration in which we had to test and re-deploy our web application multiple times - for APIs - and resolve merge conflicts in master branch - for GitHub - to make sure that our final product works the way we want it to.

Accomplishments that we're proud of:

We've successfully merged the front-end and back-end technologies with the OpenStreetMap and Leaflet api, providing a tool that helps users identify and avoid physical obstacles in urban environments, fostering independence and confidence in their daily commutes.

What we learned:

We learned how to collaborate with each other via communication and helping each other out when anyone is needed. We also learned how to turn our abstract ideas into concrete implementations by teaching ourselves how to use software/servers that we had never used before. We also went further and beyond our comfort zone to collaborate with people we've never met using the languages we never knew before.

What's next for Cityscope Monitor:

Moving forward, we're enhancing our platform with a sleek, user-friendly interface and broader obstacle detection to ensure seamless navigation. We'll also fine-tune our location-based data for tailored user experiences and roll out new features to keep our community engaged. This direction reflects our commitment to delivering a top-tier navigation tool that consistently adapts to our users' needs.

Built With

• css
• firebase
• google-places
• leaflet.js
• oauth
• openstreetmap
• sveltekit
• tachyons