SkyArtShop/Sky_Art_shop/CMS_COMPLETE_GUIDE.md

# 🎨 Sky Art Shop - Complete CMS Integration

## 🎉 What's Been Completed

Your Sky Art Shop now has a **full backend CMS** (Admin) connected to your **static frontend** (shop.html, portfolio.html, blog.html, etc.).

### ✅ Backend (Admin Folder)

- **ASP.NET Core 8.0** MVC application
- **MongoDB** database for all content
- **Authentication** (cookie-based, admin login)
- **CRUD Operations** for:
  - Products
  - Portfolio Projects
  - Blog Posts
  - Pages
  - Categories
  - Site Settings
- **Image Upload** service with validation
- **Public Read-Only APIs** with CORS enabled
- **Static File Serving** for uploaded images

### ✅ Frontend Integration Files Created

Located in `Sky_Art_Shop/` folder:

```
js/
├── api-integration.js      # Core API functions
├── shop-page.js            # Products integration
├── portfolio-page.js       # Projects integration
├── blog-page.js            # Blog integration
├── index-page.js           # Home page integration
└── about-page.js           # About page integration

css/
└── api-styles.css          # Styling for cards & grids

Documentation/
├── INTEGRATION_GUIDE.md    # How to wire up each page
├── IMAGE_FIX_GUIDE.md      # Fix for images not showing
└── test-api.html           # Test page to verify API
```

---

## 🚀 Quick Start (3 Steps)

### 1. Start the Backend

```powershell
cd "e:\Documents\Website Projects\Sky_Art_Shop\Admin"
dotnet run --launch-profile https
```

Backend runs on: **<https://localhost:5001>**

### 2. Fix Missing Images

Your products exist but don't have images yet:

1. Open: <https://localhost:5001/admin/products>
2. Click **Edit** on each product
3. Upload a **Main Image**
4. Click **Save**

Images will be stored in `Admin/wwwroot/uploads/products/`

### 3. Integrate Static Pages

Add these scripts to each HTML file (see `INTEGRATION_GUIDE.md` for details):

**shop.html**:

```html
<link rel="stylesheet" href="css/api-styles.css">
<script src="js/api-integration.js"></script>
<script src="js/shop-page.js"></script>
```

**portfolio.html**:

```html
<link rel="stylesheet" href="css/api-styles.css">
<script src="js/api-integration.js"></script>
<script src="js/portfolio-page.js"></script>
```

**blog.html**:

```html
<link rel="stylesheet" href="css/api-styles.css">
<script src="js/api-integration.js"></script>
<script src="js/blog-page.js"></script>
```

Add container divs where content should render:

```html
<div id="productsContainer"></div>
<div id="projectsContainer"></div>
<div id="blogContainer"></div>
```

---

## 🧪 Testing

### Test API Connection

Open: `file:///E:/Documents/Website%20Projects/Sky_Art_Shop/test-api.html`

This page will:

- ✅ Test backend connection
- ✅ Load products/projects/blog from API
- ✅ Show image URLs and verify they load
- ✅ Display JSON responses for debugging

### Test Your Static Site

After integration:

1. Open `shop.html` in browser
2. Products should render with images from API
3. Open DevTools Console (F12)
4. Should see: `"Loaded products: X"`

---

## 📊 How It Works

```
┌─────────────────────┐
│  Static HTML Files  │
│  (shop.html, etc.)  │
│                     │
│  Uses JavaScript to │
│  fetch data ↓       │
└─────────────────────┘
          ↓
┌─────────────────────┐
│   Public REST API   │
│  /api/products      │
│  /api/projects      │
│  /api/blog          │
│                     │
│  Returns JSON ↓     │
└─────────────────────┘
          ↓
┌─────────────────────┐
│   MongoDB Database  │
│  SkyArtShopCMS      │
│                     │
│  Collections:       │
│  - Products         │
│  - Projects         │
│  - BlogPosts        │
│  - Pages            │
└─────────────────────┘
```

**Admin edits content** → **MongoDB updates** → **Static site fetches new data** → **Users see changes**

---

## 📋 API Endpoints

| Endpoint | Method | Description |
|----------|--------|-------------|
| `/api/products` | GET | All products |
| `/api/products/{id}` | GET | Single product |
| `/api/projects` | GET | Portfolio projects |
| `/api/projects/{id}` | GET | Single project |
| `/api/blog` | GET | Blog posts |
| `/api/blog/{id}` | GET | Single post |
| `/api/pages/{slug}` | GET | Page by slug (e.g., "about") |
| `/api/categories` | GET | All categories |
| `/api/settings` | GET | Site settings |
| `/uploads/products/*` | GET | Product images |
| `/uploads/projects/*` | GET | Project images |
| `/uploads/blog/*` | GET | Blog images |

