Team 2C // Division 2

Motivation

  • 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
  • Using MongoDB as our backend database
  • Creating SSL infrastructures

What's next for Beacon

  • Deploying & hosting our frontend
  • Grant data access to local authorities
  • User authentication to prevent exploits/loopholes
Share this project:

Updates