Scentopedia

A modern fragrance discovery platform that helps users explore, discover, and find their perfect scent.

Overview

Scentopedia is a full-stack web application designed to make fragrance discovery accessible and enjoyable. Users can browse an extensive collection of fragrances, learn about different aromatic accords, and receive personalized recommendations through an integrated chatbot assistant.

Tech Stack

Frontend

• React 18 with TypeScript
• Vite for build tooling
• TailwindCSS for styling
• React Router for navigation
• Fuse.js for fuzzy search functionality

Backend & Services

• Firebase Authentication
• Firebase Firestore for data management

UI Components

• Material-UI
• Headless UI
• Lucide React icons

Key Features

• Fragrance Browser: Explore a comprehensive database of fragrances with detailed information
• Accord Education: Learn about different fragrance families and aromatic profiles
• Smart Search: Fuzzy search functionality for easy fragrance discovery
• User Authentication: Secure login and personalized user profiles
• Interactive Chatbot: Get fragrance recommendations and answers to scent-related questions
• Responsive Design: Optimized for both desktop and mobile experiences
• Infinite Scroll: Smooth browsing experience with lazy-loaded content

Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

# Navigate to the project directory
cd react-enviroment

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Project Structure

react-enviroment/
├── src/
│   ├── components/      # Reusable UI components
│   ├── pages/          # Page-level components
│   ├── contexts/       # React context providers
│   ├── hooks/          # Custom React hooks
│   ├── types/          # TypeScript type definitions
│   └── lib/            # Utility functions and configurations
└── public/             # Static assets

Development

# Run linting
npm run lint

# Preview production build
npm run preview

Team

Developed as a capstone project by a team of five passionate developers.