This is a simple, mobile-first product discovery experience built as a coding test for the Bella Otér Software Intern position. It simulates the first step of the Raven Body Profile by asking:
“What does your body crave today?”
Users choose from four moods — Grounding, Softness, Energy, or Freedom — and are shown a matching product suggestion.
- React.js
- TailwindCSS
- Google Fonts (Playfair Display, Inter)
- Vanilla SVG Icon
- LocalStorage for saving mood choice
- Responsive, mobile-first layout
- Smooth flow from question to product result
- Custom archetype and product details for each mood
- Soft color palette and elegant type for Bella Otér’s vibe
- “Start Over” functionality
- Bonus: Saves last mood in localStorage and shows a “Welcome back” message on reload
- Add simple page transitions using Tailwind or CSS
- Add hover or click animations for buttons and cards
- Display basic placeholder images for each mood
- Improve text readability and spacing on smaller screens
- Store more than one mood entry in localStorage for a basic history feature
I worked on this project over a few days in short focused sessions, totaling around 6–8 hours. Since I’m still learning React, I used this opportunity to understand component structure, state handling, and basic routing while building the experience. I took my time to make sure the flow, mood logic, and mobile styling felt aligned with Bella Otér’s tone.
git clone git@github.com:toxidity-18/BellaOterInterTest.git
cd bella-oter-test
npm install
npm run dev