URHungry

• 

  Website logo

• 

  Map pin

• 

  Hand drawn map

Inspiration

One of our members pointed out the relationship that many students may have with the city of Rochester and how they may not have much exposure with the city. For us personally, we believe that lots of connections and great memories are made through food. We decided to create a website to showcase the vast and various restaurants located in the city of Rochester, focusing on establishments owned by people of color in order to uplift the community we live in.

What it does

This website is in a map format with pins (flower shaped in homage to the Flower City) for each restaurant and where they are roughly located. When you click on a pin, it shows the name of the restaurant, address, contact details, and website/social media. It is meant to be a hub for information, not a directional map.

How we built it

The languages we used to build the website were HTML, CSS, and Javascript.

The website uses a simple HTML interface design and incorporates a hand drawn map with interactive elements animated and styled through Javascript and CSS respectively. There is a filter button that when implemented, can filter out some of the map elements to show only the relevant ones to the user. This "interactive map" was inspired by the Google Maps API, however it was made from scratch and just mimics the toggle pin function that the latter has.

The UI & UX design of the page is a mix of digital and hand drawn graphics made from scratch.

Challenges we ran into

We did a lot of trial and error for various parts of the coding process. For instance, figuring out the placement and size of the pins and maps. One thing we still have not quite figured out is how to reduce the length of the page as there is a lot of scrolling space underneath the map. There is a filter option that will become more useful as the different restaurants are added, but since there are only two on the actual site so far there is not much to filter.

Accomplishments that we're proud of

First off, one of our members did an amazing job drawing out the map of Rochester, NY and designing the pins that would go on top. We are very proud of the way the website looks and how it could possibly evolve in the future. All of us on the team have limited coding experience so it was a fulfilling process to start essentially from scratch and learn so much about website development. We were excited about every thing that we were able to get done, from compiling information to all the restaurants to figuring out how to make the pop-up modal on our website bounce.

What we learned

From developing this website, we learned the foundations of web design. We also learned how valuable it was to have such a multidisciplinary and diverse group to work with. Everyone brought something different to the table and had their own specialization. We were also able to collaborate and try skills from each person's role.

What's next for URHungry

The next step for URHungry is to now add all our other 60+ remaining restaurants. We want to make the interface and user experience more efficient. We also would like to add images to our restaurant descriptions.

Built With

• css
• html
• javascript