Tan Pham
Case Study

Nutrition and dish builder web application

Developed and maintained the Macrofriendly Food platform using React and Next.js, implementing a scalable frontend architecture with dynamic routing and server-side rendering. Integrated a REST API powered by Strapi to manage application content and connected to WordPress endpoints to fetch orders, nutrition data, and dish information. Built and deployed the full application on DigitalOcean, using Docker and Docker Compose to containerize services and ensure a consistent, reliable production environment. Contributed to improving performance, content workflows, and overall user experience through efficient API design and maintainable, modular UI components.

Year2019
RoleFull-stack application

Strategic Technical Decisions

1. Dual-Headless Architecture (WordPress & Strapi)

  • Decision Rationale: The client required retaining all existing content (1,000+ recipes, user data, orders) stored in the legacy WordPress system. We used an OAuth plugin on WordPress to create secure REST API endpoints, while Strapi was introduced as a modern, centralized hub to manage new application content and orchestrate data requests.
  • Strategic Value Highlighted: Data Continuity & Migration Avoidance: Enabled the rapid launch of the new high-performance platform without requiring a disruptive, large-scale migration of existing user and recipe data.

2. Next.js (Frontend Framework)

  • Decision Rationale: Utilized Next.js for its Server-Side Rendering (SSR) capabilities, crucial for handling and displaying the extremely large database of over 1,000 recipes without performance degradation. This also supports dynamic routing required for personalized dish builder features.
  • Strategic Value Highlighted: Scalable Performance: Achieved rapid load times and a smooth experience for the user base, despite querying a massive volume of recipes and nutrition data.

3. Docker and DigitalOcean (Infrastructure)

  • Decision Rationale: Used Docker and Docker Compose to containerize the entire environment (Next.js frontend, Strapi backend), and deployed on DigitalOcean Droplets.
  • Strategic Value Highlighted: Deployment Reliability: Guaranteed a consistent, isolated, and highly reliable production environment, essential for a successful subscription-based service.

Key Contributions & Project Outcome

  • API & Data Orchestration: Successfully designed and implemented the secure flow between Next.js, the Strapi content API, and the legacy authenticated WordPress endpoints to unify user, order, and recipe data.
  • High-Performance UI: Developed a highly modular and optimized React frontend capable of handling complex nutrition calculations and the large recipe dataset with minimal latency.
  • Automated Deployment: Managed the end-to-end deployment process on DigitalOcean, utilizing Docker Compose to ensure all services (frontend, API) scaled and operated reliably.
  • Business Success: Delivered a fast and robust platform that serves over 1,000 family-friendly recipes and has sustained growth, supporting over 1,000 yearly subscription users.

Similar Projects

Full-stack application

Japan International School

Developed and maintained the Japan International School website using Next.js, Tailwind CSS, and shadcn/ui, delivering a clean, modern, and responsive interface. Built a self-hosted Strapi CMS and deployed the full system using Docker on a VPS with a self-hosted PostgreSQL database. Set up an optimized Nginx web server, implemented automated backup scripts, and performed ongoing maintenance, including system cleanups and performance tuning. Ensured a stable, secure, and scalable infrastructure for both content management and daily site operations.

Therapy website
Web Application

Therapy website

Developed core features for the Find Octave website using React, Gatsby, and Prismic CMS. Implemented scalable component architecture, optimized site performance, and integrated dynamic, content-managed pages through Prismic. Contributed to improving SEO, accessibility, and overall user experience through clean, maintainable front-end code.

Full-stack application

Australia Investment Capital System

Developed the Ausbiz Capital platform using Next.js with a fully content-managed architecture powered by Sanity CMS and Supabase. Implemented data ingestion pipelines to process stock analysis files delivered via FTP as Excel spreadsheets, converting and storing them efficiently in Supabase for fast querying and display. Built modular React components, optimized performance, and ensured a seamless flow between CMS-driven content and dynamic financial data. Contributed to creating a reliable, scalable foundation for real-time investment insights and improved editorial workflows.