SkyArtShop/Sky_Art_shop

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:

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

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

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

Installation

1. Restore dependencies

   dotnet restore
   

2. Build the project

   dotnet build
   

3. Run the application

   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

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