Fix admin route access and backend configuration
- Added /admin redirect to login page in nginx config - Fixed backend server.js route ordering for proper admin handling - Updated authentication middleware and routes - Added user management routes - Configured PostgreSQL integration - Updated environment configuration
This commit is contained in:
Local Server
343
Sky_Art_shop/SETUP-GUIDE.md
Normal file
343
Sky_Art_shop/SETUP-GUIDE.md
Normal file
@@ -0,0 +1,343 @@
|
||||
# 🚀 Sky Art Shop Website - Quick Start Guide
|
||||
|
||||
Welcome! This guide will help you get your Sky Art Shop website up and running quickly.
|
||||
|
||||
## ✅ What's Included
|
||||
|
||||
Your website includes:
|
||||
|
||||
- ✨ 8 fully functional HTML pages
|
||||
- 🎨 Complete responsive CSS styling
|
||||
- 💻 Interactive JavaScript features
|
||||
- 📁 Organized file structure
|
||||
- 📖 Comprehensive documentation
|
||||
|
||||
## 📋 Step-by-Step Setup
|
||||
|
||||
### Step 1: View Your Website
|
||||
|
||||
#### Option A: Using Live Server (Recommended)
|
||||
|
||||
1. Open Visual Studio Code
|
||||
2. Install "Live Server" extension if not already installed:
|
||||
- Click Extensions icon (or press `Ctrl+Shift+X`)
|
||||
- Search for "Live Server"
|
||||
- Click Install
|
||||
3. Right-click on `index.html`
|
||||
4. Select "Open with Live Server"
|
||||
5. Your website will open in your default browser!
|
||||
|
||||
#### Option B: Open Directly in Browser
|
||||
|
||||
1. Navigate to your project folder
|
||||
2. Double-click `index.html`
|
||||
3. The website will open in your default browser
|
||||
|
||||
### Step 2: Add Your Images
|
||||
|
||||
**Important**: The website currently references image files that don't exist yet. You need to add them!
|
||||
|
||||
1. Read the `IMAGE-GUIDE.md` file for complete image requirements
|
||||
2. Create the necessary folders:
|
||||
|
||||
```
|
||||
assets/images/
|
||||
assets/images/products/
|
||||
assets/images/portfolio/
|
||||
assets/images/portfolio/displays/
|
||||
assets/images/portfolio/personal-crafts/
|
||||
assets/images/portfolio/card-making/
|
||||
assets/images/portfolio/scrapbook-albums/
|
||||
assets/images/blog/
|
||||
```
|
||||
|
||||
3. Add your images to these folders
|
||||
4. Or use placeholder images temporarily (see IMAGE-GUIDE.md)
|
||||
|
||||
### Step 3: Customize Your Content
|
||||
|
||||
#### Update Business Information
|
||||
|
||||
1. Open `contact.html`
|
||||
2. Update:
|
||||
- Phone number
|
||||
- Email address
|
||||
- Business hours
|
||||
- Social media links
|
||||
|
||||
#### Update About Page
|
||||
|
||||
1. Open `about.html`
|
||||
2. Customize:
|
||||
- Your story
|
||||
- Mission statement
|
||||
- Product offerings
|
||||
|
||||
#### Add Your Products
|
||||
|
||||
1. Open `shop.html`
|
||||
2. Find the product cards
|
||||
3. Update:
|
||||
- Product names
|
||||
- Prices
|
||||
- Descriptions
|
||||
- Images
|
||||
|
||||
### Step 4: Customize Colors & Branding
|
||||
|
||||
1. Open `assets/css/main.css`
|
||||
2. Find the `:root` section at the top
|
||||
3. Change the color variables:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--primary-color: #6B4E9B; /* Your brand's main color */
|
||||
--secondary-color: #E91E63; /* Accent color */
|
||||
--accent-color: #FF9800; /* Highlight color */
|
||||
}
|
||||
```
|
||||
|
||||
4. Save and refresh your browser to see changes
|
||||
|
||||
## 🎯 Key Pages Explained
|
||||
|
||||
### 1. Home Page (`index.html`)
|
||||
|
||||
- Main landing page with hero section
|
||||
- Features products and promotions
|
||||
- Links to all other sections
|
||||
|
||||
### 2. Portfolio Page (`portfolio.html`)
|
||||
|
||||
- Showcases your creative work
|
||||
- Links to 4 category pages
|
||||
- Great for displaying past projects
|
||||
|
||||
### 3. Shop Page (`shop.html`)
|
||||
|
||||
- Displays all products
|
||||
- Has filtering by category
|
||||
- Sorting by price functionality
|
||||
|
||||
### 4. About Page (`about.html`)
|
||||
|
||||
- Tell your story
|
||||
- Explain your mission
|
||||
- Build trust with customers
|
||||
|
||||
### 5. Contact Page (`contact.html`)
|
||||
|
||||
- Contact form (currently client-side only)
|
||||
- Business information
|
||||
- Social media links
|
||||
|
||||
### 6. Blog Page (`blog.html`)
|
||||
|
||||
- Share tips and tutorials
|
||||
- Build community
|
||||
- Improve SEO
|
||||
|
||||
## 🎨 Customization Tips
|
||||
|
||||
### Changing Fonts
|
||||
|
||||
In `main.css`, update these variables:
|
||||
|
||||
```css
|
||||
--font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
--font-heading: 'Georgia', serif;
|
||||
```
|
||||
|
||||
### Adjusting Spacing
|
||||
|
||||
Modify these spacing variables:
|
||||
|
||||
```css
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 2rem;
|
||||
--spacing-lg: 3rem;
|
||||
--spacing-xl: 4rem;
|
||||
```
|
||||
|
||||
### Adding New Products
|
||||
|
||||
Copy an existing product card in `shop.html`:
|
||||
|
||||
```html
|
||||
<div class="product-card" data-category="your-category">
|
||||
<div class="product-image">
|
||||
<img src="assets/images/products/your-product.jpg" alt="Product Name">
|
||||
</div>
|
||||
<h3>Your Product Name</h3>
|
||||
<p class="product-description">Product description</p>
|
||||
<p class="price">$XX.XX</p>
|
||||
<button class="btn btn-small">Add to Cart</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 📱 Testing Your Website
|
||||
|
||||
### Test on Different Devices
|
||||
|
||||
1. **Desktop**: Full features and layout
|
||||
2. **Tablet** (768px): Adjusted grid layouts
|
||||
3. **Mobile** (480px): Mobile menu and stacked layout
|
||||
|
||||
### Test in Different Browsers
|
||||
|
||||
- Chrome
|
||||
- Firefox
|
||||
- Safari
|
||||
- Edge
|
||||
|
||||
### Use Browser Developer Tools
|
||||
|
||||
1. Press `F12` in your browser
|
||||
2. Click the device toolbar icon
|
||||
3. Test different screen sizes
|
||||
|
||||
## 🔧 Common Issues & Solutions
|
||||
|
||||
### Issue: Images Don't Show
|
||||
|
||||
**Solution**:
|
||||
|
||||
- Check file paths are correct
|
||||
- Ensure image files exist in the right folders
|
||||
- Check file names match exactly (case-sensitive)
|
||||
|
||||
### Issue: Navigation Menu Doesn't Work on Mobile
|
||||
|
||||
**Solution**:
|
||||
|
||||
- Make sure `main.js` is properly linked
|
||||
- Check browser console for JavaScript errors (F12)
|
||||
- Clear browser cache and reload
|
||||
|
||||
### Issue: Styles Not Applying
|
||||
|
||||
**Solution**:
|
||||
|
||||
- Verify `main.css` is in `assets/css/` folder
|
||||
- Check the CSS file is linked in your HTML
|
||||
- Clear browser cache (Ctrl+Shift+R)
|
||||
|
||||
### Issue: Contact Form Doesn't Submit
|
||||
|
||||
**Note**: The contact form currently works client-side only (shows notification but doesn't actually send emails). To make it functional:
|
||||
|
||||
1. Set up a backend server (PHP, Node.js, etc.)
|
||||
2. Or use a service like Formspree or Netlify Forms
|
||||
3. Or integrate with an email API
|
||||
|
||||
## 🌐 Next Steps: Going Live
|
||||
|
||||
### Option 1: Traditional Web Hosting
|
||||
|
||||
1. Choose a hosting provider (Bluehost, HostGator, etc.)
|
||||
2. Upload files via FTP
|
||||
3. Point your domain to the hosting
|
||||
|
||||
### Option 2: GitHub Pages (Free)
|
||||
|
||||
1. Create a GitHub account
|
||||
2. Create a new repository
|
||||
3. Upload your files
|
||||
4. Enable GitHub Pages in settings
|
||||
|
||||
### Option 3: Netlify (Free)
|
||||
|
||||
1. Create a Netlify account
|
||||
2. Drag and drop your project folder
|
||||
3. Get a free subdomain or connect your own
|
||||
|
||||
### Before Going Live
|
||||
|
||||
- [ ] Add all your images
|
||||
- [ ] Update all content
|
||||
- [ ] Test all links
|
||||
- [ ] Add meta descriptions for SEO
|
||||
- [ ] Set up a contact form backend
|
||||
- [ ] Add Google Analytics (optional)
|
||||
- [ ] Get an SSL certificate (HTTPS)
|
||||
|
||||
## 📊 Adding Analytics
|
||||
|
||||
To track visitors, add Google Analytics:
|
||||
|
||||
1. Create a Google Analytics account
|
||||
2. Get your tracking code
|
||||
3. Add it before the closing `</head>` tag in all HTML files:
|
||||
|
||||
```html
|
||||
<!-- Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR-ID"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'YOUR-ID');
|
||||
</script>
|
||||
```
|
||||
|
||||
## 🛒 Adding E-commerce Features
|
||||
|
||||
The current site has basic "Add to Cart" buttons. To make them functional:
|
||||
|
||||
### Option 1: Shopify Buy Button
|
||||
|
||||
- Easy to integrate
|
||||
- Handles payments securely
|
||||
- No coding required
|
||||
|
||||
### Option 2: WooCommerce
|
||||
|
||||
- Works with WordPress
|
||||
- Full e-commerce features
|
||||
- Requires more setup
|
||||
|
||||
### Option 3: Custom Solution
|
||||
|
||||
- Build shopping cart in JavaScript
|
||||
- Set up payment gateway (Stripe, PayPal)
|
||||
- Requires programming knowledge
|
||||
|
||||
## 📞 Need Help?
|
||||
|
||||
### Resources
|
||||
|
||||
- **HTML/CSS Help**: [MDN Web Docs](https://developer.mozilla.org/)
|
||||
- **JavaScript Help**: [JavaScript.info](https://javascript.info/)
|
||||
- **Web Hosting**: [Netlify](https://www.netlify.com/), [GitHub Pages](https://pages.github.com/)
|
||||
|
||||
### Documentation Files
|
||||
|
||||
- `README.md` - Complete project overview
|
||||
- `IMAGE-GUIDE.md` - Image requirements and tips
|
||||
- `SETUP-GUIDE.md` - This file!
|
||||
|
||||
## ✨ Tips for Success
|
||||
|
||||
1. **Start Simple**: Don't try to add everything at once
|
||||
2. **Test Often**: Check your changes in the browser frequently
|
||||
3. **Use Version Control**: Consider using Git to track changes
|
||||
4. **Backup Regularly**: Keep copies of your work
|
||||
5. **Get Feedback**: Show friends/family and get their input
|
||||
6. **Stay Organized**: Keep your files and folders well-organized
|
||||
|
||||
## 🎉 You're Ready
|
||||
|
||||
Your Sky Art Shop website is ready to customize and launch. Take it step by step, and don't hesitate to experiment!
|
||||
|
||||
Remember:
|
||||
|
||||
- The website is fully responsive and mobile-friendly
|
||||
- All code is well-commented and organized
|
||||
- You can customize colors, fonts, and content easily
|
||||
- Images need to be added before going live
|
||||
|
||||
**Good luck with your Sky Art Shop! 🎨✨**
|
||||
|
||||
---
|
||||
|
||||
*Need to make changes? Just edit the HTML, CSS, or JavaScript files and refresh your browser!*
|
||||
Reference in New Issue
Block a user