🛒 Amazon Clone

A full-stack, production-grade Amazon e-commerce clone. Built with a modern React frontend (Vite, Material UI, Framer Motion), robust Node.js/Express backend, Prisma ORM, Supabase/PostgreSQL, Stripe payments, and Firebase authentication. Designed for scalability, security, and a seamless user experience—showcasing best practices for enterprise-level web applications.

---

🚀 Live Demo

• Frontend: View Live Site
• Backend: GitHub Backend API

---

🖥️ Tech Stack

Frontend

_{Some UI pages inspiration from Dribbble}

• React (Vite, JSX, CSS Modules)
• Material UI (MUI)
• Framer Motion (animations)
• React Toastify, SweetAlert2 (notifications)
• React Context API (state management)

Backend

• Node.js & Express (API server)
• Prisma ORM (type-safe DB access)
• PostgreSQL (production DB)
• Supabase (managed Postgres hosting)
• SQLite (local dev DB)
• Firebase Admin SDK (authentication)
• Stripe (payments)

---

☁️ Deployment

• Frontend: Deployed on Vercel for instant, global static hosting and serverless functions.
• Backend: Deployed on Render for scalable Node.js API hosting.
• Database: Supabase (managed Postgres, connection pooling, secure cloud storage).
• Authentication & Functions: Firebase (Auth, Admin SDK, and optional serverless functions).

---

🚦 Performance & SEO

• Excellent Lighthouse SEO score (100) and strong accessibility (96)
• Performance and Best Practices improved with preconnect, preload, and optimized meta tags
• Open Graph and Twitter meta tags for rich social sharing
• robots.txt and meta description for search engine indexing
• Production security headers (CSP, HSTS, XFO, COOP) via vercel.json
• Source maps enabled for production debugging
• Critical images preloaded and Google Fonts optimized with display=swap
• Performance-optimized React code using useMemo and useCallback in key pages

✨ Features

• 🔐 Secure Authentication: Firebase Auth (email/password, Google sign-in)
• 🛍️ Product Browsing: Browse, search, and filter products by category
• 🛒 Shopping Cart: Add, remove, and update items in real time
• 💳 Checkout & Payment: Stripe integration for secure payments
• 🚚 Order Tracking: View order history and delivery status (orders saved to backend DB)
• 🎁 Promo Codes & Discounts: Apply discount codes at checkout
• 📦 Shipping Details: Full address, contact, and region support
• 🧾 Order History: Modern, responsive grid with clear labels and truncated titles
• 🧑‍💼 User Account Page: View and manage personal info, sign out, see order history
• 🛡️ Backend Auth Middleware: All order/payment endpoints protected by Firebase token verification
• 🗄️ Persistent State: Cart and user info saved in localStorage
• 📱 Responsive Design: Mobile-first, works on all devices
• ⚡ Fast & Modern UI: Built with Vite, React, modular CSS, and Framer Motion
• 🧑‍💻 Admin-Ready: Backend and DB structure ready for admin features, user management, and analytics

---

🛠️ Local Development & Setup

1. Clone the repo

git clone https://github.com/Tesfamichael12/Amazon-Clone.git
cd Amazon-Clone

2. Install dependencies (frontend)

npm install

3. Install dependencies (backend)

cd amazon-api
npm install

4. Environment Variables

Frontend (.env in root or /src if needed)

VITE_REACT_APP_BACKEND_URL=your_backend_url
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
VITE_FIREBASE_PROJECT_ID=your_firebase_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
VITE_FIREBASE_APP_ID=your_firebase_app_id

Backend (amazon-api/.env)

STRIPE_SECRET_KEY=sk_test_...
CLIENT_URL=http://localhost:5173
PORT=5000
DATABASE_URL=your_database_url # SQLite for dev, Postgres/Supabase for prod

See amazon-api/README.md for full backend setup, including Prisma migrations and Supabase/Postgres deployment.

5. Start the apps

• Frontend:

  npm run dev

• Backend:

  cd amazon-api
  npm start

---

---

🙌 Credits

• Built by Tesfamichael Tafere
• Inspired by Amazon.com UI/UX
• Some UI inspiration from Dribbble

---

---

⚠️ Disclaimer

This project is for educational and demonstration purposes only. It is not affiliated with, endorsed by, or connected to Amazon in any way.