re-uploading work

web/QUICKSTART.md

@@ -0,0 +1,123 @@
+# Attune Web UI - Quick Start Guide
+
+Get the Attune Web UI running in 5 minutes.
+
+## Prerequisites
+
+- Node.js 18+ installed
+- Attune API service running (see main README)
+
+## Quick Start
+
+```bash
+# 1. Install dependencies
+cd web
+npm install
+
+# 2. Start development server
+npm run dev
+```
+
+The UI will be available at **http://localhost:3000**
+
+## First Login
+
+The web UI connects to the API service at `http://localhost:8080` by default.
+
+1. Open http://localhost:3000
+2. You'll be redirected to the login page
+3. Enter credentials from your Attune installation
+4. After login, you'll see the dashboard
+
+### Default Test Credentials
+
+If using the development database with seed data:
+- **Username**: `admin`
+- **Password**: (depends on your setup)
+
+## Configuration
+
+The web UI is configured via environment variables:
+
+```env
+VITE_API_BASE_URL=http://localhost:8080  # API service URL
+VITE_WS_URL=ws://localhost:8081          # WebSocket URL (future)
+```
+
+To customize, create `.env.development.local`:
+
+```bash
+cp .env.development .env.development.local
+# Edit values as needed
+```
+
+## Common Tasks
+
+### Build for Production
+
+```bash
+npm run build
+```
+
+Output will be in `dist/` directory.
+
+### Preview Production Build
+
+```bash
+npm run preview
+```
+
+### Generate API Client
+
+When the API changes, regenerate the client:
+
+```bash
+npm run generate:api
+```
+
+This requires the API service to be running.
+
+## Troubleshooting
+
+### "Connection refused" errors
+
+Ensure the API service is running:
+
+```bash
+cd ..
+make dev  # or your preferred method to start services
+```
+
+### Login fails
+
+Check that:
+1. API service is running on port 8080
+2. Database is migrated
+3. User exists in the database
+
+### Build errors
+
+Clear cache and rebuild:
+
+```bash
+rm -rf node_modules/.tmp
+npm run build
+```
+
+## Development
+
+- **Hot Reload**: Changes to files automatically reload
+- **TypeScript**: Full type checking during development
+- **Linting**: Run `npm run lint` to check code
+
+## Next Steps
+
+- Read the full [README.md](./README.md) for detailed documentation
+- Review [Web UI Architecture](../docs/web-ui-architecture.md)
+- Check [TODO](../work-summary/TODO.md) for planned features
+
+## Need Help?
+
+- Check logs in browser DevTools Console
+- Review API responses in Network tab
+- See [Troubleshooting](./README.md#troubleshooting) in README