Building a Halal Food Directory at WLU MSA - Full Stack Development Case Study

TL;DR

Built a searchable halal food directory for university students using Supabase, Payload CMS, and Next.js. Features categorized listings, filtering, and clear halal verification indicators for informed decision-making.

Who This Is For

• Full-stack developers building database-driven apps
• Community organizers creating resource directories
• Anyone interested in mission-driven development

Prerequisites: Basic React/Next.js knowledge, understanding of databases, some SQL experience helpful.

---

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.

-- Example of the database schema
CREATE TYPE slaughter_method AS ENUM ('hand', 'machine', 'not_halal');

CREATE TABLE restaurants (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  description TEXT,
  category TEXT NOT NULL,
  slaughter_method slaughter_method NOT NULL,
  location TEXT,
  website_url TEXT,
  maps_url TEXT,
  created_at TIMESTAMP DEFAULT NOW()
);

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

🔗 Check It Out

🙌 Next Steps

Building your own community directory?

1. Start with Supabase for easy database setup
2. Use Payload CMS for content management
3. Deploy on Vercel for seamless Next.js hosting

Key features to implement:

• User-friendly admin interface for non-technical updates
• Search and filtering capabilities for quick discovery
• Mobile-responsive design for on-the-go access
• Clear categorization and verification systems

Working on a community project? I'd love to help you build something meaningful. Reach out at /contact.

— Maruf