# 🚀 Shom Food Website - Setup & Deployment Guide

## Step 1: Initial Setup (5 minutes)

### On Your Computer
1. Extract the zip file to a folder
2. Open terminal/command prompt in that folder
3. Run these commands:

```bash
# Install dependencies
npm install

# Start development server
npm run dev
```

Visit `http://localhost:3000` in your browser ✓

## Step 2: Customize Content (15 minutes)

Edit these files to customize:

### Company Information
**File:** `lib/constants.js`
```javascript
export const companyInfo = {
  name: 'Shom Food Ltd.',          // Change to your name
  email: 'info@shomfood.com',      // Change email
  phone: '+88 02 1234 5678',       // Change phone
  corporateOffice: '123 Food...',  // Add your address
};
```

### Product Categories
**File:** `lib/constants.js` - productCategories
```javascript
export const productCategories = {
  consumer: [
    { id: 1, name: 'Snacks', description: '...' },
    // Add your products here
  ],
};
```

### Translations (English/Bangla)
**File:** `lib/constants.js` - translations
```javascript
export const translations = {
  en: { /* English text */ },
  bn: { /* বাংলা text */ }
};
```

### Colors & Theme
**File:** `tailwind.config.js`
```javascript
colors: {
  primary: {
    600: '#2d8659',  // Main green color
    700: '#1a5038',
  },
}
```

## Step 3: Email Configuration

### Option A: Gmail (Easiest)

1. Go to https://myaccount.google.com/apppasswords
2. Select Mail and Windows Computer
3. Copy the generated password
4. Edit `.env.local`:

```
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=your-email@gmail.com
SMTP_PASS=xxxx xxxx xxxx xxxx
ADMIN_EMAIL=info@shomfood.com
```

### Option B: SendGrid (Free tier available)

1. Sign up: https://sendgrid.com
2. Get API key
3. Edit `.env.local`:

```
SENDGRID_API_KEY=your-api-key
ADMIN_EMAIL=info@shomfood.com
```

## Step 4: Build for Production

```bash
# Create optimized build
npm run build

# Test production build locally
npm start
```

## Step 5: Deploy to Web

### Option 1: Vercel (Recommended - 1 click deploy)

1. Create account: https://vercel.com
2. Connect your GitHub (push code to GitHub first)
3. Click "Deploy" button
4. Done! Your site is live in 30 seconds

**GitHub Setup:**
```bash
git init
git add .
git commit -m "Initial commit"
# Push to GitHub repository
```

### Option 2: Netlify (Also easy)

1. Create account: https://netlify.com
2. Connect GitHub repository
3. Build settings:
   - Build command: `npm run build`
   - Publish directory: `.next`
4. Deploy!

### Option 3: Your Own Server (Linux/Ubuntu)

**Prerequisites:**
- Ubuntu server (VPS)
- SSH access
- Node.js 18+ installed

**Commands:**
```bash
# Connect to server
ssh root@your-server-ip

# Clone your code
git clone your-repo-url

# Navigate to folder
cd shom-food-website

# Install dependencies
npm install

# Set environment variables
nano .env.local
# Paste your environment variables

# Install PM2 (keeps app running)
npm install -g pm2

# Start application
pm2 start npm --name "shom-food" -- start

# Make it start on server restart
pm2 startup
pm2 save
```

### Option 4: Using cPanel/Shared Hosting

1. Upload files via FTP
2. Use cPanel Node.js Manager
3. Set startup file: `npm start`
4. Configure .env variables

## Step 6: Domain Setup

### If using Vercel:
1. Go to project settings
2. Add domain (e.g., shomfood.com)
3. Update DNS records

### If using your server:
1. Update DNS records:
   ```
   A record: your-server-ip
   CNAME: www -> your-domain.com
   ```

2. Install SSL certificate (free):
   ```bash
   sudo apt install certbot python3-certbot-nginx
   sudo certbot certonly --standalone -d yourdomain.com
   ```

## Step 7: Performance Optimization

### Enable Caching
Edit `next.config.js`:
```javascript
module.exports = {
  headers: async () => {
    return [
      {
        source: '/images/:path*',
        headers: [
          { key: 'Cache-Control', value: 'public, max-age=31536000' }
        ]
      }
    ]
  }
}
```

### Image Optimization
Add images to `/public` folder and use Next.js Image component

### SEO Meta Tags
Edit `app/layout.jsx` metadata

## Step 8: Admin Panel Access

No built-in admin panel yet. To add one:

1. Create admin folder: `app/admin/`
2. Add login page
3. Use database to manage products
4. Recommended: Use Sanity, Contentful, or Strapi CMS

## Common Commands Reference

```bash
# Start development
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Check for errors/linting
npm run lint

# Clean cache
rm -rf .next node_modules
npm install
```

## Troubleshooting

### Port 3000 in use?
```bash
npm run dev -- -p 3001
```

### Build fails?
```bash
rm -rf node_modules package-lock.json
npm install
npm run build
```

### Not showing changes?
```bash
# Clear cache and restart
rm -rf .next
npm run dev
```

### Email not working?
1. Check `.env.local` settings
2. Verify email credentials
3. Check spam folder
4. Enable "Less secure apps" for Gmail

## Monitoring & Maintenance

### Set up Error Tracking
```bash
npm install @sentry/nextjs
```

### Monitor Performance
- Use Google Analytics
- Check Vercel Analytics (if using Vercel)
- Monitor Core Web Vitals

### Regular Updates
```bash
npm outdated  # Check for updates
npm update    # Update packages
```

## Security Checklist

- [ ] Change default passwords
- [ ] Enable HTTPS/SSL
- [ ] Add input validation
- [ ] Set up CORS properly
- [ ] Rate limit API endpoints
- [ ] Hide sensitive information
- [ ] Regular security updates
- [ ] Backup database regularly

## Support

For issues:
1. Check README.md
2. Check Next.js docs: https://nextjs.org/docs
3. Check error logs in console
4. Search GitHub issues

---

**Questions?** Contact: info@shomfood.com