🐉 Dragon Ball Character Library

A comprehensive full-stack application built with .NET Aspire, React.js, and Azure Container Apps, demonstrating modern cloud-native architecture with Dapr orchestration.

🚀 Overview

This project showcases how to build a modern, cloud-native application using:

.NET Aspire for orchestration and service discovery
React.js + TypeScript for the frontend
ASP.NET Core Web API for the backend
Azure Container Apps for deployment
Dapr for microservices integration
Azure Services (App Configuration, Key Vault, Blob Storage, SQL Database)

🏗️ Architecture

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   React.js      │    │  .NET Web API   │    │  Azure Services │
│   Frontend      │◄──►│   Backend       │◄──►│                 │
│                 │    │                 │    │ • App Config    │
│ • TypeScript    │    │ • Entity FW     │    │ • Key Vault     │
│ • Modern UI     │    │ • Swagger       │    │ • Blob Storage  │
│ • CRUD Ops      │    │ • Health Checks │    │ • SQL Database  │
└─────────────────┘    └─────────────────┘    └─────────────────┘
         │                        │                        │
         └────────────────────────┼────────────────────────┘
                                  │
                    ┌─────────────────┐
                    │ .NET Aspire     │
                    │ Orchestration   │
                    │                 │
                    │ • Service Disc. │
                    │ • Configuration │
                    │ • Observability │
                    └─────────────────┘
                                  │
                    ┌─────────────────┐
                    │ Azure Container │
                    │ Apps + Dapr     │
                    │                 │
                    │ • Auto Scaling  │
                    │ • Load Balancer │
                    │ • Ingress       │
                    └─────────────────┘

🎯 Features

Dragon Ball Character Management

✅ Create new Dragon Ball characters
✅ Read character details and library
✅ Update character information
✅ Delete characters from library

Character Attributes

Name: Character's name (e.g., Goku, Vegeta)
Race: Character's species (e.g., Saiyan, Namekian)
Planet: Home planet (e.g., Earth, Vegeta)
Transformation: Ultimate form (e.g., Ultra Instinct, Super Saiyan Blue)
Technique: Signature attack (e.g., Kamehameha, Final Flash)

Technical Features

🎨 Modern UI: Responsive design with Dragon Ball theme
🔒 Type Safety: Full TypeScript support
🏥 Health Checks: Comprehensive monitoring
📊 API Documentation: Swagger/OpenAPI integration
🔄 Real-time Updates: Live data synchronization
🛡️ Error Handling: Robust error management
📱 Mobile Responsive: Works on all device sizes

🛠️ Technology Stack

Frontend

React.js 18 - UI Library
TypeScript - Type Safety
CSS3 - Modern Styling
Axios - HTTP Client
Create React App - Build Tool

Backend

.NET 8.0 - Runtime
ASP.NET Core - Web Framework
Entity Framework Core - ORM
Swagger - API Documentation
.NET Aspire - Orchestration

Azure Services

Azure Container Apps - Hosting
Azure App Configuration - Configuration Management
Azure Key Vault - Secrets Management
Azure Blob Storage - File Storage
Azure SQL Database - Data Storage

DevOps & Orchestration

Dapr - Microservices Runtime
Docker - Containerization
YAML - Configuration as Code
.NET Aspire - Local Development

🚦 Getting Started

Prerequisites

.NET 8.0 SDK
Node.js 18+ and npm
Docker Desktop
Visual Studio 2022 or VS Code

Local Development

Clone the repository
```
git clone <repository-url>
cd aspire
```
Restore .NET packages
```
dotnet restore
```

Install React dependencies

cd DragonBallLibrary.Web
npm install
cd ..

Run with Aspire
```
cd DragonBallLibrary.AppHost
dotnet run
```
Access the applications
- Aspire Dashboard: http://localhost:15888
- API: http://localhost:5304
- Frontend: http://localhost:3000

Manual Development (Alternative)

Terminal 1 - API Service:

cd DragonBallLibrary.ApiService
dotnet run

Terminal 2 - React Frontend:

cd DragonBallLibrary.Web
npm start

🌐 API Endpoints

Method	Endpoint	Description
`GET`	`/api/characters`	Get all characters
`GET`	`/api/characters/{id}`	Get character by ID
`POST`	`/api/characters`	Create new character
`PUT`	`/api/characters/{id}`	Update character
`DELETE`	`/api/characters/{id}`	Delete character
`GET`	`/health`	Health check
`GET`	`/swagger`	API documentation

Example Character JSON:

{
  "id": 1,
  "name": "Goku",
  "race": "Saiyan",
  "planet": "Earth",
  "transformation": "Ultra Instinct",
  "technique": "Kamehameha"
}

📦 Azure Container Apps Deployment

1. Build Container Images

