# ⚡ Quick Start Guide

## 🎯 In 5 Minutes

### 1. Install & Run (2 min)
```bash
cd numerology-cms-frontend
npm install
npm run dev
```

### 2. Open Browser (1 min)
- Go to: `http://localhost:5173`
- You're in! 🎉

### 3. Login (1 min)
- Email: `admin@example.com`
- Password: `admin123`
- Click "Sign In"

### 4. Explore (1 min)
- View Dashboard
- Go to Users page
- Try Add/Edit/Delete

**Done! Your CMS is running.** ✨

---

## 📋 What You Have

| Feature | Status |
|---------|--------|
| 🔐 Authentication | ✅ Ready |
| 👥 User Management | ✅ Ready |
| 🎨 Dark Mode | ✅ Ready |
| 📱 Responsive | ✅ Ready |
| 📊 Pagination | ✅ Ready |
| 🔍 Search | ✅ Ready |
| 💾 Local Storage | ✅ Ready |
| 🎯 Protected Routes | ✅ Ready |

---

## 🔧 Configuration

Create `.env.local`:
```env
VITE_API_URL=http://localhost:3000/api
```

Change the URL to match your backend API.

---

## 📚 Documentation

- **[README.md](./README.md)** - Full documentation
- **[SETUP.md](./SETUP.md)** - Detailed setup
- **[PROJECT_OVERVIEW.md](./PROJECT_OVERVIEW.md)** - Features
- **[API_REFERENCE.md](./API_REFERENCE.md)** - API docs
- **[FILE_INDEX.md](./FILE_INDEX.md)** - All files

---

## 🚀 Next Steps

1. **Customize** - Edit colors, layout, components
2. **Connect Backend** - Update API URL in `.env.local`
3. **Add Features** - Create new pages and components
4. **Deploy** - Build and deploy to production

---

## 💻 Common Commands

```bash
npm run dev              # Start dev server
npm run build            # Build for production
npm run preview          # Preview production build
```

---

## 🎨 Key Features

### Authentication
- ✅ Email/password login
- ✅ Demo credentials included
- ✅ Token refresh automatic
- ✅ Protected routes

### Users Management
- ✅ View all users (paginated)
- ✅ Search users (debounced)
- ✅ Add new user
- ✅ Edit user details
- ✅ Delete user (superadmin only)

### UI/UX
- ✅ Glassmorphism design
- ✅ Dark mode toggle
- ✅ Smooth animations
- ✅ Responsive layout
- ✅ Toast notifications

---

## 🎓 Tech Stack

- **React 18** - UI library
- **Vite** - Build tool
- **Tailwind CSS** - Styling
- **React Router 6** - Routing
- **Axios** - API client
- **React Icons** - Icons
- **Sonner** - Notifications
- **Context API** - State management

---

## 📱 Browser Support

- ✅ Chrome (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Edge (latest)
- ✅ Mobile browsers

---

## ⚙️ System Requirements

- Node.js 16+
- npm 7+
- 500MB disk space
- Modern browser

---

## 🆘 Need Help?

### App won't start
```bash
rm -rf node_modules package-lock.json
npm install
npm run dev
```

### API not connecting
- Check `.env.local`
- Verify backend is running
- Check browser console (F12)

### Dark mode not working
```javascript
// Clear localStorage
localStorage.clear()
// Refresh page
```

---

## 📞 Support

- Check [README.md](./README.md#-troubleshooting)
- Review [API_REFERENCE.md](./API_REFERENCE.md)
- Check browser console for errors

---

## 🎉 You're Ready!

Your premium CMS dashboard is ready to use.

**Happy coding!** 🚀

---

**Created:** February 12, 2026
**Status:** Production Ready ✅
