FragraMap is a modern web app for discovering and managing fragrances. It was built to solve the challenge of keeping track of fragrance testing, preferences, and collections in a structured and accessible way—something fragrance enthusiasts often do manually.
Users can search fragrances via an integrated API, save them to their personal collection with notes and ratings, and track their testing progress over time.
To use it: simply sign up or log in, search for a fragrance, and start building your collection. The app runs on React (Vite) + Firebase, with TailwindCSS for styling and Framer Motion for smooth animations.
Live Demo → https://fragramap.web.app
- Frontend: React (Vite), React Router, TailwindCSS, Framer Motion, MUI, Day.js
- Backend: Firebase (Auth, Firestore, Functions, Hosting)
- CI/CD: GitHub Actions → Firebase Hosting
- 🔎 Search fragrances via server-side API integration
- 💾 Save fragrances to a personal collection with notes & ratings
- 📝 View fragrance details (notes, accords, longevity, sillage)
- 🧪 Track testing progress and discover your own fragrance preferences
src/
components/ # Reusable UI (Button, NavBar, Modals)
context/ # Auth provider
features/ # Feature modules (auth, search)
pages/ # Route-level pages
services/ # Firestore/API services
firebase/ # Firebase init
assets/ # Static assets
Requirements: Node.js 18+, Firebase CLI
# install dependencies
npm install
# run frontend locally
npm run dev
# run Firebase emulators (Firestore + Functions)
firebase emulators:start