# API Service
docker build -f DragonBallLibrary.ApiService/Dockerfile -t dragonball-api .

# React Frontend
docker build -f DragonBallLibrary.Web/Dockerfile -t dragonball-web .

2. Push to Azure Container Registry

# Tag images
docker tag dragonball-api dragonballregistry.azurecr.io/dragonball-api:latest
docker tag dragonball-web dragonballregistry.azurecr.io/dragonball-web:latest

# Push images
docker push dragonballregistry.azurecr.io/dragonball-api:latest
docker push dragonballregistry.azurecr.io/dragonball-web:latest

3. Deploy to Azure Container Apps

# Create environment
az containerapp env create \
  --name dragonball-env \
  --resource-group dragonball-rg \
  --location eastus \
  --dapr-enabled

# Deploy API service
az containerapp create \
  --name dragonball-api \
  --resource-group dragonball-rg \
  --environment dragonball-env \
  --image dragonballregistry.azurecr.io/dragonball-api:latest \
  --target-port 8080 \
  --ingress external \
  --enable-dapr \
  --dapr-app-id apiservice

# Deploy Web frontend
az containerapp create \
  --name dragonball-web \
  --resource-group dragonball-rg \
  --environment dragonball-env \
  --image dragonballregistry.azurecr.io/dragonball-web:latest \
  --target-port 3000 \
  --ingress external

🔧 Dapr Configuration

The project includes Dapr components for:

State Store: Azure SQL Database for character persistence
Secret Store: Azure Key Vault for secure configuration
Configuration: Azure App Configuration for dynamic settings
Bindings: Azure Blob Storage for character images

Component Files:

dapr/components/azure-sql.yaml - SQL Database state store
dapr/components/azure-keyvault.yaml - Key Vault secrets
dapr/components/azure-appconfig.yaml - App Configuration
dapr/components/azure-blob-storage.yaml - Blob Storage bindings

📊 Monitoring & Observability

Health Checks

Database Connectivity: Entity Framework health check
Azure Services: Connection validation
Application Health: Custom health endpoints

Logging

Structured Logging: JSON formatted logs
Azure Monitor: Application Insights integration
Dapr Observability: Built-in metrics and tracing

Aspire Dashboard

The Aspire dashboard provides:

Service discovery and status
Distributed tracing
Metrics and telemetry
Configuration management

📁 Project Structure

├── DragonBallLibrary.sln                 # Solution file
├── DragonBallLibrary.AppHost/            # Aspire orchestration
│   ├── AppHost.cs                        # Service definitions
│   └── appsettings.json                  # Configuration
├── DragonBallLibrary.ApiService/         # .NET Web API
│   ├── Data/                            # Entity Framework context
│   ├── Services/                        # Business services
│   ├── Program.cs                       # API startup
│   └── Dockerfile                       # Container config
├── DragonBallLibrary.Web/               # React frontend
│   ├── src/
│   │   ├── components/                  # React components
│   │   ├── services/                    # API services
│   │   ├── types/                       # TypeScript types
│   │   └── App.tsx                      # Main component
│   ├── package.json                     # Dependencies
│   └── Dockerfile                       # Container config
├── DragonBallLibrary.ServiceDefaults/   # Shared configuration
├── dapr/                                # Dapr components
│   └── components/                      # Component definitions
└── deploy/                              # Deployment configs
    └── azure-container-apps/            # Azure Container Apps YAML

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/new-character)
Make your changes
Run tests and ensure build passes
Commit changes (git commit -am 'Add new character feature')
Push to branch (git push origin feature/new-character)
Create a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Dragon Ball franchise by Akira Toriyama
Microsoft .NET Aspire team
Azure Container Apps team
Dapr community
React.js community

Built with ❤️ for the Dragon Ball community and modern cloud-native development

Name		Name	Last commit message	Last commit date
Latest commit History 24 Commits
DragonBallLibrary.ApiService		DragonBallLibrary.ApiService
DragonBallLibrary.AppHost		DragonBallLibrary.AppHost
DragonBallLibrary.BackgroundService		DragonBallLibrary.BackgroundService
DragonBallLibrary.ServiceDefaults		DragonBallLibrary.ServiceDefaults
DragonBallLibrary.Web		DragonBallLibrary.Web
dapr/components		dapr/components
deploy/azure-container-apps		deploy/azure-container-apps
.dockerignore		.dockerignore
.gitignore		.gitignore
DragonBallLibrary.sln		DragonBallLibrary.sln
IMAGE_SETUP.md		IMAGE_SETUP.md
README.md		README.md
azure.yaml		azure.yaml
deploy.sh		deploy.sh
next-steps.md		next-steps.md
package-lock.json		package-lock.json

santypr/aspire

Folders and files

Latest commit

History

Repository files navigation