Halal Food Directory at WLU MSA
July 7, 2025
As part of the WLU MSA tech team, I had the chance to help build the Halal Food Directory a community resource to make it easier for students to find verified halal food options on and around campus.
This was one of the most rewarding projects I’ve worked on so far. It combined frontend development, database design, and the satisfaction of knowing our work was directly helping people in our community.
🍽 What Is the Halal Food Directory?
At its core, it’s a searchable, filterable directory of restaurants and takeout spots. Everything is organized by cuisine (shawarma, Indo-Chinese, Uyghur, burgers) and clearly tagged to show whether the meat is hand-slaughtered, machine-slaughtered, or not halal.
Each listing includes:
- 📍 Name and location
- 🔗 Website and Google Maps link
- 📖 Short description
- 🏷 Category
- ✅ Slaughter method
We wanted students to have the clarity to make informed choices quickly, especially if they were new to the area.
🔧 What I Worked On
Data Modeling in Supabase
I designed and iterated on the schema for our food listings, working with Supabase enum types and row-level security. It was a great hands-on experience figuring out column types, constraints, and how to safely migrate data when requirements changed.
Building the Filter UI
I implemented dynamic filtering so users could narrow results by cuisine or halal status. Seeing someone find exactly what they needed in a couple of clicks felt like a win.
Component-Based Directory in Next.js
I used Next.js 15 and daisyUI to build modular components like FoodCard and FilterSidebar. Keeping everything clean and reusable was key as the directory grew.
Integrating Payload CMS
We connected Payload CMS so non-technical team members could easily add or update listings. This turned out to be crucial for keeping the directory up to date without developer bottlenecks.
Cleaning and Importing Data
The original data was a pretty messy Excel file. I wrote scripts to clean, validate, and seed it into Supabase, which taught me a lot about turning raw data into something structured and reliable.
🧠 What I Learned
- How to work with Supabase enums, roles, and policies
- Building dynamic filters and query params in Next.js
- Designing interfaces for real users (especially hungry students in a rush)
- Keeping a CMS, frontend, and database in sync
- Optimizing images and SEO for local directories
📷 Screenshot
🔗 Links
🙌 Why This Mattered
This wasn’t just another coding project. It was about making everyday life a little easier for Muslim students who care deeply about what they eat. The directory is now a core part of the MSA site and gets regular updates as new spots open up.
I’m really proud to have contributed to something meaningful and useful. If you’re working on a student club or community project and want to build something similar, feel free to get in touch — I’d love to help.
— Maruf