YoFi.V3

This is the beginning of a structural refactor/rewrite of the YoFi project. YoFi was originally started on .NET Core 2.2, so it's time to modernize!

Currently, I'm collecting domain-independent building blocks of a more modern web stack. Once this is all together and working, I will start bringing actual YoFi code over to this project.

Technology Stack

Frontend

• Nuxt 4 - Vue.js meta-framework
• Vue 3 - Progressive JavaScript framework
• Bootstrap 5 - CSS framework for responsive design
• @coliz/vue-base-controls - Reusable Vue+Bootstrap components
• TypeScript - Type-safe JavaScript

Backend

• .NET 10 - Cross-platform development framework
• ASP.NET Core - Web API framework
• Entity Framework Core - Object-relational mapper (ORM)

Development & Tooling

• .NET Aspire - Cloud-ready stack orchestration
• NUnit - Testing framework
• Playwright - End-to-end testing framework
• pnpm - Fast, disk space efficient package manager

Azure Resources

• Azure Static Web Apps - Hosting for frontend application
• Azure App Service - Managed hosting for web applications
• Azure SQL Database - Managed relational database
• Azure Storage - Cloud object storage for documents and files

Architecture

See ARCHITECTURE.md for detailed architecture documentation and Architecture Decision Records for key design decisions.

graph TB
    User[User Browser]

    subgraph "Frontend"
        Nuxt[FrontEnd.Nuxt<br/>Vue 3 / Nuxt 4]
    end

    subgraph ".NET Backend"
        Backend[BackEnd<br/>ASP.NET Core]
        Controllers[Controllers<br/>HTTP API Layer]
        Application[Application<br/>Business Logic]
        Data[Data.Sqlite<br/>Entity Framework]
        Entities[Entities<br/>Data Models & Interfaces]

        Backend --> Controllers
        Controllers --> Application
        Application --> Data
        Data --> Entities
    end

    subgraph "Development Tools"
        AppHost[AppHost<br/>.NET Aspire]
        WireAPI[WireApiHost<br/>TS Generator]
    end

    User <-->|HTTP| Nuxt
    Nuxt <-->|REST API| Backend
    WireAPI -.->|Generates| Nuxt
    AppHost -.->|Orchestrates| Backend
    AppHost -.->|Orchestrates| Nuxt

    style Nuxt fill:#41b883
    style Backend fill:#512bd4
    style Application fill:#0078d4
    style Data fill:#6db33f

Loading

Project Structure

• src/AppHost - .NET Aspire orchestration
• src/BackEnd - API host
• src/Controllers - HTTP API controllers
• src/Application - Business logic (Features)
• src/Data - Data access layer (Entity Framework)
• src/Entities - Data models and interfaces
• src/WireApiHost - TypeScript API client generator
• src/FrontEnd.Nuxt - Vue/Nuxt user interface
• tests/Unit - Unit tests for Application layer
• tests/Integration.Data - Integration tests for Data layer
• tests/Functional - Functional tests for end-to-end scenarios

Getting Started

For more details about the various environments where the app is built to run, please see ENVIRONMENTS.md.

Running in Container

It's quick and easy to run the app:

1. Clone the repository
2. Ensure Docker is installed and running
3. Build the containers

   ./scripts/Build-Container.ps1
   

4. Run the containers

   ./scripts/Start-Container.ps1
   

This will open a browser window to the running app.

Development Prerequisites

• .NET 10.0 SDK
• Node.js 24+ and pnpm
• Visual Studio 2022 or VS Code with C# Dev Kit

Running Development Environment

1. Clone the repository
2. Ensure all prerequisites installed
3. Install npm packages for the Frontend:

   cd src/FrontEnd.Nuxt
   pnpm install

4. Run the Aspire AppHost:

   cd src/AppHost
   dotnet watch

5. Open the Aspire Dashboard (URL shown in console output)