Add .NET Core Web API with Vue.js frontend

[Copilot]

This PR implements a complete full-stack application for OceanFishControl with a .NET Core 9.0 Web API backend and Vue.js 3 frontend, addressing the requirement for ".net core webapi with vue".

Overview

The implementation provides a modern, production-ready foundation for the OceanFishControl upper computer controller with clear separation between backend API services and frontend UI.

Backend Implementation

Created an ASP.NET Core Web API project featuring:

• .NET 9.0 with minimal API approach
• CORS configuration allowing requests from Vue frontend (ports 5173 and 3000)
• WeatherForecast API endpoint at /weatherforecast demonstrating REST API patterns
• OpenAPI/Swagger support for API documentation
• Standard Celsius to Fahrenheit temperature conversion using the formula: F = (C × 9/5) + 32

The backend runs on http://localhost:5286 by default.

Frontend Implementation

Created a Vue 3 application using Vite featuring:

• Modern Vue 3 Composition API with <script setup> syntax
• Custom WeatherForecast component that fetches and displays data from the backend API
• Vite proxy configuration routing /api/* requests to the backend for seamless development
• Responsive UI design with gradient header, card-based layout, and hover effects
• Real-time data refresh functionality with loading states and error handling

The frontend runs on http://localhost:5173 by default.

Project Structure

OceanFishControl/
├── backend/                    # .NET Core Web API
│   ├── Program.cs             # API configuration and endpoints
│   ├── Properties/
│   │   └── launchSettings.json
│   └── *.csproj
├── frontend/                   # Vue.js application
│   ├── src/
│   │   ├── components/
│   │   │   └── WeatherForecast.vue
│   │   ├── App.vue
│   │   └── main.js
│   ├── vite.config.js         # Vite with API proxy
│   └── package.json
├── .gitignore                 # Excludes node_modules, bin, obj, dist
└── README.md                  # Complete setup instructions

Key Features

✅ Full-stack integration - Frontend successfully communicates with backend API via CORS-enabled endpoints
✅ Development workflow - Both projects can run concurrently with hot-reload support
✅ Production builds - Both backend and frontend can be built and deployed independently
✅ Clean architecture - Clear separation of concerns between API and UI layers
✅ Developer documentation - Comprehensive README with setup and run instructions

Getting Started

Backend:

cd backend
dotnet restore
dotnet run

Frontend:

cd frontend
npm install
npm run dev

Then navigate to http://localhost:5173 to see the application in action.

Screenshot

The screenshot shows the working application with:

• Branded header displaying "Ocean Fish Control"
• Weather forecast data fetched from the .NET Core API
• Temperature displayed in both Celsius and Fahrenheit
• Responsive card-based layout with weather summaries
• Interactive refresh button for fetching new data

Original prompt

.net core webapi with vue

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.