# Rocks, Bones & Sticks Frontend

React frontend for the Rocks, Bones & Sticks e-commerce platform.

## Technologies Used

- **React**: UI library
- **React Router**: For navigation and routing
- **Redux**: For state management
- **@reduxjs/toolkit**: Simplified Redux development
- **React Query**: For data fetching, caching, and state management
- **Material UI**: Component library with theming
- **Axios**: HTTP client
- **Vite**: Build tool

## Project Structure

```
src/
├── assets/          # Static assets like images, fonts
├── components/      # Reusable components
├── features/        # Redux slices organized by feature
├── hooks/           # Custom hooks
├── layouts/         # Layout components
├── pages/           # Page components
├── services/        # API services
├── store/           # Redux store configuration
├── theme/           # Material UI theme configuration
└── utils/           # Utility functions
```

## Setup

```bash
# Install dependencies
npm install

# Run for development
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview
```

## Environment Variables

Create a `.env` file with the following variables:

```
VITE_APP_NAME=Rocks, Bones & Sticks
VITE_API_URL=http://localhost:4000/api
VITE_ENVIRONMENT=beta  # Use 'beta' for development, 'prod' for production
```

## Features

- **User Authentication**: Login with email verification code
- **Product Browsing**: Filter and search products
- **Shopping Cart**: Add, update, remove items
- **Checkout Process**: Complete order creation
- **Admin Dashboard**: Manage products, view orders and customers
- **Responsive Design**: Works on mobile and desktop devices
- **Dark Mode Support**: Toggle between light and dark themes