Project Info

Client:Folkative
Duration:1 month
Technologies
Next.js
TypeScript
PostgreSQL
Prisma
Tailwind CSS
CI/CD

Table of Contents

Folkative Personality Platform

Project.XO is a production-ready personality test experience for Folkative that guides users through dynamic quiz flows and delivers tailored persona insights powered by a typed Next.js + PostgreSQL stack.

Folkative Personality Platform - Image 1

The Challenge

Folkative needed to replace a slow, spreadsheet-driven prototype with a scalable quiz engine that could withstand launch-day traffic and a marketing site that did justice to the brand story. The legacy flow produced 500ms+ response spikes, frequently dropped connections during persona scoring, lacked responsive layouts, and gave the marketing team no reliable way to iterate on question sets or hero content without involving engineers.

Our Solution

We rebuilt the platform on Next.js App Router with an optimized scoring API backed by PostgreSQL. I profiled every API route, rewrote the quiz evaluator to use pre-computed scoring matrices, and reduced cross-network hops by moving heavy transforms into server actions. On the front-of-house, I translated the Figma system into a performant hero landing page and interactive quiz UI complete with staged animations, stateful progress indicators, and responsive layouts tuned for mobile-first launches. The result was a 34% faster median response time in kernel benchmarks, plus a modular configuration system that let the client ship new archetypes and marketing narratives without redeploying code.

My Role

Served as full-stack engineer owning both the product-facing UI and backend performance. I implemented the hero landing page and interactive quiz flows while also managing the data model, API layer, and release pipeline to align sprint goals with design and strategy.

Key Contributions

  • Designed the quiz scoring algorithm and caching strategy that cut API response time by 34% in kernel test suites.
  • Modeled the PostgreSQL schema using Prisma, enabling non-engineers to configure question sets, archetypes, and scoring weights through CMS forms.
  • Implemented GitHub Actions CI gates (lint, type-check, integration tests) feeding into Vercel preview deployments for rapid stakeholder feedback.
  • Facilitated sprint planning and daily stand-ups for our three-person squad, aligning delivery targets with the client’s launch milestone.
  • Led the UI implementation for the marketing hero landing experience and the interactive quiz page, ensuring the visual system translated cleanly into performant components.

Technical Highlights

  • Next.js App Router with server actions for low-latency quiz submissions.
  • Framer Motion-driven hero and quiz UI with reusable atoms/molecules wired to CMS content.
  • Type-safe Prisma ORM layer on PostgreSQL with tuned indexes for scoring lookups.
  • Tailwind CSS component library shared with the marketing landing pages.
  • Feature-flagged rollout system that let us ship revised archetypes without downtime.

Challenges & Learnings

Balancing marketing storytelling with strict performance budgets required close collaboration between engineering and brand stakeholders. We introduced tooling that surfaced latency metrics alongside component previews so design iterations always considered backend impact, and I built storybook-like sandboxes to validate complex hero/quiz interactions before wiring them into production data.

Future Improvements

  • Add an insights dashboard so the client can segment results by campaign channel in real time.
  • Introduce experiment frameworks (e.g., percentage-based exposure) for new archetype rollouts.
  • Extend automated regression tests to cover multi-language quiz flows.

Tech Stack

frontend

Next.js 14, TypeScript, Tailwind CSS, Framer Motion

backend

Next.js server actions, REST endpoints, Node.js 20

database

PostgreSQL with Prisma ORM and connection pooling

infrastructure

Vercel for hosting, GitHub Actions CI/CD, Railway staging database

testing

Jest integration tests, Playwright smoke checks, kernel benchmarks for performance

Team

3 team members:

  • Full-stack engineer & performance lead (me)
  • Product designer handling quiz flows and visual system
  • Frontend engineer focused on marketing site integration