Rangiri WebStore | Client-Side Application

---

📋 Table of Contents

1. Executive Summary
2. Technical Architecture
3. Prerequisites & Installation
4. Environment Configuration
5. Project Structure
6. Key Features & Modules
7. State Management Strategy
8. API Integration & Security
9. Styling & UI/UX
10. Deployment
11. Screenshots
12. Changelog

---

📝 Executive Summary

The Rangiri WebStore Frontend is a high-performance, single-page application (SPA) designed for seamless online clothing retail. Built with React.js + Vite, it emphasizes:

• Fast page load and optimized performance.
• Mobile-first responsive design with smooth transitions.
• Reusable, modular components for maintainability.
• Integration with multiple payment gateways (Stripe, Razorpay, COD).

Highlights:

• Premium UI design with modern 2025 trends (rounded cards, subtle shadows, smooth hover effects).

• Lazy-loaded images with WebP/AVIF support for optimal performance.

• Component-based architecture ensuring scalability and ease of updates.

• Fast page load and optimized performance.

• Mobile-first responsive design with smooth transitions.

• Reusable, modular components for maintainability.

• Integration with multiple payment gateways (Stripe, Razorpay, COD).

To remove all `` (bold formatting) from the file, here's the cleaned content for the $SELECTION_PLACEHOLDER$ section:

Highlights:

• Fast page load and optimized performance.
• Mobile-first responsive design with smooth transitions.
• Reusable, modular components for maintainability.
• Integration with multiple payment gateways (Stripe, Razorpay, COD).
• Premium UI design with modern 2025 trends (rounded cards, subtle shadows, smooth hover effects).
• Lazy-loaded images with WebP/AVIF support for optimal performance.
• Component-based architecture ensuring scalability and ease of updates.

Note: You'll also need to remove `` from other sections like:

• "Core Framework:" → "Core Framework:"
• "Build Tool:" → "Build Tool:"
• All other bolded terms throughout the document

Consider using find-and-replace (``) to remove all instances globally.

• Premium UI design with modern 2025 trends (rounded cards, subtle shadows, smooth hover effects).
• Lazy-loaded images with WebP/AVIF support for optimal performance.
• Component-based architecture ensuring scalability and ease of updates.

---

🛠 Technical Architecture

• Core Framework: React.js (v18+)

• Build Tool: Vite (optimized bundling, HMR)

• Routing: React Router DOM (v6)

• State Management: React Context API

• Styling: Tailwind CSS (Utility-first framework)

• HTTP Client: Axios

• Notifications: React Toastify

• Payment Integration: Stripe.js & Razorpay SDK

• Font Typography: Google Fonts – Outfit, Prata

• Performance Optimization:

  • Lazy loading for product and hero images.
  • Purged unused Tailwind CSS for minimal bundle size.
  • Responsive grid layouts and mobile-first breakpoints.

---

⚙ Prerequisites & Installation

Ensure your machine has:

• Node.js: v18+
• npm: v9+ or yarn

Installation Steps:

# Clone the repository
git clone <https://github.com/Nethmina01/Ecommerce-site.git>

# Navigate to frontend
cd frontend

# Install dependencies
npm install
# or
yarn install

# Start development server
npm run dev
# or
yarn dev

---

🔐 Environment Configuration

Create a .env file in the root of the frontend directory with required environment variables:

VITE_BACKEND_URL=https://api.example.com
REACT_APP_STRIPE_KEY=your_stripe_key
REACT_APP_RAZORPAY_KEY=your_razorpay_key

Security Note: Never commit .env to version control.

---

📂 Project Structure

frontend/
├── public/              # Static assets (images, icons)
├── src/
│   ├── assets/          # Images, icons, and other static resources
│   ├── components/      # Reusable UI components
│   │   ├── Navbar.jsx
│   │   ├── Footer.jsx
│   │   ├── Hero.jsx
│   │   ├── ProductItem.jsx
│   │   ├── RelatedProducts.jsx
│   │   ├── CartTotal.jsx
│   │   └── ...
│   ├── context/         # Global State Logic (ShopContext.jsx)
│   ├── pages/           # Route Views
│   │   ├── Home.jsx
│   │   ├── Collection.jsx
│   │   ├── Product.jsx
│   │   ├── Cart.jsx
│   │   ├── Login.jsx
│   │   ├── PlaceOrder.jsx
│   │   ├── Orders.jsx
│   │   └── ...
│   ├── App.jsx          # Root component & route definitions
│   ├── main.jsx         # Entry point
│   └── index.css        # Tailwind + global styles
├── .env                 # Environment variables
├── tailwind.config.js   # Tailwind configuration
├── vite.config.js       # Vite configuration
└── package.json         # Dependencies & scripts

---

🚀 Key Features & Modules

1. Product Discovery

• Dynamic Filtering: Category (Men, Women, Kids) and Sub-Category (Topwear, Bottomwear, Winterwear).
• Sorting: Price Low-High, High-Low, and relevance.
• Search Functionality: Real-time search globally accessible from Navbar.

2. Shopping Cart System

• Managed via ShopContext: add items, update sizes, modify quantities.
• Persistence: Cart state synced with backend for logged-in users.

3. User Authentication

• JWT-based login & registration.
• Protected routes redirect guests to login.

4. Checkout & Payments

• Form validation for shipping information.
• Payment Gateways: Stripe (redirect), Razorpay (modal), Cash on Delivery.

---

🧠 State Management Strategy

• Global state via Context API avoids prop drilling.

• State includes: products, cartItems, currency, token, search, navigate.

• Exposed functions:

  • addToCart(itemId, size)
  • updateQuantity(itemId, size, quantity)
  • getCartCount()
  • getCartAmount()

---

📡 API Integration & Security

• Axios used for HTTP requests.
• Base URL configured via .env.
• Token injected into headers for protected endpoints:

const headers = { token: localStorage.getItem("token") };
await axios.post(url, data, { headers });

• Error Handling: Try-catch blocks + React Toastify notifications.
• Optimistic UI updates for better responsiveness.

---

🎨 Styling & UI/UX

• Framework: Tailwind CSS for rapid styling & low bundle size.
• Responsive Design: Mobile-first, adapts across devices.
• Animations: Subtle hover effects for buttons, product cards, and route transitions.
• Premium Visuals: Rounded cards, shadows, smooth scaling effects.
• Scroll Management: Hidden scrollbars for clean aesthetics in horizontal sections (Related Products).
• Lazy Loading: High-quality images load progressively for faster initial paint.

---

⚡ Deployment

• Build: npm run build or yarn build.
• Hosting Options: Vercel, Netlify, AWS S3 + CloudFront.
• Environment Variables: Configure on the hosting platform.
• HTTPS: Ensure secure headers are enabled.

---

🖼 Screenshots

Home Page:

Product Collection:

Product Detail Page:

Mobile Sidebar:

---

📝 Changelog

v1.0.0 – Initial release

• SPA with React + Vite
• Tailwind CSS styling
• Product discovery, cart, checkout with Stripe & Razorpay
• Context API state management
• Mobile-first, responsive UI

v1.1.0 – Improvements

• Lazy loading of images
• Premium rounded cards & hover effects
• PropTypes validation added to all components
• Optimized for faster load and smaller bundle size