AndYou — Headless E-commerce Platform
Client Project (Philippines)
Problem
The client needed a scalable e-commerce website that could be updated frequently without developer involvement. Static pages or hardcoded UI would slow down content updates, marketing campaigns, and category expansion. The platform also needed to support multiple healthcare verticals under a single brand while maintaining consistency and flexibility.
Solution
Built a headless frontend using Next.js and Tailwind CSS where all content — including page sections, text, buttons, banners, and layouts — is driven entirely by CMS and backend data. Implemented dynamic Product Listing Pages (PLP) and Product Detail Pages (PDP) for Hair Loss, Weight Loss, and Sexual Health categories. Static pages such as About Us and informational sections are fully CMS-managed, enabling the client team to update content without code changes.
Key Features
- • Fully Dynamic Headless Frontend (No Hardcoded Content)
- • Product Listing Pages (PLP) for Multiple Health Categories
- • Product Detail Pages (PDP) with CMS-driven Content
- • CMS-Managed Static Pages (About, Informational Pages)
- • Reusable Component-Driven Architecture
Architecture
The frontend is built with Next.js and Tailwind CSS, consuming data from a headless backend architecture. Product data and commerce logic are served from the backend, while page structure and UI content are managed via Strapi CMS. The application renders pages dynamically based on CMS-defined components, allowing content editors to control layouts, CTAs, and messaging. This decoupled setup ensures high flexibility, faster iteration, and clear separation between content and code.
System Components
- • Frontend: Next.js with Tailwind CSS for a component-driven, responsive UI
- • CMS Layer: Strapi CMS for managing page content, sections, buttons, and text
- • E-commerce Backend: Headless backend (via Medusa / commerce APIs) for product and pricing data
- • Dynamic Rendering: Pages assembled at runtime using CMS-defined components
- • Client Communication Flow: Continuous iteration based on real client feedback
Tech Stack
Impact & Learnings
This project marked my first real client-facing production build and significantly shaped my confidence as a frontend engineer. Working directly with a Philippines-based international client helped me understand real-world requirements, feedback cycles, and production expectations. Building a fully CMS-driven system where every button, text, and page section is dynamic taught me the power of headless architecture and content-driven development. By the end of the project, I was confident in Next.js and Tailwind CSS, understood how CMS works and how to build reusable components in Strapi, and most importantly, gained confidence in communicating with clients and translating their needs into production-ready code. This project made me realize how everything actually works in a real production environment.