AbegChop

A hyper-local, high-efficiency campus food directory and order-generation platform.

Description

AbegChop is a 3-page, data-driven web application designed to bridge the gap between campus food vendors and hungry students.

Purpose

The primary purpose of AbegChop is to solve information asymmetry on campus. Students often waste limited time between lectures walking to various canteens only to find their preferred food is sold out or the queue is too long.
By centralizing local vendor menus into a single mobile-optimized interface, the site:

  • Reduces Foot Traffic: Students can check availability before leaving their hostel or classroom.
  • Simplifies Ordering: By generating a clear order summary, it reduces communication errors at noisy canteen counters.
  • Supports Local Vendors: Small campus kiosks that lack the budget for major delivery apps get a professional digital presence to reach more students.

Pages

  • Home
  • Order
  • Join

Features

  • Responsive Design: Fully optimized, mobile-friendly interface with dynamic JS interactivity.
  • Dynamic Menu: Integrated Fetch API to load 15+ meal options from a JSON dataset.
  • Advanced Filtering: Interactive category filters and accessible modals for vendor details.
  • State Persistence: Implemented LocalStorage to allow users to save favorite meals.

Scenarios

  • Bassey, a UNICAL student at Malabor Republic, uses the responsive site on his phone to filter for "Swallow" options and checks prep times to see if he can grab a meal between lectures.
  • Ekong, a hungry student in the library, uses the dynamic menu to find the cheapest "Rice" dishes from 15+ vendors and saves them to his favorites list using LocalStorage for easy access later.
  • Ini, an off-campus student at CRUTECH, explores the interactive UI to view vendor details via the modal dialogs, ensuring she finds a spot near the campus gate that’s currently open.

Color Schema

Primary

Header

Secondary

Buttons

Accent

Cards

Typography

Headings: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto

Body: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto

Wireframe

This is a wireframe of the homepage of my project

wireframe of homepage

Logo

This is the logo I created for AbegChop