Goal: Develop a fullstack application with .NET, React, PostgreSQL
Development is done in an agile style with 4 planned sprints and a linked github project page for this specific repo: Experis-Codecool-team-project
The frontend is continuously deployed to Azure Static Web Apps through the GitHub Actions workflow on pushes to main. You can access the deployed frontend here: https://yellow-moss-0111d9403.4.azurestaticapps.net.
The backend is deployed to Azure App Service using the Docker image published by the publish-backend-dockerhub.yml workflow. On updates to main, a new backend image is built, pushed to Docker Hub, and then consumed by the Azure App Service runtime as part of the deployment process.
- .NET SDK 10
- Node.js & npm/pnpm
- Docker & Docker Compose (for containerized development)
- PostgreSQL client (optional, for direct database access)
- Frontend: React (Vite)
- Backend: ASP.NET Core (.NET 10) REST API
- Database: PostgreSQL (Entity Framework Core)
- Reverse Proxy: NGINX
- AUTH: JWT
- Monorepo structure: shared root folder with .env file
- Docker: Everything is dockerized and compose for easy running
- Tooling: Node.js. npm/pnpm. .NET SDK 10
Backend uses dotnet user-secrets for local development. Run these commands to set up your local secrets:
# 1. Navigate to the API project
cd backend/Api
# 2. Initialize user secrets (if not already done)
dotnet user-secrets init
# 3. Set PostgreSQL connection string (adjust username/password as needed)
dotnet user-secrets set "ConnectionStrings:DefaultConnection" "Host=localhost;Port=5432;Database=tvshowlogger;Username=postgres;Password=postgres"
# 4. Set JWT Signing Key (must be at least 32 characters)
dotnet user-secrets set "Jwt:SigningKey" "REPLACE_WITH_A_VERY_LONG_SECRET_KEY_FOR_LOCAL_DEV"The frontend connects to the backend API.
- Local Dev: Defaults to
http://localhost:5173(Vite). - Docker: Served via Nginx at
http://localhost:3000.
flowchart TB
%% Client
User[Browser]
%% Gateway
Nginx[Nginx Reverse Proxy<br>:3000]
%% Services
Frontend[React Frontend<br>Static]
Backend[.NET Backend API<br>:8080]
%% Database
Postgres[(PostgreSQL Database)]
%% External traffic
User --> Nginx
%% Routing
Nginx -->|"served by nginx"| Frontend
Nginx -->|"/api"| Backend
%% Internal services
Backend --> Postgres
class User,Nginx public;
class Frontend,Backend internal;
class Postgres db;
Docker Compose uses the .env.docker file in the root directory for configuration.
-
Create your docker environment file:
cp .env.docker.example .env.docker
-
Open
.env.dockerand update the values:POSTGRES_USER,POSTGRES_PASSWORD,POSTGRES_DBJwt__SigningKey(Required for the API container)
-
Run the application:
docker compose --env-file .env.docker up --build
Ports:
- Frontend (Nginx):
http://localhost:3000(Main entry point) - API (Direct):
http://localhost:8080(For debugging) - PostgreSQL:
localhost:5432
Note: We are exposing port 8080 (API) directly for development and debugging convenience. In a production environment, this port would typically be closed, and all traffic would be routed through the Nginx reverse proxy on port 3000.
For faster development iteration, run just the PostgreSQL container and run the .NET backend and Frontend locally.
dotnet run /backend/Apinpm run dev /frontend
This repository uses GitHub Actions for CI and release automation of frontend and backend artifacts.
graph TD
subgraph Backend [Backend Pipeline]
direction TB
B_CI[CI: build-and-test-backend]
B_CD[CD: publish-backend-dockerhub]
B_CI --> B_CD
B_CD --> B_IMG[(Docker Hub: tvshowlogger-api-csharp)]
B_IMG -. consumed by .-> B_Azure[Azure App Service]
end
subgraph Frontend [Frontend Pipeline]
direction TB
F_CI[CI: build-and-test-frontend]
F_CI --> F_DH[CD: publish-fronted-dockerhub]
F_CI --> F_AZ[CD: azure-static-web-apps]
F_DH --> F_IMG[(Docker Hub: tvshowlogger-frontend)]
F_AZ --> F_Static[Azure Static Web App]
end
F_Static -.-> |linked to Backend API| B_Azure
- Code changes trigger scoped CI workflows based on changed paths (
backend/**orfrontend/**). - Docker publish workflows create versioned images (
latest, tag, and SHA) and sign images with Cosign. - Frontend is deployed to Azure Static Web Apps via the Azure workflow.
- Backend deployment target (Azure App Service) pulls a published backend image as part of the infrastructure/runtime process.
The project-documentation folder contains planning material, architecture notes, diagrams, and references used during development.
- API proposal: project-documentation/api-refactor-proposal.md
- Brainstorming notes: project-documentation/brainstorming.md
- OpenAPI snapshot: project-documentation/openapi-18-02-26.json
- Class diagram draft: project-documentation/diagrams/classv2.txt
- System diagram draft: project-documentation/diagrams/systemdiagram.txt
- Presentation assets: project-documentation/presentations.