stephen/apartment-dashboard

Fork 0

Files

Stephen Minakian c1a7857787

Deploy Apartment Dashboard / deploy (push) Successful in 10m0s

Details

Added readme

2025-07-15 17:06:01 -06:00

8.8 KiB

Raw Blame History

🏠 Country Club Towers & Gardens - Apartment Dashboard

A real-time React dashboard for monitoring apartment availability, pricing trends, and market analytics at Country Club Towers & Gardens.

🚀 Live Dashboard

URL: https://apartments.maverickapplications.com

📋 Features

📊 Overview Dashboard

Real-time metrics: Available units, new units today, rented units, turnover rate
Price trend charts: 15-day moving average with area charts
Unit availability tracking: Visual representation of market supply
Floor plan distribution: Pie chart showing unit types by plan
Recent activity feed: New units, rentals, and price changes

🏠 Available Units View

Interactive unit cards with detailed information
Priority highlighting for Maroon Peak units (< $3,800)
Filtering options by floor plan and bedroom count
Price range visualization showing current price position
Detailed unit modal with price history charts

📈 Market Analytics

Price distribution by floor plan
Market insights with actionable recommendations
Trend analysis and activity indicators

🛠️ Technology Stack

Frontend: React 18 + Vite
Styling: Tailwind CSS
Charts: Recharts
Icons: Lucide React
Deployment: Docker + Nginx
CI/CD: Gitea Actions
Reverse Proxy: Traefik with SSL

🔄 Development Workflow

Local Development

# Clone the repository
git clone https://git.maverickapplications.com/stephen/apartment-dashboard.git
cd apartment-dashboard

# Install dependencies
npm install

# Start development server
npm run dev
# App will be available at http://localhost:5173

# Build for production
npm run build

Making Changes

Create a new branch (optional but recommended):
```
git checkout -b feature/your-feature-name
```
Make your changes and test locally

Commit and push:

git add .
git commit -m "Description of your changes"
git push origin main  # or your branch name

Automatic deployment: The Gitea Actions workflow will automatically:
- Build the React app
- Create a Docker image
- Deploy to production
- Make it available at https://apartments.maverickapplications.com

🚀 Deployment Architecture

Current Setup

Source: Gitea repository (git.maverickapplications.com)
CI/CD: Gitea Actions with Act runner
Container: Docker with Nginx serving built React app
Routing: Traefik reverse proxy with automatic SSL
Domain: apartments.maverickapplications.com

File Locations

Source code: Git repository only
Running app: Docker container (apartment-dashboard)
Built files: Inside container at /usr/share/nginx/html
Docker Compose: Exists only during CI/CD deployment (not persisted on host)
Management: Use direct Docker commands or redeploy via Gitea Actions

Auto-restart Behavior

✅ The app will automatically restart after server reboots due to restart: unless-stopped in docker-compose.yml

🔧 Operational Commands

Check App Status

# Check if container is running
docker ps | grep apartment-dashboard

# View container logs
docker logs apartment-dashboard

# Check detailed container info
docker inspect apartment-dashboard

Manual Control

Note: Since the app is deployed via CI/CD, there's no persistent docker-compose.yml on the host filesystem. Use Docker commands directly:

# Stop the app
docker stop apartment-dashboard
docker rm apartment-dashboard

# Restart the app (redeploy)
# Push a new commit to trigger redeployment, or manually trigger workflow in Gitea Actions

# Restart existing container
docker restart apartment-dashboard

# View logs in real-time
docker logs -f apartment-dashboard

# Quick restart without rebuild
docker restart apartment-dashboard

For full redeployment: Go to Gitea Actions tab and manually trigger the workflow, or push a new commit.

Troubleshooting

# Check Traefik routing
curl -I https://apartments.maverickapplications.com

# Check if Traefik sees the service
# Visit: https://traefik.maverickapplications.com

# Test container directly (bypass Traefik)
docker exec apartment-dashboard curl -I http://localhost:80

# Check container filesystem
docker exec apartment-dashboard ls -la /usr/share/nginx/html

