Weather Dashboard - React + .NET 10 API

A full-stack weather application with a React frontend and .NET 10 API backend, containerized for easy deployment to Synology NAS and other environments.

🎯 Features

• React Frontend: Modern, responsive weather dashboard with Tailwind CSS
• .NET 10 API: Minimal Web API serving 5-day weather forecasts
• Docker Ready: Pre-configured for easy deployment
• Synology Compatible: Deploy directly to Synology Container Manager
• CORS Enabled: Frontend and API communication pre-configured

📁 Project Structure

React-Codex-Demo/
├── react-codex-demo/          # React frontend (Vite + TypeScript)
│   ├── src/
│   │   ├── App.tsx           # Main app component
│   │   ├── Weather.tsx       # Weather forecast component
│   │   └── main.tsx
│   ├── package.json
│   └── vite.config.ts
│
├── api/                        # .NET 10 Minimal API
│   ├── Program.cs            # API setup and endpoints
│   ├── WeatherApi.csproj     # Project file
│   └── Properties/
│
├── Dockerfile.api             # .NET API container
├── Dockerfile.frontend        # React frontend container
├── docker-compose.yml         # Docker Compose config
├── .dockerignore              # Docker build excludes
├── .env.example               # Environment variables template
│
├── QUICKSTART.md              # Quick deployment guide
├── DOCKER_DEPLOY.md           # Detailed deployment guide
└── README.md                  # This file

🚀 Quick Start

Option 1: Local Development

Frontend (React):

cd react-codex-demo
npm install
npm run dev
# Access at http://localhost:5173

API (.NET):

cd api
dotnet restore
dotnet run
# Access at http://localhost:8080/api/weather

Option 2: Docker (Recommended for Synology)

Build and run locally:

# Windows
build-and-run.bat

# macOS/Linux
docker-compose up -d

Deploy to Synology NAS: See QUICKSTART.md for step-by-step guide

🌐 API Endpoints

Weather Forecast

GET /api/weather

Response:

[
  {
    "date": "2026-02-16",
    "temperatureC": 22,
    "temperatureF": 72,
    "summary": "Mild"
  },
  ...
]

🐳 Docker Deployment

Containers Included

Service	Port	Container	Image
Frontend	3000	weather-frontend	node:20-alpine
API	8080	weather-api	dotnet:10.0

Network Configuration

• Both containers run on weather-network bridge
• Frontend to API communication via internal http://weather-api:8080
• Health check enabled on API (30s intervals)

📋 Requirements

For Local Development

• Node.js 20+
• .NET 10 SDK
• Docker & Docker Compose (for containerized deployment)

For Synology NAS

• Synology Container Manager installed
• 2GB+ free storage
• Network ports 3000 and 8080 available

🔧 Environment Variables

See .env.example for configuration options:

ASPNETCORE_ENVIRONMENT=Production
ASPNETCORE_URLS=http://+:8080
REACT_APP_API_URL=http://weather-api:8080

📚 Documentation

• QUICKSTART.md - 3-step deployment guide
• DOCKER_DEPLOY.md - Complete deployment documentation
• api/README.md - API-specific information

🐛 Troubleshooting

Containers won't start?

1. Check Docker installation: docker --version
2. Ensure ports 3000 and 8080 are available
3. Review logs: docker-compose logs

Frontend can't reach API?

1. Verify API container is running: docker ps
2. Check REACT_APP_API_URL is set correctly
3. Review browser console for CORS errors

Synology deployment issues?

See "Troubleshooting" section in DOCKER_DEPLOY.md

🛠️ Technology Stack

Frontend

• React 18 - UI framework
• Vite - Build tool
• TypeScript - Type safety
• Tailwind CSS - Styling

Backend

• .NET 10 - Framework
• C# - Language
• Minimal APIs - API pattern
• CORS - Cross-origin support

Infrastructure

• Docker - Containerization
• Docker Compose - Orchestration
• Alpine Linux - Lightweight base images

📦 Building for Production

Local Build Commands

API:

cd api
dotnet publish -c Release -r win-arm64 --self-contained

Frontend:

cd react-codex-demo
npm run build

Docker Build Commands

# Build all images
docker build -f Dockerfile.api -t weather-api:latest .
docker build -f Dockerfile.frontend -t weather-frontend:latest .

# Or use compose
docker-compose build

🔐 Security Notes

• Change default ports if exposing to internet
• Use reverse proxy (nginx, traefik) for HTTPS
• Restrict API to trusted origins in CORS config
• Keep containers updated regularly

📝 License

This project is an example Weather Dashboard application.

🆘 Support

For deployment issues on Synology:

1. Check QUICKSTART.md
2. Review DOCKER_DEPLOY.md
3. Check Container Manager logs for errors

🔄 Version History

• v1.0 (Feb 15, 2026) - Initial release with React frontend, .NET 10 API, Docker support

---

Happy forecasting! 🌤️