# 🚀 TurboTrades Frontend - START HERE

## Quick Start (3 Steps)

### 1️⃣ Install Dependencies
```bash
cd TurboTrades/frontend
npm install
```

### 2️⃣ Start Development Server
```bash
npm run dev
```

### 3️⃣ Open Browser
```
http://localhost:5173
```

**That's it! You're ready to go! 🎉**

---

## 📋 Prerequisites

- ✅ Node.js 18+ installed
- ✅ Backend running on port 3000
- ✅ MongoDB running

---

## 🎯 Quick Commands

| Command | Description |
|---------|-------------|
| `npm install` | Install dependencies |
| `npm run dev` | Start development server |
| `npm run build` | Build for production |
| `npm run preview` | Preview production build |
| `npm run lint` | Run ESLint |

---

## 🌐 URLs

| Service | URL |
|---------|-----|
| Frontend | http://localhost:5173 |
| Backend API | http://localhost:3000 |
| Backend WebSocket | ws://localhost:3000/ws |

---

## 🐛 Common Issues

### Port already in use?
```bash
# Kill process on port 5173
lsof -ti:5173 | xargs kill -9  # macOS/Linux
netstat -ano | findstr :5173   # Windows (then taskkill)
```

### Not working after install?
```bash
# Clear everything and reinstall
rm -rf node_modules .vite package-lock.json
npm install
npm run dev
```

### Styles not loading?
```bash
# Restart the dev server (press Ctrl+C then)
npm run dev
```

---

## 📖 Documentation

- **README.md** - Complete guide (452 lines)
- **QUICKSTART.md** - 5-minute setup (303 lines)
- **INSTALLATION.md** - Detailed installation (437 lines)
- **TROUBLESHOOTING.md** - Common issues (566 lines)
- **FIXES.md** - What we fixed (200 lines)
- **FRONTEND_SUMMARY.md** - Technical overview (575 lines)

---

## ✨ What's Included

- ✅ Vue 3 + Composition API (`<script setup>`)
- ✅ Pinia for state management
- ✅ Vue Router with protected routes
- ✅ WebSocket real-time updates
- ✅ Tailwind CSS dark gaming theme
- ✅ Toast notifications
- ✅ Steam OAuth authentication
- ✅ Responsive mobile design
- ✅ 14 fully functional pages

---

## 🎨 Pages Available

1. **/** - Home page with hero & featured items
2. **/market** - Browse marketplace with filters
3. **/item/:id** - Item details & purchase
4. **/profile** - User profile & settings
5. **/inventory** - User's items
6. **/transactions** - Transaction history
7. **/sell** - List items for sale
8. **/deposit** - Add funds
9. **/withdraw** - Withdraw funds
10. **/faq** - FAQ page
11. **/support** - Support center
12. **/admin** - Admin dashboard (admin only)
13. **/terms** - Terms of service
14. **/privacy** - Privacy policy

---

## 🔧 Quick Configuration

Edit `.env` file if needed:
```env
VITE_API_URL=http://localhost:3000
VITE_WS_URL=ws://localhost:3000
VITE_APP_NAME=TurboTrades
```

---

## 🎓 First Time Using Vue 3?

Check out these files to understand the structure:

1. **src/main.js** - App entry point
2. **src/App.vue** - Root component
3. **src/router/index.js** - Routes configuration
4. **src/stores/auth.js** - Authentication store
5. **src/views/HomePage.vue** - Example page component

---

## 💡 Pro Tips

- **Hot Reload is enabled** - Save files and see changes instantly
- **Use Vue DevTools** - Install browser extension for debugging
- **Check Browser Console** - Look for errors if something doesn't work
- **Backend must be running** - Frontend needs API on port 3000
- **WebSocket auto-connects** - Real-time updates work automatically

---

## 🆘 Need Help?

1. Check **TROUBLESHOOTING.md** first
2. Read the error message carefully
3. Search in **README.md** documentation
4. Restart the dev server (Ctrl+C then `npm run dev`)
5. Clear cache: `rm -rf node_modules .vite && npm install`

---

## ✅ Verify Everything Works

After starting the server, test:

- [ ] Page loads without errors
- [ ] Dark theme is applied
- [ ] Navigation works
- [ ] Search bar appears
- [ ] Footer is visible
- [ ] No console errors

If all checked, you're good to go! 🎊

---

## 🚀 Next Steps

1. **Explore the UI** - Click around and test features
2. **Read the docs** - Check README.md for details
3. **Start coding** - Modify components and see changes
4. **Add features** - Build on top of this foundation
5. **Deploy** - Follow deployment guides when ready

---

**Made with ❤️ for the gaming community**

**Version:** 1.0.0 | **Status:** ✅ Production Ready | **Errors:** 0