GetYourPC - Premium Laptop Ecommerce Store

A modern, responsive ecommerce website for selling laptops, built with React, Vite, and Tailwind CSS. Inspired by Oraimo's clean design.

🎉 Current Status

✅ Project is fully set up and running!

• Development server: http://localhost:5173/
• All components created and functional
• Shopping cart system implemented
• Responsive design with Tailwind CSS

Features

• 🛍️ Product Catalog: Browse premium laptops with detailed specs
• 🛒 Shopping Cart: Add, update, and remove items with real-time updates
• 🎨 Modern UI: Clean, responsive design inspired by Oraimo
• 📱 Mobile Friendly: Fully responsive across all devices
• ⚡ Fast: Built with Vite for lightning-fast development
• 🔍 Search: Search functionality for products
• 💳 Cart Management: Sidebar cart with quantity controls
• 🏷️ Product Details: Specs, ratings, reviews, and pricing

Tech Stack

• React 19 - UI Library
• Vite 7 - Build tool
• Tailwind CSS 4 - Styling
• React Router DOM - Routing
• React Icons - Icon library

Project Structure

src/
├── components/
│   ├── Header/         # Navigation header with search & cart
│   ├── Hero/           # Hero section with CTA
│   ├── Products/       # Product cards and grid
│   ├── Cart/           # Shopping cart sidebar
│   └── Footer/         # Footer component
├── pages/
│   ├── Home.jsx        # Homepage with features
│   └── Products.jsx    # Products listing with filters
├── data/
│   └── products.js     # Product data (8 laptops)
└── App.jsx             # Main app with routing

Getting Started

Prerequisites

• Node.js 20.19+ or 22.12+ (you have 20.18.3 - might show a warning)
• npm 11+

Installation & Running

1. Already installed! Dependencies are ready to go.

2. Development server is running:

   npm run dev
   # Server at: http://localhost:5173/

3. Build for production:

   npm run build

4. Preview production build:

   npm run preview

Available Scripts

• npm run dev - Start development server (✅ Currently running)
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Current Features Implemented

1. Homepage

• Hero section with gradient background
• Features section (Free Shipping, Secure Payment, Easy Returns)
• Brand showcase
• Featured products grid

2. Products Page

• Category filters (All, Gaming, Business, Ultrabooks, 2-in-1)
• Price range slider
• Brand checkboxes
• Product sorting

3. Shopping Cart

• Slide-in cart sidebar
• Quantity controls
• Remove items
• Subtotal and shipping calculation
• Free shipping on orders over $1000

4. Product Cards

• Product images
• Discount badges
• Star ratings and reviews
• Detailed specs preview
• Price with original price strikethrough
• Stock status
• Add to cart button

Next Steps: Backend Integration

Phase 1: Basic Backend Setup

// Recommended backend options:
// 1. Node.js + Express + MongoDB
// 2. Node.js + NestJS + PostgreSQL
// 3. Firebase/Supabase (fastest setup)

What you'll need:

• User authentication (JWT)
• Product API endpoints
• Order management system
• Payment integration (Stripe/PayPal)
• Database setup

Phase 2: Frontend Integration

• Create API service layer (src/services/api.js)
• Add state management (Redux Toolkit or Zustand)
• Replace mock data with API calls
• Add loading states and error handling
• Implement user authentication flow

Phase 3: Advanced Features

• User dashboard
• Order tracking
• Product reviews system
• Wishlist functionality
• Email notifications
• Admin panel for inventory management

API Structure (Recommended)

// Example API endpoints to create:
GET    /api/products           // Get all products
GET    /api/products/:id       // Get single product
POST   /api/auth/register      // User registration
POST   /api/auth/login         // User login
POST   /api/orders             // Create order
GET    /api/orders/:id         // Get order details
POST   /api/cart               // Save cart
GET    /api/cart/:userId       // Get user cart

Environment Variables Setup

Create .env file for backend integration:

VITE_API_URL=http://localhost:3000/api
VITE_STRIPE_PUBLIC_KEY=your_stripe_key

Design Inspiration

The design is inspired by Oraimo's ecommerce site with:

• Clean product cards with hover effects
• Prominent call-to-action buttons
• Sticky header with search and cart
• Mobile-first responsive design
• Blue/white color scheme

Color Scheme

• Primary: Blue (#2563EB)
• Secondary: Gray (#1F2937)
• Accent: Red (#EF4444) for deals/discounts
• Background: White/Gray-50
• Text: Gray-700/900

Sample Data

The project includes 8 sample laptops:

• MacBook Pro 16" M3 Max
• Dell XPS 15
• HP Spectre x360
• Lenovo ThinkPad X1 Carbon
• ASUS ROG Zephyrus G14
• Microsoft Surface Laptop 5
• Razer Blade 15
• Acer Swift 3

Contributing

This is your project! Feel free to:

• Add more products
• Customize colors and styling
• Add new features
• Integrate with your preferred backend

License

MIT License - Free to use for personal or commercial projects.

---

Ready to customize? Start editing files in src/ and see live updates in your browser!