Vansippy

Happy Hour Finder Web App

A Full-Stack web application designed to help users easily discover and explore happy hour deals across Vancouver. Built using MERN (MongoDB, Express.js, React, and Node.js) , VanSippy offers an intuitive user experience powered by real-time data, interactive map integration, and responsive UI components.

Skills Used

Node ・
Express ・
Axios ・
Mapbox ・
MaterialUI ・

View Site

This app bridges that gap by bringing all those deals together into one sleek, user-friendly map interface, making it easier to plan your night or stumble into a new favorite spot.

The frontend is built with React and styled using Material UI for a clean, responsive interface. The backend uses Express.js and Node.js to handle API requests, while MongoDB stores all venue and deal information. Axios enables real-time data fetching, and Mapbox powers the interactive map and geolocation features.

React – For building a reactive, component-based front-end
Node.js – Back-end runtime for handling API logic
Express.js – Lightweight server framework used with Node.js
Axios – Promise-based HTTP client for making API calls

Together, these technologies create a seamless platform for users to find local deals quickly and visually, making the happy hour hunt both efficient and enjoyable.

The app uses the browser’s Geolocation API to get the user’s location, sends it to a Node.js backend, and fetches nearby venues from MongoDB using geospatial queries. Results are shown in real time on a React interface with Mapbox.

Mobile version

This design achieves pixel-perfect responsiveness using Material UI and custom breakpoints, ensuring a seamless and flexible layout across devices. The grid system adapts content for different screen sizes, while images scale without distortion.

Menu Component

This Menu component is a part of the restaurant card, allowing users to toggle between the drinks and food menu sections. It uses conditional rendering to highlight the active section and disables inactive options based on the selected menu state.

Vansippy initially used the Yelp Fusion API to quickly source business data, but strict rate limits, poor image quality, and limited filtering made it difficult to build a reliable, Happy Hour–focused experience.

To solve this, I built a custom Back-End API with Node.js and MongoDB. This gave me full control over the data schema, allowed real-time content updates, using CRUD and eliminated external dependencies. Now, the application supports more accurate, curated listings, improved performance and a flexible foundation for future features like an admin dashboard.