# Quick Development Mode Setup

## ⚡ 30-Second Start

```bash
# Make sure you're in the project root
cd /home/sorti/projects/CIA/e-voting-system

# Start development mode
./dev-mode.sh start
```

That's it! Your frontend will be running with:
- ✓ Hot reload on every file change
- ✓ Full console logs in Docker
- ✓ TypeScript type checking
- ✓ Source maps for debugging

## 📺 View Logs in Real-Time

Open a **new terminal** and run:

```bash
./dev-mode.sh logs
```

Now you'll see every log from:
- Next.js startup messages
- Component renders
- API calls
- Console.log() statements
- Errors with full stack traces

## 🌐 Access Your App

Open in browser: **http://localhost:3000**

Press `F12` to open DevTools and see:
- Console logs from both server and client
- Network requests to `/api/`
- Component hierarchy in React DevTools

## 🛑 Stop Development Mode

```bash
./dev-mode.sh stop
```

## 📝 Edit Files

1. Edit any file in `frontend/` directory
2. Save
3. Next.js detects change (~500ms)
4. Browser auto-refreshes
5. See console logs in terminal

**No container rebuild needed!** 🎉

## 🆘 Troubleshooting

**Can't see logs?**
```bash
./dev-mode.sh logs
```

**Port 3000 in use?**
```bash
lsof -ti:3000 | xargs kill -9
./dev-mode.sh start
```

**Need a shell in container?**
```bash
./dev-mode.sh shell
```

---

## 🎯 Common Dev Tasks

| Task | Command |
|------|---------|
| Start dev | `./dev-mode.sh start` |
| View logs | `./dev-mode.sh logs` |
| Stop dev | `./dev-mode.sh stop` |
| Rebuild after npm install | `./dev-mode.sh rebuild` |
| Open shell | `./dev-mode.sh shell` |
| Check status | `./dev-mode.sh status` |

---

## 🚀 Next Steps

1. ✓ Start dev mode: `./dev-mode.sh start`
2. ✓ View logs: `./dev-mode.sh logs` (in another terminal)
3. ✓ Open browser: http://localhost:3000
4. ✓ Edit some code and see instant updates!

For more info, see [DEV_MODE.md](./DEV_MODE.md)