# 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: - Admin panel: ### 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 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: - Phone: +501 608-0409 - Email: - 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*