TAN PHAM
developingdesigning
Full-stack application// 2019

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.

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.

Web Application

Australia Job Platform Startup

Built core functionalities for Getahead, a Tinder-style job marketplace designed for the Australian market, using React and Next.js to deliver a fast, intuitive, and mobile-friendly user experience. Translated product concepts and Figma designs into clean, reusable interface components and interactive swipe-based job discovery flows. Implemented scalable frontend architecture, optimized performance, and collaborated closely with design to ensure a polished, engaging user journey.

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.