SkyArtShop/Sky_Art_shop/README.md

# Sky Art Shop - ASP.NET Core CMS

A dynamic e-commerce CMS for Sky Art Shop built with ASP.NET Core MVC, MongoDB, and ASP.NET Core Identity. Specializing in scrapbooking, journaling, cardmaking, and collaging stationery.

## 📋 Project Overview

Sky Art Shop promotes mental health through creative art activities. This CMS enables the shop owner to manage products, portfolio, blog posts, and pages through a secure admin panel without touching code.

## 🎨 Features

### Content Management

- **Products**: Full CRUD with categories, pricing, images, and inventory tracking
- **Portfolio**: Categories and projects with image galleries
- **Blog**: Posts with rich text editing, featured images, tags, and publishing controls
- **Pages**: Custom pages with dynamic content (About, Contact, etc.)
- **Site Settings**: Global configuration (site name, contact info, hero section, footer)
- **Navigation**: Dynamic menu management stored in MongoDB

### Admin Panel

- Secure authentication with ASP.NET Core Identity
- Role-based access control (Admin role)
- Bootstrap 5 dashboard interface
- CKEditor 5 rich text editor (no API key required)
- Image upload management
- Real-time feedback with TempData alerts

### Technology Stack

- **Backend**: ASP.NET Core 8.0 MVC
- **Content Database**: MongoDB (products, pages, portfolio, blog, settings, menus)
- **Authentication Database**: SQLite + Entity Framework Core + ASP.NET Core Identity
- **Frontend**: Razor Views, Bootstrap 5, custom CSS
- **Rich Text Editor**: CKEditor 5 (free, no API key)
- **Image Storage**: File system (wwwroot/uploads/images)

## 📁 Project Structure

```
Sky_Art_Shop/
├── Controllers/          # MVC controllers (public + admin)
├── Data/                # EF Core DbContext for Identity
├── Models/              # MongoDB data models
├── Services/            # MongoDBService
├── ViewComponents/      # Navigation ViewComponent
├── Views/
│   ├── Home/           # Public homepage
│   ├── Shop/           # Products listing
│   ├── Portfolio/      # Portfolio pages
│   ├── Blog/           # Blog pages
│   ├── About/          # About page
│   ├── Contact/        # Contact page
│   ├── Admin/          # Admin dashboard
│   ├── AdminProducts/  # Product management
│   ├── AdminPortfolio/ # Portfolio management
│   ├── AdminBlog/      # Blog management
│   ├── AdminPages/     # Pages management
│   ├── AdminSettings/  # Settings management
│   └── Shared/         # Layouts and partials
├── wwwroot/
│   ├── assets/         # Static files (CSS, JS, images)
│   └── uploads/        # User-uploaded images
├── appsettings.json    # Configuration
├── Program.cs          # Application entry point
└── SkyArtShop.csproj   # Project file
```

### Prerequisites

- .NET 8.0 SDK
- MongoDB server (local or Atlas)
- Git (optional)

### Configuration

1. **MongoDB Connection**
   Update `appsettings.json` with your MongoDB connection string:

   ```json
   {
     "MongoDB": {
       "ConnectionString": "mongodb://localhost:27017",
       "DatabaseName": "SkyArtShopDB"
     }
   }
   ```

2. **Admin User Credentials**
   Default admin login (configure in `appsettings.json`):

   ```json
   {
     "AdminUser": {
       "Email": "admin@skyartshop.com",
       "Password": "Admin123!",
       "Name": "Admin"
     }
   }
   ```

### Installation

1. **Restore dependencies**

   ```powershell
   dotnet restore
   ```

2. **Build the project**

   ```powershell
   dotnet build
   ```

3. **Run the application**

   ```powershell
   dotnet run
   ```

4. **Access the site**
   - Public site: <http://localhost:5000>
   - Admin panel: <http://localhost:5000/admin/login>

### First Run

On first run, the application automatically:

- Creates SQLite database for Identity (identity.db)
- Seeds Admin role and user
- Creates default site settings
- Creates default portfolio categories
- Creates About page
- Creates navigation menu items

## 📱 Admin Panel Usage

### Login

