Fullstack Demo: Vue.js 3 + .NET 10 + PostgreSQL

A fully containerized fullstack application with Vue.js 3 frontend and .NET 10 REST API backend.

Architecture diagram

┌─────────────┐     HTTP/JSON      ┌────────────────────────────────────┐
│   Browser   │ ─────────────────► │   Frontend                         │
│             │                    │   (Vue 3 + Vite)                   │
│             │ ◄───────────────── │   (Dev: Vite; Prod: Nginx static)  │
└─────────────┘                    └────────────────┬───────────────────┘
                                                    │ API calls
                            ┌───────────────────────▼───────────────────────────────┐
                            │               .NET 10 Backend                         │
                            │  Dev: mcr.microsoft.com/dotnet/sdk:10.0 (dotnet run)  │
                            │  Prod: mcr.microsoft.com/dotnet/aspnet:10.0 (runtime) │
                            └───────────────────────┬───────────────────────────────┘
                                                    │
                                        ┌───────────▼────────────┐
                                        │     PostgreSQL DB      │
                                        │   (Postgres container) │
                                        └────────────────────────┘

Services

Service	Port	Tech
Frontend (dev)	3000	Vue.js + Vite
Frontend (prod)	80	Vue.js static (served by Nginx)
Backend	5002	.NET 10
Database	5432	PostgreSQL

Quick Start

# Set your OpenWeatherMap API key
echo "OPENWEATHER_API_KEY=your_api_key_here" >> .env

# Start all services
docker compose up -d

# Or (for development)
docker compose -f docker-compose.yml -f docker-compose.dev.yml up -d

# Stop services
docker compose down

Configuration

Create a .env file:

# OpenWeatherMap Configuration
OPENWEATHER_API_KEY=your_api_key_here

# Database Configuration
DB_NAME=fullstackdb
DB_USER=postgres
DB_PASSWORD=postgres

# Environment
ASPNETCORE_ENV=Development

OpenWeatherMap Setup

1. Get a free API key from openweathermap.org
2. Add it to .env: OPENWEATHER_API_KEY=your_key
3. The backend will proxy OpenWeatherMap requests for security

Useful Commands

# View logs
docker-compose logs -f

# Execute commands in containers
docker-compose exec backend /bin/bash
docker-compose exec frontend /bin/sh
docker-compose exec postgres psql -U postgres -d fullstackdb

# Rebuild images
docker-compose build --no-cache

# Clean everything
docker-compose down -v

Frontend Dependencies

• Vue 3.3+
• Tailwind CSS 4.x
• Shadcn/UI for Vue
• Vite (build tool)

Next Steps

• Add authentication (JWT/OAuth2)
• Implement database migrations with Entity Framework Core
• Add more API endpoints
• Enhance frontend with routing and state management
• Set up CI/CD pipeline (tests: backend + frontend)