Blog Platform

A full-stack blog application built with .NET 8 Web API backend and React TypeScript frontend, featuring JWT authentication, blog post management, and Docker containerization.

Features

Blog Post Management

• CRUD Operations: Create, read, update, and delete blog posts via REST API
• Categories: Support for "book-recommendations" and "art-of-living" content types
• Admin Authentication: JWT-based authentication for content management
• Public Access: Unauthenticated users can view published posts with filtering
• Rich Content: Support for featured images, summaries, and view tracking

API Endpoints

• POST /api/auth/login - Admin login with JWT token response
• GET /api/posts - List posts (public, with category and pagination filtering)
• POST /api/posts - Create post (admin only)
• GET /api/posts/{id} - Get single post
• PUT /api/posts/{id} - Update post (admin only)
• DELETE /api/posts/{id} - Delete post (admin only)

Admin Interface

• Secure login with JWT authentication
• Post creation and editing forms
• Post management dashboard
• Category filtering and organization

Public Interface

• Homepage with post listings
• Category-based filtering
• Individual post view pages
• Responsive design with Material-UI

Architecture

Backend (.NET 8)

• Blog.Api: Main API project with endpoints and startup configuration
• Blog.Core: Business logic and services layer
• Blog.Models: Data models and entities
• Blog.Migrations: Entity Framework migrations
• Blog.ServiceTests: Integration/service tests

Frontend (React + TypeScript)

• Built with Vite for fast development and building
• Material-UI for consistent component design
• React Router for client-side routing
• ESLint for code quality enforcement

Database

• PostgreSQL for production reliability
• Entity Framework Core for data access
• Automatic migrations and health checks

Infrastructure

• Docker Compose orchestration
• Multi-stage builds for optimized images
• Health checks for all services
• Persistent data volumes

Docker Environment Setup

Prerequisites

• Docker and Docker Compose installed
• Git (to clone the repository)

Quick Start

1. Clone the repository

   git clone <repository-url>
   cd BLOG

2. Start all services

   cd Blog
   docker compose up --build

3. Access the application

   • Frontend: http://localhost:8080
   • Backend API: http://localhost:5001
   • Database: localhost:5432

Service Configuration

The Docker environment includes:

Service	Port	Description
Frontend	8080	React application served by Nginx
API	5001	.NET Web API backend
Database	5432	PostgreSQL database

Default Credentials

• Admin Username: admin
• Admin Password: admin123
• Database: blogdb / postgres / postgres123

Environment Variables

The application uses the following key environment variables (configured in compose.yaml):

# API Configuration
ASPNETCORE_ENVIRONMENT: Development
ConnectionStrings__DefaultConnection: Server=db;Port=5432;Database=blogdb;User Id=postgres;Password=postgres123;
JwtSettings__Key: your-super-secret-jwt-key-that-is-at-least-32-characters-long
AdminCredentials__Username: admin
AdminCredentials__Password: admin123

# Frontend Configuration
VITE_API_URL: /api

Docker Commands

# Start all services in background
docker compose up -d --build

# View logs
docker compose logs -f

# Stop all services
docker compose down

# Remove volumes (reset database)
docker compose down -v

# Start individual services
docker compose up frontend
docker compose up api
docker compose up db

# Run tests (optional)
docker compose --profile testing up servicetests

Troubleshooting

Database Connection Issues

• Ensure PostgreSQL service is healthy: docker compose ps
• Check database logs: docker compose logs db

API Not Starting

• Verify database is running and healthy
• Check API logs: docker compose logs api
• Ensure all environment variables are properly set

Frontend Not Loading

• Verify API is accessible at http://localhost:5001
• Check frontend logs: docker compose logs frontend
• Ensure VITE_API_URL is correctly configured

Development Workflow

1. Make code changes in your IDE
2. Rebuild affected services:

   docker compose up --build api    # For backend changes
   docker compose up --build frontend  # For frontend changes

3. Test changes at http://localhost:8080
4. View logs for debugging: docker compose logs -f [service-name]

Data Persistence

• Database data persists in the postgres_data Docker volume
• To reset the database: docker compose down -v && docker compose up --build

Local Development (Without Docker)

Backend Setup

# From project root
dotnet restore
dotnet build
dotnet run --project src/Blog.Api

Frontend Setup

cd frontend
npm install
npm run dev

Database Setup

• Install PostgreSQL locally
• Update connection string in appsettings.development.json
• Run migrations: dotnet ef database update --project src/Blog.Migrations --startup-project src/Blog.Api

Testing

# Run integration tests
dotnet test src/Blog.ServiceTests

# Run with Docker (includes database)
docker compose --profile testing up servicetests

Technology Stack

Backend

• .NET 8 Web API
• Entity Framework Core with PostgreSQL
• JWT Authentication
• Refit for HTTP clients

Frontend

• React 19 with TypeScript
• Vite build tool
• Material-UI components
• React Router DOM

DevOps

• Docker & Docker Compose
• Multi-stage builds
• Health checks
• Nginx reverse proxy