cute-shop

# 🎀 CuteShop - E-Commerce for Women & Children's Clothing

A beautiful, cute-themed e-commerce platform built with Next.js, TypeScript, MongoDB, and Tailwind CSS.

## ✨ Features

- 🔐 **Authentication** - User registration and login with JWT
- 🛠️ **Admin Panel** - Full CRUD operations for products
- 🛍️ **Shopping** - Browse products, add to cart, wishlist
- 💾 **State Management** - Zustand with localStorage persistence
- 🎨 **Cute Design** - Pink gradients, animations, pastel colors
- 📱 **Responsive** - Works on all devices

## 🚀 Quick Start

### Prerequisites

- Node.js 18+ installed
- MongoDB running (local or cloud)

### Installation

1. **Clone and install dependencies**

   ```bash
   cd cute-shop
   npm install
   ```

2. **Set up environment variables**

   Create a `.env.local` file in the root directory:

   ```env
   MONGODB_URI=mongodb://localhost:27017/cute-shop
   JWT_SECRET=your-super-secret-jwt-key-change-this
   NEXT_PUBLIC_APP_URL=http://localhost:3000
   ```

3. **Seed the database with test data**

   ```bash
   npm run seed
   ```

   This will create:

   - 1 admin user
   - 3 regular users
   - 10 cute products
   - 3 sample orders

4. **Start the development server**

   ```bash
   npm run dev
   ```

5. **Open your browser**

   Navigate to [http://localhost:3000](http://localhost:3000)

## 🔐 Test Accounts

After running the seed script, you can login with:

### Admin Account

- **Email:** `admin@cuteshop.com`
- **Password:** `admin123`
- Access admin panel at `/admin/products`

### Regular Users

- **Email:** `sarah@example.com` | **Password:** `password123`
- **Email:** `emily@example.com` | **Password:** `password123`
- **Email:** `jessica@example.com` | **Password:** `password123`

## 📁 Project Structure

```
cute-shop/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── admin/             # Admin panel pages
│   │   ├── auth/              # Login & Register
│   │   ├── products/          # Product pages
│   │   ├── cart/              # Shopping cart
│   │   └── wishlist/          # Wishlist
│   ├── components/
│   │   ├── ui/                # Reusable components
│   │   └── client/            # Client components
│   ├── lib/
│   │   ├── models/            # Mongoose models
│   │   └── actions/           # Server actions
│   ├── store/                 # Zustand stores
│   └── types/                 # TypeScript types
└── scripts/
    └── seed.ts                # Database seed script
```

## 🛠️ Available Scripts

- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run start` - Start production server
- `npm run seed` - Seed database with test data
- `npm run lint` - Run ESLint

## 🎨 Tech Stack

- **Framework:** Next.js 16 (App Router)
- **Language:** TypeScript
- **Styling:** Tailwind CSS 4
- **Database:** MongoDB + Mongoose
- **State:** Zustand
- **Auth:** JWT + bcrypt
- **Icons:** React Icons
- **Carousel:** Swiper
- **Font:** Quicksand

## 📦 Key Features

### For Customers

- Browse cute clothing products
- View product details with image gallery
- Select sizes and colors
- Add items to cart
- Save favorites to wishlist
- User registration and login
- View order history

### For Admins

- Create new products
- Edit existing products
- Delete products
- Manage inventory
- View all orders

## 🎀 Design Highlights

- **Cute Pink Theme** - Soft pink and purple gradients
- **Smooth Animations** - Hover effects, transitions, floating elements
- **Rounded Corners** - Everything has soft, rounded edges
- **Custom Scrollbar** - Pink gradient scrollbar
- **Responsive Design** - Mobile-first approach

## 🔧 Development

### Database Models

- **User** - Authentication and user data
- **Product** - Product information with images, sizes, colors
- **Order** - Order tracking with items and shipping

### State Management

- **authStore** - User authentication state
- **cartStore** - Shopping cart with persistence
- **wishlistStore** - Saved items with persistence

## 📝 Environment Variables

| Variable              | Description               | Example                               |
| --------------------- | ------------------------- | ------------------------------------- |
| `MONGODB_URI`         | MongoDB connection string | `mongodb://localhost:27017/cute-shop` |
| `JWT_SECRET`          | Secret key for JWT tokens | `your-secret-key`                     |
| `NEXT_PUBLIC_APP_URL` | Application URL           | `http://localhost:3000`               |

## 🚧 Future Enhancements

- [ ] Complete checkout flow
- [ ] Payment integration (Stripe)
- [ ] Email notifications
- [ ] Product search
- [ ] Category filtering
- [ ] Product reviews
- [ ] Image upload
- [ ] Admin analytics dashboard

## 📄 License

This project is for educational purposes.

---

Made with 💕 by CuteShop Team