Daisy - Digital Closet Frontend

A modern React-based frontend application for managing your digital wardrobe and discovering new fashion items through web scraping.

📋 Features

Digital Closet Management: Add, view, and organize your wardrobe items
Product Discovery: Search and browse scraped fashion products from major retailers
Image Upload: Upload and manage photos of your clothing items

🛠 Tech Stack

Framework: React 18 with TypeScript
Build Tool: Vite
Styling: Tailwind CSS + Radix UI Components
State Management: TanStack Query (React Query)
Routing: React Router DOM v7
Form Handling: React Hook Form with Zod validation
HTTP Client: Axios
Testing: Vitest + React Testing Library
Deployment: Vercel

🏗 Architecture Overview

The frontend follows a modern React architecture with clear separation of concerns:

Component Structure: The application uses a component-based architecture with reusable UI components built on Radix UI primitives. Components are organized into logical groups (ui, forms, layout) with consistent naming conventions.

State Management: TanStack Query handles server state management, providing caching, background updates, and optimistic updates. Local component state is managed with React hooks, while form state uses React Hook Form for optimal performance and validation.

📦 Installation & Setup

Prerequisites

Node.js 18+
npm or yarn

Quick Start

Clone the repository

git clone https://github.com/JesseBrown1980/daisy-client.git
cd daisy-client

Install dependencies
```
npm install
```
Environment Configuration

Create a .env.local file in the root directory:
```
VITE_API_BASE_URL=http://localhost:3000/api/v1
VITE_APP_NAME=Daisy
```
Start the development server
```
npm run dev
```
The application will be available at http://localhost:5173

Build for Production

npm run build

The built files will be in the dist/ directory.

📁 Project Structure

src/
├── api/                 # API client and endpoint definitions
├── components/          # React components
│   ├── ui/             # Reusable UI components
│   ├── router/         # Routing components
│   └── __tests__/      # Component tests
├── hooks/              # Custom React hooks
├── lib/                # Utility libraries and configurations
├── pages/              # Page components
├── styles/             # Global styles
├── types/              # TypeScript type definitions
└── utils/              # Helper functions and utilities

🔧 Available Scripts

npm run dev - Start development server
npm run build - Build for production
npm run build:test - Build for testing environment
npm run build:prod - Build for production environment
npm run preview - Preview production build
npm run test - Run tests
npm run test:watch - Run tests in watch mode
npm run test:coverage - Run tests with coverage report
npm run lint - Lint code
npm run format - Format code with Prettier

🌐 Environment Variables

Variable	Description	Default
`VITE_API_BASE_URL`	Backend API base URL	`http://localhost:3000/api/v1`
`VITE_APP_NAME`	Application name	`Daisy`

🚀 Deployment

Vercel (Recommended)

Connect your repository to Vercel
Configure environment variables in Vercel dashboard
Deploy - Vercel will automatically build and deploy

Manual Deployment

Build the project
```
npm run build
```
Deploy the dist/ folder to your hosting provider

🔗 API Integration

The frontend communicates with the backend API through a centralized API client. All endpoints are typed with TypeScript for better development experience.

Key API Endpoints Used:

GET /closet - Fetch closet items
POST /closet - Add new closet item
DELETE /closet/:id - Remove closet item
GET /products - Search products
POST /products/:id/add-to-closet - Add product to closet
GET /scrape/brands - Get available brands
POST /scrape/brand/:brand - Start scraping

🛡 Error Handling

Error Boundaries: Catch and handle React component errors
API Error Handling: Centralized error handling with user-friendly messages
Form Validation: Real-time validation with clear error messages
Network Error Recovery: Automatic retries and offline support