SkyArtShop/Sky_Art_shop/QUICK_REFERENCE.md

# 🎯 Sky Art Shop - Quick Reference Card

## 🚀 Start Backend

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

**URL**: <https://localhost:5001>

---

## 🔑 Admin Access

**URL**: <https://localhost:5001/admin>
**User**: `admin`
**Pass**: `admin123`

---

## 📁 File Structure

```
Sky_Art_Shop/
├── Admin/                          # Backend CMS
│   ├── Controllers/
│   │   ├── AdminController.cs      # Admin CRUD
│   │   ├── PublicProductsController.cs
│   │   ├── PublicProjectsController.cs
│   │   ├── PublicBlogController.cs
│   │   └── ... (more public APIs)
│   ├── Models/
│   ├── Views/Admin/               # Admin pages
│   ├── wwwroot/uploads/           # Uploaded images
│   └── Program.cs                 # CORS + routes
│
├── js/                            # Frontend integration
│   ├── api-integration.js         # Core API functions
│   ├── shop-page.js
│   ├── portfolio-page.js
│   └── blog-page.js
│
├── css/
│   └── api-styles.css             # Card & grid styles
│
├── shop.html                      # Static pages
├── portfolio.html
├── blog.html
├── index.html
├── about.html
├── contact.html
│
├── test-api.html                  # Test page
├── INTEGRATION_GUIDE.md           # How to integrate
├── IMAGE_FIX_GUIDE.md             # Fix images
└── CMS_COMPLETE_GUIDE.md          # Full overview
```

---

## 🔗 API Endpoints

| URL | Returns |
|-----|---------|
| `/api/products` | All products |
| `/api/projects` | Portfolio projects |
| `/api/blog` | Blog posts |
| `/api/pages/{slug}` | Page content |
| `/api/categories` | Categories |
| `/api/settings` | Site settings |
| `/uploads/products/*` | Product images |

---

## 📝 Integration Template

**For any HTML page:**

```html
<!-- Before </body> -->
<link rel="stylesheet" href="css/api-styles.css">
<script src="js/api-integration.js"></script>
<script src="js/shop-page.js"></script> <!-- or portfolio-page.js, etc. -->
```

**In HTML body:**

```html
<div id="productsContainer"></div>      <!-- For products -->
<div id="projectsContainer"></div>      <!-- For projects -->
<div id="blogContainer"></div>          <!-- For blog -->
```

---

## 🧪 Testing

1. **Test API**: Open `test-api.html`
2. **Test Page**: Open `shop.html` (after integration)
3. **Check Console**: F12 → Console → Should see "Loaded X items"
4. **Check Network**: F12 → Network → See API calls + images

---

## 🐛 Quick Fixes

### Images Not Showing

1. Admin → Products → Edit
2. Upload Main Image
3. Save
4. Refresh static page

### Backend Not Running

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

### CORS Error

Already fixed - CORS enabled in Program.cs

### Can't See Products

1. Check browser console (F12)
2. Verify backend running
3. Test with `test-api.html`

---

## 📂 Image Upload Locations

| Content Type | Upload Folder |
|-------------|---------------|
| Products | `Admin/wwwroot/uploads/products/` |
| Projects | `Admin/wwwroot/uploads/projects/` |
| Blog | `Admin/wwwroot/uploads/blog/` |

**Served at**: `https://localhost:5001/uploads/products/<file>`

---

## ✅ Integration Checklist

- [ ] Backend running (<https://localhost:5001>)
- [ ] MongoDB service running
- [ ] Products have images uploaded
- [ ] Script tags added to HTML pages
- [ ] Container divs added to HTML
- [ ] `test-api.html` shows products with images
- [ ] `shop.html` renders products from API
- [ ] Browser console shows "Loaded X products"

---

## 📚 Documentation

| File | Purpose |
|------|---------|
| `INTEGRATION_GUIDE.md` | Step-by-step for each page |
| `IMAGE_FIX_GUIDE.md` | Fix missing images |
| `CMS_COMPLETE_GUIDE.md` | Full overview |
| `test-api.html` | Test & debug page |

---

## 🎯 Workflow

**For Client (Content Management):**

1. Open <https://localhost:5001/admin>
2. Login
3. Add/Edit products, projects, blog posts
4. Upload images
5. Save
6. Changes appear on static site immediately

**For Developer (Customization):**

1. Edit `js/api-integration.js` for custom rendering
2. Edit `css/api-styles.css` for styling
3. Edit HTML pages for layout
4. Backend APIs remain unchanged

---

## 💡 Pro Tips

- **Test First**: Always use `test-api.html` to verify API before integrating
- **Console is Your Friend**: F12 → Console shows all errors
- **Images**: Upload via Admin Edit, not Create (safer)
- **CORS**: Already configured for `file://` and `localhost`
- **Production**: Change `API_BASE` in `api-integration.js` when deploying

---

## 🚀 What's Next?

1. **Upload images** to products (Admin → Products → Edit)
2. **Integrate HTML pages** (add script tags + container divs)
3. **Test everything** with `test-api.html`
4. **Customize styles** in `api-styles.css`
5. **Deploy** (optional - see CMS_COMPLETE_GUIDE.md)

---

**Status**: ✅ Backend Running | ⚠️ Images Need Upload | 📝 Pages Need Integration

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