Kapampangan Eats and Roots

Taste the Story. Discover the Roots.

Project Overview

Kapampangan Eats and Roots is a culturally-driven web application designed to preserve and promote the rich culinary and historical heritage of Angeles City and the broader Pampanga region. Developed as an Advanced Dynamic Web Development (6AWEB) project at Holy Angel University, the platform provides a verified directory of local eateries and heritage sites, prioritizing cultural authenticity over commercial visibility.

The application serves as a bridge between tradition and technology, offering a curated discovery experience through interactive mapping, narrative storytelling, and an innovative Authenticity Scoring Framework (ASF).

Key Features

1. Reactive Experience Layer

The platform utilizes a modern reactive architecture for instantaneous user feedback and seamless state management.

• State Intelligence: Utilizes Angular Signals to provide a high-performance, predictable data flow throughout the discovery experience.
• Dynamic View Portals: Features a context-aware system for immediate content rendering and verified data integrity across all device types.

2. Authenticity Scoring Framework (ASF)

A unique verification system where administrators score establishments based on cultural indicators:

• Historical Continuity (25%)
• Cultural Authenticity (30%)
• Community Relevance (20%)
• Heritage Documentation (15%)
• Digital Narrative Quality (10%)

3. Interactive Heritage Map

• Geospatial Discovery: A custom-styled Leaflet map allows users to explore the city's landmarks and hidden gems.
• Real-time Interaction: Filtering between "Local Eateries" and "Heritage Sites" with instant UI updates.

4. Vendor Storytelling

• Narrative Profiles: Each vendor has a dedicated page featuring their founding story, family history, and signature dishes.
• Cultural Documentation: Integrated high-resolution galleries and specific historical annotations.

5. Community Engagement

• Discovery Tools: Users can save favorite spots, mark places as visited, and write cultural reviews.
• Submission Portal: A secure portal for community members to suggest new eateries or heritage sites for verification.

6. Administrative Dashboard

A robust management suite for platform curators to:

• Verify and score new submissions.
• Manage existing content and media.
• Track engagement analytics and trending cultural spots.

Technology Stack

Frontend

• Core: Angular 18 (Standalone Components)
• State Management: Angular Signals
• Styling: Vanilla CSS with Tailwind CSS for layout
• Mapping: Leaflet.js
• Icons: Lucide Angular
• Platform: Web Application (Service Worker and Performance API)

Backend

• Runtime: Node.js (Express.js)
• Database: MongoDB Atlas (NoSQL)
• File Storage: Cloudinary (Cloud-based media management)
• Security: JSON Web Tokens (JWT) and Bcrypt.js for encrypted authentication

System Architecture

The platform follows a decoupled client-server architecture:

• Frontend: Hosted on Vercel, providing optimized static delivery and routing.
• Backend: Hosted on Render, managing business logic and the ASF algorithm.
• Database: Managed by MongoDB Atlas, ensuring global data availability and geospatial support.

Installation and Setup

Prerequisites

• Node.js (v18 or higher)
• Angular CLI
• MongoDB Atlas Account
• Cloudinary Account

Backend Setup

1. Navigate to the backend directory.
2. Install dependencies: npm install.
3. Create a .env file with the following variables:
   • MONGODB_URI
   • JWT_SECRET
   • CLOUDINARY_CLOUD_NAME, API_KEY, API_SECRET
4. Start the server: node server.js.

Frontend Setup

1. Navigate to the frontend directory.
2. Install dependencies: npm install.
3. Configure environment.ts with your backend API URL.
4. Run locally: ng serve.
5. Build for production: ng build --configuration=production.

Development Team (Team LokalLens)

• Aguiluz, Josh Andrei: Full-Stack Development & Backend Integration
• Camus, Mark Dave: Frontend Developer (UI & Angular Implementation)
• Velasquez, Gabrielle Ainshley: Full-Stack Development, UI/UX Design & Architecture
• Yamaguchi, Mikaella: Frontend Developer & Digital Researcher

Recognition

This project was developed in partial fulfillment of the requirements for the course Advanced Dynamic Web Development (6AWEB) at Holy Angel University, School of Computing.