| # 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 |
|
|
| 1. **Clone the repository** |
|
|
| ```bash |
| git clone https://github.com/JesseBrown1980/daisy-client.git |
| cd daisy-client |
| ``` |
|
|
| 2. **Install dependencies** |
|
|
| ```bash |
| npm install |
| ``` |
|
|
| 3. **Environment Configuration** |
|
|
| Create a `.env.local` file in the root directory: |
|
|
| ```env |
| VITE_API_BASE_URL=http://localhost:3000/api/v1 |
| VITE_APP_NAME=Daisy |
| ``` |
|
|
| 4. **Start the development server** |
|
|
| ```bash |
| npm run dev |
| ``` |
|
|
| The application will be available at `http://localhost:5173` |
|
|
| ### Build for Production |
|
|
| ```bash |
| 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) |
|
|
| 1. **Connect your repository** to Vercel |
| 2. **Configure environment variables** in Vercel dashboard |
| 3. **Deploy** - Vercel will automatically build and deploy |
|
|
| ### Manual Deployment |
|
|
| 1. **Build the project** |
|
|
| ```bash |
| npm run build |
| ``` |
|
|
| 2. **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 |
|
|
