Inspiration
Have you ever had the feeling of needing to go to the bathroom but have no idea where the closest bathroom is? Searching up any basic needs like bathrooms or water or garbage cans do not show up accurately on things like google maps. There are specific maps where public bathrooms are or where all the benson bubblers in Portland are. However, no centralized map for all of these things in one. Additionally if you are a tourist or simply do not know the area simple information like this can be extremely helpful.
What it does
Displays bathrooms, garbage cans, and water fountains on a map. You can add pins, edit pins, or even delete pins to help the community. Additionally, there is a filter feature to help filter out the type of need or level of cleanliness.
How we built it
We used the openstreetmap api as our maps, and used Angular.js and bootstrap to create a responsive and functional program. The map is continuously listening for a DOM click so that the user can easily click onto the map to create a pin. The pins are also clickable with the built in popup function of the markers, so that user can see more information about the pin and are able to edit/delete it.
Challenges we ran into
The basic idea of the MVP was straight forward and there were no conceptually hard things about the project, however, this was the first time I used bootstrap and Angular, so learning the framework and its keywords was extremely challenging. When implementing the create, edit, delete functionality of the pins I kept running into the issue where the pins would not update or would not update correctly. I learned that I needed to re-render the pins every time using the signal keyword with Angular.
Accomplishments that we're proud of
I am proud of producing an MVP of a program with a new framework that I had no experience in. I am also proud that the program thinks of the user first in development. Our first iteration of the project was that we would have a button for the create/edit/delete for the pins, but we realized halfway through that it would be easier and more natural for the user to simply interact with the pins.
What we learned
I learned a lot about bootstrap and Angular.js. Angular forced me to remember OOP and its keywords specifically for javascript. While bootstrap had me interpret CSS in a different ways by sectioning out the screen rather than using flex boxes. I also learned about openstreetmaps api. I learned the basics of rending the map out and also how to add and use markers for the map. I strengthened my skills in chrome's developer tools. When looking for some fun free APIs to help strengthen my project I went to sites that I know to examine what APIs the websites were using. It made me use the chrome developer tools, specifically network to search through and find the right requests.
What's next for Basic Needs
I see Basic Needs making three more key improvements. First is that the program can proactively create pins based on 911 calls. This would place a caution pin on the map so that people will see which areas may have disturbances. Second I think that the pins could have a lot more information, for example an image, additional info, hours, ADA, permissions. The permissions could be for example PSU, where a PSU student could of course access a building in PSU to use the bathroom or water fountain but not an outsider. All of this could be stored on a database so that all the data could be saved. The third is to add different types of pins by asking people in Portland what they need/ want on the map. I am one person with one view that is building an app for everyone in Portland, so we would need to do some user research to add what the people want to the map.
Log in or sign up for Devpost to join the conversation.