Since the theme is to improve accessibility to various urban resources, we turned our focus to making an application that creates more inclusive and accessible urban environments for all, regardless of their physical aptitude. Many parts of urban areas can be difficult to navigate for people with physical disabilities, and these issues are often thrown under the radar and go unnoticed by the proper authorities.
Implementation
Intent
Our web application provides a platform for users to mark and rate urban locations based on their accessibility features. The intent is to bring attention to these areas and help local authorities prioritize for improvements on areas that are in need of accessibility features.
Functionality
Location Marking
Users can create "beacons", which are markers of urban locations on a map by creating an entry. Each marker entry includes an image, description, and available accessibility features (vision accessible, wheelchair accessible, etc.).
Rating system
Users can upvote or downvote markers contributed by others. An upvote indicates that the location has good accessibility features and is easy to navigate for people with disabilities, while a downvote indicates that the location is lacking in accessibility features and needs improvement.
Accessibility features
Each marker entry allows users to specify the accessibility features present at the location, displayed as checkmarks. This makes it easy for users to identify locations that are accessible/inaccessible.
Data collection
The data collected by the application is intended to be used by local authorities to identify and prioritize areas that need accessibility improvements. Authorities are able to focus on the worst rated urban locations and allocate resources to make improvements to urban infrastructure.
Development & Tech Stacks
Frontend Tech Stacks
NEXT.js
Tailwind CSS
Shadcn UI
Google Maps Platform GUI
Backend Tech Stacks
Flask (Prototyping)
Node.js (Production)
Express.js (Production)
MongoDB
Challenges we ran into
We had some issues with converting image formats between the frontend and backend using the base64 encoding standard. We had to make workarounds to sending the image data to the backend servers once a user submits a report entry.
Making sure that the data fields for each entry complied with the uniform data types specified by the database was a problem we had to resolve in order to make successful data insertions and fetches within our db.
To host our application, we also ran into the problem of using Cloudflare to host our application. However, we eventually had to create our own SSL infrastructure due to Cloudflare pricing issues.
Accomplishments that we're proud of
Learned and successfully implemented a frontend with NEXT.js
Aesthetically pleasing frontend visual effects
Successfully hosted a backend on a virtual private server with Docker and auto deployment for the first time
What we learned
Using NEXT.js as our web framework
Embedding interactable components (Google Maps) into our frontend
Log in or sign up for Devpost to join the conversation.