---

## 🎨 Customization

### Change API URL

Edit `js/api-integration.js`:

```javascript
const API_BASE = 'https://your-domain.com'; // Change from localhost
```

### Customize Card Design

Edit `css/api-styles.css` to match your site's look:

- Colors, fonts, spacing
- Grid layouts (columns, gaps)
- Hover effects

### Custom Rendering

Edit `js/api-integration.js` functions like `loadProducts()` to change HTML structure:

```javascript
return `
  <div class="my-custom-card">
    <img src="${imgSrc}">
    <h3>${product.title}</h3>
    <button>Buy Now</button>
  </div>`;
```

---

## 🛠️ Admin Features

Access at: **<https://localhost:5001/admin>**

Default credentials (change in Admin → Settings):

- Username: `admin`
- Password: `admin123`

### Admin Capabilities

- ✅ Create/Edit/Delete Products
- ✅ Upload product images (main + gallery)
- ✅ Create/Edit/Delete Portfolio Projects
- ✅ Upload project images (cover + multiple)
- ✅ Create/Edit/Delete Blog Posts
- ✅ Upload featured images for blog
- ✅ Rich text editing (TinyMCE)
- ✅ Manage Pages & Categories
- ✅ Site Settings (title, description, etc.)

---

## 🐛 Troubleshooting

### Images Not Showing?

**Problem**: Products render but no images appear.

**Solution**: See `IMAGE_FIX_GUIDE.md`

1. Edit products in admin
2. Re-upload images
3. Verify files in `Admin/wwwroot/uploads/products/`

### "Cannot reach backend" Error?

**Problem**: Static site can't call API.

**Solution**:

1. Ensure backend is running: `dotnet run --launch-profile https`
2. Check `API_BASE` in `api-integration.js` matches (<https://localhost:5001>)
3. CORS is already enabled

### Blank Page?

**Problem**: HTML page loads but no content.

**Solution**:

1. Open DevTools Console (F12)
2. Check for JavaScript errors
3. Ensure container divs exist (`<div id="productsContainer"></div>`)
4. Verify scripts load in correct order (api-integration.js first)

---

## 📚 Documentation Files

| File | Purpose |
|------|---------|
| `INTEGRATION_GUIDE.md` | Step-by-step integration for each page |
| `IMAGE_FIX_GUIDE.md` | How to fix missing images issue |
| `test-api.html` | Test page to verify API & images |
| `CMS_COMPLETE_GUIDE.md` | This file - complete overview |

---

## ✅ Next Steps

1. **[REQUIRED]** Upload images to products via Admin
2. **[REQUIRED]** Add script tags to HTML pages
3. **[OPTIONAL]** Customize styles in `api-styles.css`
4. **[OPTIONAL]** Add more products/projects/blog posts via Admin
5. **[OPTIONAL]** Deploy backend to a real server (Azure, AWS, etc.)

---

## 🎯 Benefits

✅ **Client-Friendly**: Non-technical users can update content without touching code  
✅ **Centralized**: All content managed in one admin panel  
✅ **Flexible**: Static site can be hosted anywhere (GitHub Pages, Netlify, etc.)  
✅ **Modern Stack**: ASP.NET Core + MongoDB + REST API  
✅ **Image Management**: Upload, store, and serve images automatically  
✅ **Rich Content**: TinyMCE editor for formatted text  

---

## 🚀 Production Deployment (Future)

To deploy to production:

1. **Backend**: Host Admin on Azure, AWS, or VPS
2. **Database**: Use MongoDB Atlas (cloud) or self-hosted
3. **Update API_BASE**: Change localhost to your domain
4. **CORS**: Update policy to allow your domain only
5. **HTTPS**: Use Let's Encrypt or cloud provider SSL
6. **Frontend**: Host static files on CDN/GitHub Pages

---

## 📞 Support

If you encounter issues:

1. Check `test-api.html` to diagnose the problem
2. Review browser DevTools Console (F12)
3. Check backend logs in terminal
4. Refer to troubleshooting guides

---

**Congratulations!** 🎉 Your Sky Art Shop is now a fully functional CMS-powered website. Your client can edit everything via the Admin panel, and changes will appear instantly on the static site.