From a product launch to a place to study
I developed the front-end for Michela Ensina's Modo Fluente, connecting a public marketing and sales site with an authenticated application for accessing purchased learning materials. This freelance engagement began in May 2026, with the initial delivery completed in July.
My scope covered front-end architecture, reusable components, API integration, responsive layouts and publication of both web applications. I worked with Marco Ryan, who developed the Laravel API and the server-side purchasing, storage and authorization flows. I adapted the interface to the brand identity and content provided and approved by Michela.
Two applications, different needs
I organized the front-end as an npm-workspaces monorepo with two Next.js App Router applications, each deployed independently on Vercel.
The marketing application needed room for the offer, product mockups, editorial sections and contextual calls to action. The student application needed predictable navigation, a material library, reading tools and clear states for repeated use. Separating them let me shape each experience without forcing both into the same layout or release cycle.
Both consume the same REST API. The student interface presents the access and material availability returned by the server; purchase eligibility and authorization remain part of the backend contract.
Supporting the launch
I implemented the sales landing page, the teacher's About page and the pre-launch and post-launch presentation states. The commercial journey includes the guide, supporting materials, weekly planner and links to the external Hotmart checkout.
For the waiting list, I built a Next.js server-side endpoint between the form and the Laravel API. It validates and normalizes submissions, translates duplicate registrations and service failures into useful feedback, and integrates a confirmation email through Resend when enabled. Launch configuration switches the public experience from collecting interest to directing visitors to purchase.
An authenticated learning interface
I built the login, first-access, password recovery and session flows, with a shared API client and session layer. Inside the application, a responsive shell connects the dashboard, library, progress and account settings. Semantic theme tokens support dark and light interfaces, while mobile navigation keeps the main study tasks within reach.
The dashboard brings together study progress, recent materials and a continuation point. Library filters help students find material by type and completion state. Completing or reopening a material updates progress through the API.
For PDFs, I implemented an in-platform reader with PDF.js, canvas rendering adapted to the available width and pixel density, loading and error states, and resource cleanup. I kept primary reading and supporting-file downloads as separate flows, following permissions returned by the API. Material pages also support embedded video and complementary attachments.
Maintaining the material library
I implemented the administrative interface for listing, creating and editing materials, file uploads, deletion confirmation and product associations. The forms connect metadata, publication settings and attachment download controls to the existing API, with feedback for loading, validation and failed operations.
The initial delivery brought the commercial site and student experience into production. Iteration with Michela shaped the layouts, contrast, component hierarchy and mobile behavior throughout the engagement.
