🚀 Surron E-commerce - Бүрэн төсөл

Frontend + Backend бүгд нэг folder-д!

---

📁 Файлууд

surron-complete/
├── 📄 index.html          ← Үндсэн HTML
├── 🎨 styles.css          ← CSS файл
├── ⚙️ app.js              ← Frontend JavaScript
├── 💾 database.js         ← API холболт
├── 🖥️ server.js           ← Backend сервер
├── 📦 package.json        ← Dependencies
├── 📖 README.md           ← Заавар (энэ файл)
├── 🖼️ images/             ← Зургууд
├── 🔤 fonts/              ← Фонтууд
└── 📂 data/               ← Өгөгдөл (автоматаар үүснэ)
    ├── users.json
    ├── products.json
    ├── carts.json
    └── orders.json

---

🚀 Эхлэх

Шаардлагатай:

• ✅ Node.js (https://nodejs.org татах)
• ✅ VS Code эсвэл ямар ч код editor
• ✅ Live Server extension (VS Code-д)

1️⃣ Dependencies суулгах

cd surron-complete
npm install

2️⃣ Backend сервер ажиллуулах

Terminal 1:

npm start

Энэ харагдах ёстой:

==================================================
🚀 СЕРВЕР АЖИЛЛАЖ БАЙНА
==================================================
📡 URL: http://localhost:3000
✅ CORS: Enabled (бүх domain)
👤 Admin: gank / Gank2024!
==================================================

3️⃣ Frontend ажиллуулах

Terminal 2 (эсвэл VS Code):

VS Code дээр:

1. index.html нээх
2. Right click → "Open with Live Server"
3. Хөтөч автоматаар нээгдэнэ: http://127.0.0.1:5500

Эсвэл энгийн хөтөчөөр:

# Зүгээр файл нээх (гэхдээ Live Server дээр илүү сайн)
open index.html

---

🎯 Ажиллаж байгааг шалгах

✅ Амжилттай бол:

1. Хөтөч нээгдэнэ → Homepage харагдана
2. Login товч дарах → Login хуудас харагдана
3. Нэвтрэх:
   • Username: gank
   • Password: Gank2024!
4. Products → 8 бүтээгдэхүүн харагдана
5. Сагсанд нэмэх → Ажиллана
6. Cart badge → Тоо өсөх
7. Logout хийгээд login → Сагс хадгалагдсан байна ✅

❌ Алдаа гарвал:

Console шалгах (F12):

• Failed to fetch → Сервер ажиллаж байгаа эсэхийг шалгах
• CORS error → Сервер restart хийх
• Өгөгдөл харагдахгүй → Terminal лог шалгах

---

💡 Хэрхэн ажилладаг вэ?

Архитектур:

Frontend (Live Server)          Backend (Node.js)
    ↓                                ↓
index.html, app.js             server.js
    ↓                                ↓
database.js                     JSON Files
    ↓                                ↓
API calls →→→→→→→→→→→→→→→→→→  data/*.json

Өгөгдлийн урсгал:

1. Хэрэглэгч нэвтрэх:

   app.js → DB.login() → API POST /auth/login → server.js → users.json
   

2. Сагсанд нэмэх:

   app.js → DB.addToCart() → API POST /cart/:userId/add → server.js → carts.json
   

3. Захиалга үүсгэх:

   app.js → DB.createOrder() → API POST /orders → server.js → orders.json
   

---

📡 API Endpoints

Authentication

POST /api/auth/register  - Бүртгүүлэх
POST /api/auth/login     - Нэвтрэх

Products

GET    /api/products              - Бүх бүтээгдэхүүн
GET    /api/products/:id          - Нэг бүтээгдэхүүн
POST   /api/products              - Нэмэх (Admin)
PUT    /api/products/:id          - Засах (Admin)
DELETE /api/products/:id          - Устгах (Admin)

Cart

GET    /api/cart/:userId          - Сагс харах
POST   /api/cart/:userId/add      - Нэмэх
PUT    /api/cart/:userId/update   - Шинэчлэх
DELETE /api/cart/:userId/remove/:productId  - Хасах
DELETE /api/cart/:userId/clear    - Хоослох

Orders

GET    /api/orders                - Захиалгууд
POST   /api/orders                - Захиалга үүсгэх
PUT    /api/orders/:id/status     - Төлөв өөрчлөх (Admin)
GET    /api/orders/stats/dashboard - Статистик (Admin)

---

👤 Demo Account

Admin:

• Username: gank
• Password: Gank2024!

Бүртгүүлж болно:

• Register хэсэгт очиж шинэ account үүсгэх

---

📊 Хадгалагдах өгөгдөл

data/users.json

[
  {
    "id": "1",
    "username": "gank",
    "email": "gank@surron.mn",
    "password": "hashed...",
    "role": "admin",
    "createdAt": "2024-12-24..."
  }
]

data/products.json

[
  {
    "id": "1",
    "name": "Surron Light Bee X Controller",
    "category": "Electronics",
    "price": 899.99,
    "stock": 15,
    "image": "https://...",
    "description": "..."
  }
]

data/carts.json

[
  {
    "userId": "1",
    "items": [
      {
        "productId": "1",
        "quantity": 2
      }
    ]
  }
]

data/orders.json

[
  {
    "id": "1703...",
    "userId": "1",
    "items": [...],
    "totalAmount": 1799.98,
    "status": "pending"
  }
]

---

🔧 Тохиргоо

Port өөрчлөх

server.js:

const PORT = 3001; // 3000 → 3001

database.js:

const API_URL = 'http://localhost:3001/api'; // 3000 → 3001

CORS тохируулах

server.js:

app.use(cors({
    origin: 'http://127.0.0.1:5500', // Тодорхой domain
    // эсвэл
    origin: '*' // Бүх domain
}));

---

🐛 Troubleshooting

1. Сервер ажиллахгүй байна

# Port эзлэгдсэн эсэхийг шалгах
# Windows:
netstat -ano | findstr :3000

# Mac/Linux:
lsof -i :3000

# Шийдэл: Процесс устгах эсвэл өөр порт ашиглах

2. "Failed to fetch" алдаа

# Сервер ажиллаж байгаа эсэхийг шалгах
curl http://localhost:3000

# Хариу:
{"message":"🚀 Surron API ажиллаж байна",...}

3. Products харагдахгүй

Хөтчийн Console (F12):

// API холбогдож байгаа эсэхийг шалгах
await DB.getAllProducts()

// Хариу: Array харагдах ёстой

4. Login ажиллахгүй

Console шалгах:

await DB.login('gank', 'Gank2024!')

// Хариу:
{success: true, data: {user: {...}}}

5. CORS error

Шийдэл 1: Сервер restart хийх

Ctrl+C
npm start

Шийдэл 2: Live Server port шалгах

Frontend: http://127.0.0.1:5500 байвал OK
Өөр port бол server.js-д CORS засах

---

✨ Онцлогууд

✅ Бүрэн функциональ e-commerce
✅ Admin систем - бүтээгдэхүүн удирдах
✅ Cart систем - сагсанд нэмэх/хасах
✅ Order систем - захиалга үүсгэх
✅ Stock удирдлага - автомат нөөц хасагдах
✅ User authentication - бүртгэл/нэвтрэх
✅ Password encryption - SHA-256 хашлах
✅ Dashboard - админд зориулсан статистик
✅ Search & Filter - хайх, шүүх
✅ JSON хадгалалт - MongoDB шаардлагагүй
✅ Responsive design - mobile-friendly
✅ Glassmorphism UI - орчин үеийн дизайн

---

🎨 UI Features

• 🌟 Glassmorphism navigation
• 🎭 Smooth animations
• 📱 Mobile responsive
• 🎯 Modern minimalist design
• 💫 Interactive hover effects
• 🔔 Cart badge counter
• ✨ Modal windows
• 🎨 Custom scrollbars

---

📝 Scripts

{
  "start": "node server.js"
}

Ашиглах:

npm start              # Сервер ажиллуулах

---

🌐 Deploy хийх

Vercel / Railway / Render:

1. GitHub repository үүсгэх
2. Бүх файл push хийх
3. Platform дээр project үүсгэх
4. server.js entry point болгох
5. Deploy!

Environment Variables:

PORT=3000
NODE_ENV=production

---

🔐 Security Notes

⚠️ Production-д:

• JWT token ашиглах (одоо localStorage)
• HTTPS хэрэглэх
• Rate limiting нэмэх
• Input validation сайжруулах
• MongoDB ашиглах (JSON биш)

---

📚 Технологи

Frontend:

• HTML5
• CSS3 (Glassmorphism)
• Vanilla JavaScript
• Fetch API

Backend:

• Node.js
• Express.js
• CORS
• File System (JSON)

---

🎯 Хэрэглээний жишээ

1. Хэрэглэгч бүртгүүлэх

await DB.register('username', 'email@test.com', 'Password123!');

2. Бүтээгдэхүүн авах

const products = await DB.getAllProducts();
// эсвэл category-оор
const electronics = await DB.getAllProducts('Electronics');

3. Сагсанд нэмэх

await DB.addToCart('product_id', 2); // quantity = 2

4. Захиалга үүсгэх

const cart = await DB.getCart();
await DB.createOrder(cart.items, totalAmount, shippingAddress);

---

💪 Давуу тал

Зүйл	Энэ төсөл	localStorage
Бүх хэрэглэгч ижил өгөгдөл	✅	❌
Сервер дээр хадгалагдах	✅	❌
Хөтөч цэвэрлэхэд устахгүй	✅	❌
Deploy хийж болох	✅	❌
Database шаардлагагүй	✅	✅
Хялбар ойлгогдох	✅	✅

---

📖 Нэмэлт мэдээлэл

Асуулт байвал:

• Console (F12) шалгах
• Terminal лог харах
• README дахин уншаарай

Туслах хэрэгтэй бол: Надад хэлээрэй, би туслаж өгөх болно! 🚀

---

🎉 Амжилт хүсье!

Одоо таны e-commerce систем бэлэн!

✨ Бүрэн функциональ
✨ JSON-д хадгалагдана
✨ Deploy хийхэд бэлэн
✨ MongoDB шаардлагагүй

🔥 Амжилт! 🔥