Reviewly

Reviewly is a civil service exam preparation platform built for learners in the Philippines. Students browse structured reviewers, start timed mock and practice exams, pause and resume attempts, submit for grading, review their answers, and receive AI-generated feedback on their performance. A personal library lets users save reviewers for repeated study, and subscription tiers control access to premium content.

The client was a Philippines-based designer who had the complete product vision and full Figma design files ready. Her hesitation was not the concept — it was the developer. She had seen good designs get handed to developers and come back unrecognizable. Before committing the full project, she needed evidence that the code would match the design.

Cenciss offered a free one-page build — any page she chose — so she could evaluate visual fidelity to Figma, responsiveness, performance, and communication quality before making a hiring decision. The delivered page met the standard. She hired Cenciss for the full platform, and the complete website shipped in 15 to 20 days. Shortly after launch, the platform reached approximately 6,000 users.

Cenciss handled all development: Figma-to-code implementation across every page, backend API, admin panel, third-party integrations, background jobs, and deployment.

Figma-to-code fidelity was the condition under which the project was awarded. The client was a designer and would notice every deviation: spacing inconsistencies, font rendering differences, component states that did not match the spec, or responsive breakpoints that broke the layout. Delivering a production build that held up against the Figma source at every viewport size, without sacrificing performance, required disciplined implementation rather than approximate interpretation of the designs.

The exam engine was the most complex piece of the application. A timed exam session had to persist answer selections across navigation, support pausing mid-attempt with timer state preserved, resume exactly where the student left off, and submit correctly when the timer expired or the student ended the session manually. Grading had to run against the stored attempt, and the review flow had to surface each question alongside the student's answer, the correct answer, and explanatory context. Any state management failure — lost answers, corrupted timer state, incorrect scoring — would directly damage the core product experience.

Multiple exam types with differentiated access rules added a layer of business logic on top of the engine. Mock, practice, and demo exams had different session rules and content scopes. Free and premium subscription tiers controlled which reviewers a user could access, and access checks had to be enforced at the API level on every attempt start, not just surfaced in the UI.

AI-generated feedback via Gemini had to add genuine value to the post-exam experience without degrading it. Inserting an AI generation step at submission meant the results screen could not be instant. The integration had to produce structured, useful output — strengths, areas for improvement, summary, and recommended next steps — while keeping the UX acceptable for a student who had just finished a timed exam and wanted to see their results.

Question content was managed in Google Sheets, not in the database directly. A scheduled sync job had to pull questions from the sheet on a reliable interval, reconcile them with what was already in MongoDB, and keep the question bank current without requiring the client to touch the database or redeploy the backend. Any drift between the sheet and the database would result in outdated exam content being served to students.

The frontend was built in React 19 with Tailwind CSS, implementing the designer-provided Figma files into a production-ready web application across public pages — Home, Pricing, FAQ, Contact, Legal — and protected dashboard sections including Reviewers, My Library, Account Settings, Help Center, Exam Details, Exam Session, Results, and Review. A clean API layer abstracted all backend communication, and analytics tracking was integrated via PostHog for product event capture and GA4 for marketing attribution. The Figma implementation was treated as a precision requirement, not a reference, with each component built against the design spec and validated at multiple breakpoints.

The exam engine was built around an Attempt model in MongoDB that stored question order, answer selections, timer state, attempt status, and result summaries. Session endpoints handled attempt creation, incremental answer saves, pause and resume with timer persistence, and final submission with grading. The review endpoint returned the full attempt with correct answers and supporting content. Gemini AI analysis ran on submission, generating a structured result object with strengths, improvements, a summary, and recommended next steps, which was stored against the attempt and surfaced on the results screen without blocking the submission response.

Google OAuth was integrated supporting both id-token and auth-code flows, issuing JWT sessions on successful authentication. Protected API routes enforced subscription access rules at the attempt level, with reviewer access checks running server-side on every exam start request.

Background question sync was implemented using Agenda as a scheduled job runner. The sync job pulled rows from Google Sheets on a 12-hour interval, reconciled them against the MongoDB question collection, and applied updates without manual database intervention. The same Google Sheets integration handled the support workflow: form submissions were appended to a designated sheet and triggered an email notification via Mailtrap, giving the client a simple audit trail for incoming help requests.

The React 19 admin panel provided secure admin authentication with protected routing, user listing with CRUD controls, and access management for subscription tiers and user accounts.