SkyArtShop/Sky_Art_shop/QUICK_REFERENCE.md

🎯 Sky Art Shop - Quick Reference Card

🚀 Start Backend

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:

<!-- 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:

<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

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