Ano Pong Ulam? Desktop Interface

Weekly meal planner grid, recipe collections, and social feed aggregating community interactions.

Active Project Case Study PWA

Ano Pong Ulam? Heirloom Recipe Sharing PWA

Filipino heirloom recipe preservation, weekly meal planner grids, and offline draft synchronization.

Next.js 15 (App Router) Tailwind CSS v4 Prisma / PostgreSQL NextAuth.js v5 Service Worker Cache

Live Production Link View Code Repository

Executive Summary

Ano Pong Ulam? is a highly interactive, full-stack Progressive Web App designed as a social recipe-sharing catalog and weekly meal planner focusing on the preservation of Filipino heirloom recipes. Built to solve high mobile data dependency and network drops in the Philippines, the system incorporates comprehensive PWA offline-first structures, local storage synchronizations, and resource optimizations.

It allows users to construct weekly meal plans, draft rich recipe entries with step-by-step guidance without fearing draft loss, and browse a visual community activity feed optimized to group like/review spam into single clean summaries.

Application Interfaces

Ano Pong Ulam Android Mobile App PWA Interface

Mobile Android Interface: Home feed view presenting regional heritage recipes.

Technical Stack Breakdown

Framework: Next.js 15 (App Router)
Styling Library: Tailwind CSS v4
Database Layer: Prisma Client & PostgreSQL (Supabase)
Authentication: NextAuth.js v5 (Google OAuth & Credentials)
File Storage: Supabase Buckets

Key Accomplishments

Custom Service Worker cache logic minimizing layout shifting and static asset payloads by 85%.
Synchronous localStorage cache sync in Multi-Step Wizard guaranteeing zero loss of draft recipes on accidental page closings.
NextAuth session bindings with integrated authorization rules ensuring secure user collections and profile modification rights.

Engineering Architecture Pillars

1. Offline Caching & Service Workers

Implements custom caching strategies within a progressive service worker shell. Core styling libraries, Google Fonts, and static site assets are pre-cached, while recipe details are loaded from background network-first queries. If the user loses network entirely, they are redirected to a friendly, custom offline fallback page while still retaining access to previously loaded recipe cards.

2. Visual Feed Grouping Algorithm

Rather than spamming the social feed with dozens of individual cards representing likes and reviews, the system utilizes a custom server-side aggregator. It groups social signals on the same recipe within a rolling 24-hour window, displaying stacked profile avatars and concise descriptors (e.g. "Ate Marie and 3 others liked this") for a cleaner, premium community interface.

Want to build high-performance PWAs or full-stack platforms?

Let's coordinate to build custom software, offline-first mobile webapps, or high-throughput databases.

Get in Touch →