🔄 CI/CD Pipeline

The deployment pipeline is fully automated through Gitea Actions:

Workflow Trigger

Push to main branch → Automatic deployment
Manual trigger → Available in Actions tab

Pipeline Steps

Checkout code from Gitea
Setup Node.js environment
Install dependencies (npm ci)
Build React app (npm run build)
Build Docker image with Nginx
Deploy to server and start container
Verify deployment is successful

Workflow File

.github/workflows/deploy.yml - Contains the complete deployment pipeline

📁 Project Structure

apartment-dashboard/
├── src/
│   ├── App.jsx              # Main dashboard component
│   ├── index.css            # Global styles + Tailwind
│   └── main.jsx             # React entry point
├── public/                  # Static assets
├── .github/workflows/
│   └── deploy.yml           # Gitea Actions workflow
├── docker-compose.yml       # Container orchestration
├── Dockerfile               # Multi-stage build config
├── nginx.conf               # Nginx configuration
├── package.json             # Dependencies and scripts
├── tailwind.config.js       # Tailwind CSS configuration
└── README.md                # This file

🔐 Security & Performance

Security Features

SSL/TLS: Automatic Let's Encrypt certificates via Traefik
Security headers: Configured in Nginx
Network isolation: Container runs in Traefik network only

Performance Optimizations

Multi-stage Docker build: Minimal production image
Nginx caching: Static assets cached for 1 year
Gzip compression: Enabled for all text assets
Production build: Optimized React bundle

🔄 Integration with Apartment Scraper

Current Status

The dashboard displays mock data that matches your MongoDB structure:

Daily summaries (new units, rented units, turnover rates)
Unit details (pricing, floor plans, availability)
Price history and trends
Market analytics

Next Steps for Live Data

To connect real data from your apartment scraper:

Create API backend (Express.js + MongoDB)
Add API endpoints:
- GET /api/daily-summary
- GET /api/price-history
- GET /api/available-units
- GET /api/recent-activity
Update React app to fetch from API instead of mock data
Deploy API backend through same CI/CD pipeline

📊 Data Structure

The dashboard expects data in this format (matching your MongoDB collections):

Daily Summary

{
  date: "2025-01-15",
  newUnits: 3,
  rentedUnits: 5,
  staleUnits: 1,
  netChange: -3,
  turnoverRate: 8.2,
  totalAvailable: 47
}

Available Units

{
  unitCode: "W2506",
  planName: "Maroon Peak",
  bedCount: 2,
  bathCount: 2,
  area: 1089,
  currentPrice: 3750,
  minPrice: 3650,
  maxPrice: 3850,
  daysAvailable: 12,
  community: "Country Club Towers"
}

🚨 Emergency Procedures

If App is Down

Check container status: docker ps | grep apartment-dashboard
View logs: docker logs apartment-dashboard
Quick restart: docker restart apartment-dashboard
Full redeploy: Push new commit or manually trigger Gitea Actions workflow
Check Traefik: Visit traefik dashboard

If Server Reboots

✅ No action needed - Container will auto-restart

If Domain Not Accessible

Check DNS: nslookup apartments.maverickapplications.com
Check Traefik: Visit https://traefik.maverickapplications.com
Check container: docker ps | grep apartment-dashboard
Check logs: docker logs traefik

📞 Support Information

Main infrastructure: /media/stephen/Storage_Linux/infrastructure/
Traefik dashboard: https://traefik.maverickapplications.com
Gitea repository: https://git.maverickapplications.com
Harbor registry: https://registry.maverickapplications.com

Useful Links

Apartment scraper cron jobs: Located on server
Email reporting: run_email_report.sh
Data collection: run_scraper.sh

📝 Version History

v1.0: Initial dashboard with mock data
Future: API integration for live apartment data

🤝 Contributing

Create feature branch
Make changes
Test locally with npm run dev
Push to repository
Gitea Actions will automatically deploy

Dashboard URL: https://apartments.maverickapplications.com

8.8 KiB Raw Blame History