TruVitality Lead Gen Quiz

An interactive detox quiz built with React.js and Framer Motion

View Live App View Code

TruVitality Lead Gen Quiz is a user-friendly tool for personalized detox recommendations. Designed with React.js and enhanced with animations using Framer Motion, it engages users through a dynamic and interactive experience.

Features:

Step-by-step quiz navigation with animated transitions
Dynamic question rendering based on user input
Custom progress bar tracking quiz completion
Personalized detox recommendations displayed in real-time
Responsive design for a seamless experience across devices

What I Learned:

Working on this project allowed me to deepen my understanding of React’s component-driven architecture and state management. I also expanded my knowledge of Framer Motion for creating smooth animations that enhance user engagement.

Technical Highlights:

Built modular components like Quiz.jsx, QuizQuestion.jsx, and ResultsBlock.jsx for scalability
Used Framer Motion to implement animations for transitions and progress tracking
Managed state dynamically to adapt quiz content to user preferences
Implemented reusable styling and responsive design principles