Alainn — Luxury Boutique

A fully-featured luxury e-commerce boutique built with React.

🔗 Live Demo → alainn.vercel.app

Features

• 🛍️ Full product catalogue with category filtering & sorting
• 👗 Product detail pages with size selection & image gallery
• 🛒 Persistent cart with quantity management
• 💳 Multi-step checkout with form validation
• 📱 Fully responsive — mobile, tablet, desktop
• ✨ Parallax hero, hover effects, smooth animations
• 🎨 Editorial luxury aesthetic — Cormorant Garamond typography, gold accents

Tech Stack

• React 18 with React Router v6
• CSS (component-scoped, no library dependencies)
• Unsplash for product imagery (no API key needed)

---

Getting Started Locally

# Clone your repo
git clone https://github.com/YOUR_USERNAME/alainn.git
cd alainn

# Install dependencies
npm install

# Start development server
npm start

Runs at http://localhost:3000

---

Deploy to GitHub Pages (Free)

1. Push to GitHub

git init
git add .
git commit -m "Initial commit — Alainn boutique"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/alainn.git
git push -u origin main

2. Install gh-pages

npm install --save-dev gh-pages

3. Update package.json

Add the following to your package.json:

{
  "homepage": "https://YOUR_USERNAME.github.io/alainn",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

4. Deploy

npm run deploy

Your site will be live at https://YOUR_USERNAME.github.io/alainn within a few minutes.

Note: After deployment, go to your GitHub repo → Settings → Pages → set Source to gh-pages branch if it isn't already.

---

Deploy to Vercel (Recommended — Easiest)

1. Go to vercel.com and sign in with GitHub
2. Click "Add New Project"
3. Import your alainn repository
4. Click Deploy — Vercel auto-detects React and handles everything

Your live URL will be: https://alainn.vercel.app (or similar)

---

Deploy to Netlify

1. Go to netlify.com
2. Drag & drop your build/ folder after running npm run build, OR
3. Connect your GitHub repo for continuous deployment

---

Project Structure

src/
├── components/
│   ├── Navbar.js / .css
│   ├── Cart.js / .css        ← Slide-out cart drawer
│   ├── ProductCard.js / .css
│   └── Footer.js / .css
├── pages/
│   ├── Home.js / .css        ← Parallax hero, featured grid, editorial banner
│   ├── Shop.js / .css        ← Filterable & sortable product grid
│   ├── ProductDetail.js/.css ← Size selector, image gallery, add to cart
│   └── Checkout.js / .css    ← Multi-step checkout with validation
├── context/
│   └── CartContext.js        ← Global cart state (useReducer)
├── data/
│   └── products.js           ← Product catalogue (add your own!)
└── index.css                 ← Global design tokens & base styles

Adding Products

Edit src/data/products.js to add your own products. Each product follows this shape:

{
  id: 9,
  name: "Your Product Name",
  price: 250,
  category: "Dresses",          // Must match a category in the categories array
  sizes: ["XS", "S", "M", "L"],
  description: "A beautiful piece...",
  images: [
    "https://your-image-url.com/image1.jpg",
    "https://your-image-url.com/image2.jpg"  // optional hover image
  ],
  badge: "New Arrival",          // optional: "New Arrival" | "Bestseller" | "Limited"
  featured: true                 // optional: shows on home page
}

---

Made with intention.