Case study / PERSONAL PROJECT

Interactive Gift Engine.

A reusable frontend for assembling chapter-based interactive greeting experiences through configuration, shared components and visual themes.

All Projects →
Project context

PERSONAL PROJECT

Technologies

React · JavaScript · Vite · Tailwind CSS · CSS · Framer Motion

Interactive Gift Engine fictional Monthsary demo introduction
Fictional demo · Monthsary introduction with sample name and date.

In the application

These captures show a fictional preset from a local demo; names, dates, and artwork are sample content. The captured demo may differ from the referenced case-study revision.

Fictional demo milestone chapter showing sample progress
Fictional demo · Configurable milestone chapter; the number is sample content.
Fictional demo memory chapter using abstract artwork and sample text
Fictional demo · Memory chapter with abstract demo artwork and sample text.

01 / Purpose

The problem

Interactive greeting experiences need reusable presentation and progression without duplicating the application for every occasion.

02 / People

Role & context

My Git account records the engine foundation, configurable chapter components, theme variants and desktop layout improvements. This identifies recorded development work without claiming exclusive manual authorship or independently verified testing.

Personal project. No academic team is represented; commit history alone does not establish the absence of adaptations or other assistance.

Developed with ChatGPT and Codex assistance for planning, implementation and review. Exact generated-code episodes, human modifications and testing responsibility are not inferred from commit metadata.

03 / The work

What it does

  • Eleven configurable chapter modules with progress and replay
  • Shared components and four token-based themes
  • Gallery, envelope, quiz, letter, cake and final-reveal interactions
  • Optional audio handling and image-error placeholders
  • Responsive CSS with mobile adaptations and desktop scrolling adjustments

04 / Implementation

How it works

A React controller normalizes local configuration, selects ordered chapters and manages replay and optional audio. Shared chapter components consume content and theme tokens; Vite provides the frontend build architecture.

The committed engine contains reusable chapter, configuration, theme and responsive-layout implementations. Fictional demo screenshots illustrate the interface and may differ from the referenced revision.

05 / Evidence

Testing & limitations

The repository contains lint/build scripts and a manual QA checklist. No tracked automated test suite or QA-results report was identified in the read-only review. No build, browser acceptance, accessibility score or successful delivery is claimed.

Configuration normalization is partial; invalid quiz settings can block progression. Lightbox focus trapping, chapter focus announcements and reduced-motion coverage are incomplete. Original gift media and music have not been cleared for portfolio reuse. The local captures use a fictional preset and abstract artwork; no real recipient photos, messages, audio or datasets are included here.

Next project

Job Market Radar
Get in touch ↗