Cafcess
An editorial magazine exploring café culture and the stories behind it.
VendorHub, a platform to discover local vendors
Web Development, UI Design
Overview
VendorHub is a location-based web platform for discovering independent vendors, pop-up markets and micro-events near Vancouver. Built with React on the frontend, Node.js and Express on the backend, and MongoDB for data storage. It pulls event listings from Vancouver Open Data and the Google Maps API. The platform also supports three distinct user roles with different levels of access.
Try VendorHub
Core flows
Discovering local events
Without logging in, visitors can browse events near Vancouver in a card or map view.
Filter function
With the filtering function, visitors can find events that match their interests and fit their budget more easily.
Hosting your own event!
Registering as a user unlocks personalized features, including member-specific navigation and the ability to host, edit, or delete your own events. Registered members can also save vendors or events to their Favourites list for easy access later.
Admin Panel
The admin panel gives administrators the authority to manage events and authenticated users, keeping the pages accurate and organized.
Decisions behind the platform
Fetching data
VendorHub sources its listings from the City of Vancouver open data portal, providing users with reliable and trustworthy information.
Card view / Map view
VendorHub offers two ways to browse listings. Card view shows listings in a grid, so users can compare details like category, location and price at a glance. Map view pins every listing on an interactive map with a side panel of event cards. Users can see what's nearby without looking up each address in Google Maps one by one.
Reflection
- Defining the access permissions for authenticated users, unauthenticated users and administrators in advance made the coding process more straightforward.