Shopix 🛒

Shopix is a modern e-commerce web application built with Frontend Next.js + ShadCN UI + TailwindCSS and Backend Firebase + Stripe, delivering a smooth shopping experience with secure authentication, product browsing, wishlist, cart, and checkout. Designed with a clean and responsive UI, Shopix is ready for production and future scalability.

---

✨ Features

• 🔑 User Authentication with Clerk
• 🏠 Home Page with featured sections and offers
• 👨‍💼 Profile Page with featured manage profile, see your orders and your wishlist items.
• 📦 Products Page with filtering and search
• 🏷️ Category Page to explore items by category
• 📖 Single Product Page with detailed info
• 💖 Wishlist to save favorite products
• 🛒 Cart with total cost & shipping calculation
• 💳 Checkout (Stripe Integration / Cash on Delivery)
• 🎨 UI Components built with shadcn/ui
• 🕺 Animations powered by Framer Motion
• 🧾 Form Validation with Zod and React Hook Form
• 📅 Date formatting with date-fns
• 🌐 API requests handled with Axios
• 📱 Responsive design across all devices

---

🚀 Getting Started

1. Clone the repository

git clone https://github.com/mohamedhesham221/Shopix.git
cd Shopix

2. Install dependencies

npm install
# or
yarn install

3. Configure environment variables

Create a .env.local file and add the following:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<your-key>
CLERK_SECRET_KEY=<your-key>

NEXT_PUBLIC_FIREBASE_API_KEY=<your-key>
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=<your-key>
NEXT_PUBLIC_FIREBASE_PROJECT_ID=<your-key>
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=<your-key>
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=<your-key>
NEXT_PUBLIC_FIREBASE_APP_ID=<your-key>

STRIPE_WEBHOOK_SECRET=<your-key>
STRIPE_SECRET_KEY=<your-key>
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<your-key>

4. Run the development server

npm run dev

Then open: http://localhost:3000

---

Project Architecture

├── public/
│   └── assets/
│       └── brands
└── src/
    ├── app/
    │   ├── api/
    │   │   ├── checkout_sessions
    │   │   └── webhook
    │   ├── cart
    │   ├── category
    │   ├── checkout
    │   ├── products
    │   ├── profile
    │   ├── wishlist
    │   ├── global.css
    │   ├── layout.js
    │   ├── loading.js
    │   ├── not-found.js
    │   └── page.js
    ├── core/
    │   ├── api
    │   ├── lib
    │   ├── providers
    │   ├── service
    │   └── utils
    ├── features/
    │   ├── all-products/
    │   │   ├── components
    │   │   └── hooks
    │   ├── cart/
    │   │   ├── components
    │   │   ├── hooks
    │   │   └── store
    │   ├── category/
    │   │   ├── components
    │   │   └── hooks
    │   ├── checkout/
    │   │   ├── components
    │   │   └── hooks
    │   ├── home/
    │   │   ├── components
    │   │   └── hooks
    │   ├── navbar/
    │   │   ├── components
    │   │   └── hooks
    │   ├── profile/
    │   │   ├── components
    │   │   └── hooks
    │   ├── single-product/
    │   │   ├── components
    │   │   └── hooks
    │   └── wishlist/
    │       ├── components
    │       ├── hooks
    │       └── store
    ├── shared/
    │   ├── animations
    │   ├── components
    │   ├── hooks
    │   └── ui
    └── middleware.js

🛠️ Tech Stack

• ⚛️ React
• ▲ Next.js
• 🎨 Tailwind CSS
• 🎨 shadcn/ui
• 🔐 Clerk Authentication
• 💳 Stripe
• 🔥 Firebase (Database & Storage)
• 🕺 Framer Motion
• 🧾 Zod & React Hook Form
• 📅 date-fns
• 🌐 Axios
• Zustand / React Query (State Management)

---

👤 Author

Muhammad Hisham

Contact	Info
📧 Email	muhammedheshamm2@gmail.com
🌐 Portfolio	https://muhammad-hisham-portfolio-22.vercel.app/