Navigate to <http://localhost:5000/admin/login> and use the credentials from appsettings.json.

### Dashboard

View counts for products, projects, blog posts, and pages.

### Managing Products

1. Go to **Admin → Products**
2. Click **Create Product**
3. Fill in product details (name, description, price, category, stock)
4. Upload product image
5. Mark as Featured or Top Seller if desired
6. Click **Save**

### Managing Portfolio

1. **Categories**: Create categories first (Displays, Card Making, etc.)
2. **Projects**: Add projects under each category with images and descriptions

### Managing Blog

1. Go to **Admin → Blog**
2. Click **Create Post**
3. Use CKEditor for rich content formatting
4. Add featured image and excerpt
5. Add tags (comma-separated)
6. Toggle **Published** when ready to make live

### Managing Pages

1. Go to **Admin → Pages**
2. Edit existing pages (About) or create new ones
3. Use CKEditor for content formatting
4. Enable/disable with **Active** checkbox

### Site Settings

Update global settings like site name, contact info, hero section, and footer text.

### Image Uploads

- Click **Upload** button in any form with image fields
- Supports JPG, PNG, GIF, WEBP
- Images saved to wwwroot/uploads/images
- Copy image URLs to use in CKEditor content

## 🌐 Public Pages

### Home (/)

Dynamic hero section, site settings, and top seller products from MongoDB.

### Shop (/shop)

All products with category filtering.

### Portfolio (/portfolio)

Browse portfolio categories and projects.

### Blog (/blog)

Published blog posts with individual post pages (/blog/post/{slug}).

### About (/about)

Dynamic content from Pages collection.

### Contact (/contact)

Contact form (TODO: email sending integration)

## 🗄️ Database Collections (MongoDB)

- **Products**: E-commerce items with pricing, categories, images
- **PortfolioCategories**: Portfolio organization
- **PortfolioProjects**: Portfolio items with images and descriptions
- **BlogPosts**: Blog articles with rich content
- **Pages**: Custom pages (About, etc.)
- **SiteSettings**: Global configuration
- **MenuItems**: Navigation menu structure

## 🔒 Security

- ASP.NET Core Identity for authentication
- Role-based authorization (Admin role required)
- HTTPS redirection enabled
- Session cookies with HttpOnly flag
- Password requirements (configurable)
- SQL injection protection via EF Core
- XSS protection via Razor encoding

## 🛠️ Troubleshooting

### MongoDB Connection Issues

- Verify MongoDB is running
- Check connection string in appsettings.json
- Ensure network access if using MongoDB Atlas

### Identity Database Issues

- Delete identity.db to recreate
- Check file permissions in project directory

### Image Upload Issues

- Ensure wwwroot/uploads/images directory exists
- Check write permissions

### Build Errors

```powershell
dotnet clean
dotnet build
```

## 📈 Future Enhancements (Optional)

- [ ] Server-side validation with DataAnnotations
- [ ] Centralized slug generation service
- [ ] Email service integration for contact form
- [ ] Shopping cart and checkout functionality
- [ ] Product search and advanced filtering
- [ ] Image gallery management for products/projects
- [ ] SEO meta tags management
- [ ] Multi-language support
- [ ] Analytics integration
- [ ] Automated backups

## 📞 Support

For questions or issues:

- Email: <info@skyartshop.com>
- Phone: +501 608-0409
- Email: <info@skyartshop.com>
- Instagram: @skyartshop

## 📝 License

© 2035 by Sky Art Shop. All rights reserved.

## 🎯 SEO Optimization

The site includes:

- Semantic HTML structure
- Meta descriptions on all pages
- Descriptive alt text for images (to be added)
- Clean URL structure
- Fast loading times

## ⚡ Performance Tips

1. Compress images before uploading (recommended: WebP format)
2. Use appropriate image sizes (max width 1920px for hero images)
3. Consider using a CDN for assets
4. Enable browser caching
5. Minify CSS and JavaScript for production

## 🔐 Security Notes

- Form submissions should be processed server-side
- Add HTTPS when deploying to production
- Implement CSRF protection for forms
- Sanitize all user inputs

---

**Built with ❤️ for Sky Art Shop**

*Promoting mental health through creative art activities*