Philly Street Food

Inspiration

Philadelphia has a huge street-food culture, from food trucks and carts to pop-ups and roadside vendors. However, finding these businesses can be difficult because they often don't have the same online visibility as traditional restaurants. We wanted to create a simple way for people to discover the street food around them without having to search through multiple social media accounts, websites, or word of mouth. That idea became Philly Street Food — one place to discover Philadelphia's non-restaurant food vendors.

What it does

Philly Street Food is a web application that helps users discover street-food vendors around Philadelphia. Users can:

Search for food based on what they are craving.
Explore vendors using an interactive map.
Browse vendors by cuisine and price.
Save multiple vendors as favorites.
View and interact with vendor reviews.
Add items to an order and order ahead.
Navigate easily between Home, Explore, Order, and Reviews.
See a featured vendor based on their saved favorites. The application also keeps favorites stored in the browser so that a user's saved vendors can appear across different pages.

How we built it

We built Philly Street Food as a front-end web application using:

HTML for the page structure
CSS for the visual design and responsive layouts
JavaScript for search, filtering, favorites, reviews, maps, and ordering functionality
Leaflet for the interactive vendor map
OpenStreetMap for map tiles
LocalStorage to keep favorite vendors and other user selections available across pages
Git and GitHub for collaboration and version control

Challenges we ran into

One of our challenges was creating a favorites system that works across multiple pages. We used LocalStorage so users can save multiple vendors and see their favorites on the Home, Explore, and Reviews pages. The interactive map also required debugging to make sure the map library, vendor locations, and map container worked correctly. Finally, working with multiple teammates and merging our changes through Git required communication, testing, and fixing conflicts to make sure everything worked together.

Accomplishments that we're proud of

We're proud that we turned an initial idea into a working prototype during the hackathon. In particular, we're proud of:

Creating a project that could eventually support real local vendors
Building an interactive vendor discovery experience
Creating search and filtering functionality
Adding an interactive Philadelphia map
Designing a responsive interface
Creating a complete concept from discovery to ordering
Working collaboratively as a three-person team using GitHub Most importantly, we built something that addresses a real discovery problem while keeping the experience simple for users.

What we learned

We learned that building a multi-page application is about more than making individual pages work. The pages also need to communicate and share information consistently. We learned how JavaScript and LocalStorage can help save information between pages, and we gained experience using an external mapping library. Working as a team also taught us more about Git, branches, merges, pull requests, and collaboration. Most importantly, we learned how to turn an idea into a complete user experience rather than just separate features.

What's next for Philly Street Food

There are several ways we could continue developing Philly Street Food. We would like to connect the website to real vendor data instead of relying on sample information, allowing us to provide more accurate locations, menus, hours, availability, and reviews. We are also interested in turning Philly Street Food into a full mobile app with more features and a better user experience. Eventually, we would like to promote the platform to local food vendors so they can create profiles, update their information, and reach more customers.