🚀 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 дээр:

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

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

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

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

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

Хөтөч нээгдэнэ → Homepage харагдана
Login товч дарах → Login хуудас харагдана
Нэвтрэх:
- Username: gank
- Password: Gank2024!
Products → 8 бүтээгдэхүүн харагдана
Сагсанд нэмэх → Ажиллана
Cart badge → Тоо өсөх
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

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

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

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

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

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

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

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!

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

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

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:

GitHub repository үүсгэх
Бүх файл push хийх
Platform дээр project үүсгэх
server.js entry point болгох
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 шаардлагагүй

🔥 Амжилт! 🔥

FilesExpand file tree

README.md

Latest commit

History