paul
6c82958c79
- Implement React frontend with TypeScript and Tailwind CSS - Add scrappbook.de-inspired UI design with photo galleries - Implement authentication, photo viewing, and download features - Add Docker Swarm configuration with Traefik reverse proxy - Set up Drone CI/CD pipeline for automated deployments - Add monitoring stack with Prometheus and Grafana - Create comprehensive deployment documentation - Add simple local development setup with docker-compose.local.yml Features: - Password-protected galleries with expiration warnings - Responsive photo grid with lightbox viewer - Bulk download functionality - Hot reload development environment - Email testing with Mailhog - Production-ready deployment scripts 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
130 lines
2.8 KiB
Markdown
130 lines
2.8 KiB
Markdown
# 🚀 Quick Local Development Setup
|
|
|
|
Get the photo sharing platform running locally in under 2 minutes!
|
|
|
|
## Prerequisites
|
|
- Docker Desktop installed and running
|
|
- Git
|
|
- 4GB RAM available
|
|
|
|
## Quick Start
|
|
|
|
```bash
|
|
# 1. Clone the repository
|
|
git clone <your-repo-url>
|
|
cd wedding-photo-sharing
|
|
|
|
# 2. Start everything
|
|
./start-local.sh
|
|
```
|
|
|
|
That's it! 🎉
|
|
|
|
## What You Get
|
|
|
|
| Service | URL | Description |
|
|
|---------|-----|-------------|
|
|
| Frontend (Dev) | http://localhost:3002 | React app with hot reload |
|
|
| Frontend (Prod) | http://localhost:3000 | Production build |
|
|
| Backend API | http://localhost:3001 | Express API |
|
|
| Mailhog | http://localhost:8025 | Email testing UI |
|
|
|
|
## Default Credentials
|
|
|
|
- **Admin Login**: admin / admin123
|
|
- **Test Gallery**:
|
|
- Create via Admin Panel
|
|
- Password: test123
|
|
|
|
## Common Tasks
|
|
|
|
### View Logs
|
|
```bash
|
|
docker-compose -f docker-compose.local.yml logs -f
|
|
```
|
|
|
|
### Stop Everything
|
|
```bash
|
|
./stop-local.sh
|
|
```
|
|
|
|
### Reset Database
|
|
```bash
|
|
docker-compose -f docker-compose.local.yml exec backend npm run migrate
|
|
```
|
|
|
|
### Add Test Photos
|
|
1. Create a gallery in the admin panel
|
|
2. Get the gallery slug (e.g., `wedding-smith-2024`)
|
|
3. Add photos to: `./storage/events/active/wedding-smith-2024/`
|
|
4. Photos appear automatically!
|
|
|
|
### Access Backend Shell
|
|
```bash
|
|
docker-compose -f docker-compose.local.yml exec backend sh
|
|
```
|
|
|
|
## Development Workflow
|
|
|
|
1. **Frontend Development** (Port 3002)
|
|
- Hot reload enabled
|
|
- Edit files in `./frontend/src`
|
|
- Changes appear instantly
|
|
|
|
2. **Backend Development** (Port 3001)
|
|
- Nodemon watches for changes
|
|
- Edit files in `./backend/src`
|
|
- Server restarts automatically
|
|
|
|
3. **Email Testing**
|
|
- All emails go to Mailhog
|
|
- View at http://localhost:8025
|
|
- No real emails sent!
|
|
|
|
## Troubleshooting
|
|
|
|
### Backend won't start
|
|
```bash
|
|
# Check logs
|
|
docker-compose -f docker-compose.local.yml logs backend
|
|
|
|
# Rebuild
|
|
docker-compose -f docker-compose.local.yml build backend
|
|
```
|
|
|
|
### Frontend build issues
|
|
```bash
|
|
# Clear cache and rebuild
|
|
docker-compose -f docker-compose.local.yml exec frontend-dev npm run build
|
|
```
|
|
|
|
### Port conflicts
|
|
Edit `docker-compose.local.yml` and change the port mappings:
|
|
- Backend: Change `3001:3000` to `XXXX:3000`
|
|
- Frontend: Change `3002:5173` to `YYYY:5173`
|
|
|
|
### Reset everything
|
|
```bash
|
|
# Stop and remove all data
|
|
docker-compose -f docker-compose.local.yml down -v
|
|
rm -rf data storage logs
|
|
./start-local.sh
|
|
```
|
|
|
|
## Tips
|
|
|
|
- 📧 Check Mailhog for all emails
|
|
- 🔄 Frontend auto-refreshes on save
|
|
- 📁 SQLite DB at `./data/photo_sharing.db`
|
|
- 🖼️ Photos in `./storage/events/active/`
|
|
- 📝 Logs in `./logs/`
|
|
|
|
## Next Steps
|
|
|
|
1. Create your first gallery via Admin Panel
|
|
2. Upload some test photos
|
|
3. Test the gallery with password
|
|
4. Check expiration warnings
|
|
5. View emails in Mailhog
|
|
|
|
Happy coding! 🎨 |