E-Commerce-Module/frontend

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

# 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