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

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:

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

portfolio.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:

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

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

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:

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.