PWA Designed and Built in React, TypeScript, and Framer Motion

Prayer Companion is a Bible-focused mobile web app where users explore spiritual topics through curated articles and videos. The visual direction draws from ancient manuscripts: parchment tones, warm brown ink, hand-drawn illustrations, and serif typography. Designed from scratch in Figma and built end to end in React 18 with TypeScript, Tailwind CSS v4, and Framer Motion, then shipped as a Progressive Web App on Vercel.

🔗 prayer-companion-neon.vercel.app

Design was done in Pencil, a tool that runs inside VS Code as .pen files. With design and code living in the same editor, components could be built directly against the design frames with no export or handoff step in between. All visual assets, paper-textured backgrounds, sketch-style thumbnail illustrations, and stroke-like images were created in Figma and imported into VS Code.

Every screen was designed before a line of code was written. Visual references were gathered from Mobbin and annotated with specific observations about spacing, hierarchy, and tone, so the translation from reference to design was intentional rather than approximate. The first pass on the dashboard established the core aesthetic decisions: parchment background, manuscript-weight serif for headings, warm red accent for interactive states, and hand-drawn thumbnails for article cards.

With all four screens complete, a structured audit of the design files produced 40 design tokens: 9 colors, 11 typography styles, 10 spacing values, 5 icon sizes, and 5 corner radii. These were extracted as structured JSON and wired into the codebase through a bidirectional token pipeline using Tokens Studio, Style Dictionary, and GitHub Actions. A token change in Figma reaches the live site in under 3 minutes, and a change in code syncs back the same way.

For a project with a manuscript aesthetic, where every tone and spacing decision carries visual weight, having a live sync between design and production means inconsistencies surface immediately rather than silently.

Screen transitions use card-stack swipes, page slides, and staggered list entrances via Framer Motion. Haptic feedback fires on key interactions. The animation system was built as a set of reusable spring presets and gesture recipes so the same timing logic applies consistently across every transition in the app.

The approach to debugging was consistent throughout: isolate the broken state, trace it to the specific prop or timing value causing it, fix at the source. Every broken state was documented and added to the animation reference.

The app was configured as a Progressive Web App so users can open a link, add it to their home screen, and use it like a native app without going through an App Store.

The first deployment shipped 40MB of images. All illustrations and thumbnails were converted to WebP and compressed with Sharp, bringing the total build from 40MB to 751KB. Typography was also debugged at small viewport sizes before shipping, correcting hierarchy issues that only appeared below 375px. Designing at a comfortable viewport and scaling down caused the hierarchy to break at small sizes; the lesson was to start at the smallest screen and scale up.

Building a product that needs the design and the code to both be considered? Let's talk.