TaskFlow is a full-stack task management app built with React, Node.js, and PostgreSQL, containerized using Docker to demonstrate modern DevOps workflows.
TaskFlow is a simple full-stack task management application designed to demonstrate modern DevOps development practices including containerization, service orchestration, API communication, and debugging of real-world deployment issues.
The application allows users to create, view, and delete tasks through a web interface.
The system architecture is composed of three services:
• React frontend • Node.js Express backend API • PostgreSQL database
All services are containerized using Docker and orchestrated with Docker Compose.
Application architecture:
User Browser ↓ React Frontend (Vite) ↓ Node.js Express API ↓ PostgreSQL Database
Docker architecture:
Docker Compose ├── frontend container ├── backend container └── postgres container
Frontend React + Vite
Backend Node.js + Express
Database PostgreSQL
ORM Prisma
Containerization Docker
Orchestration Docker Compose
Version Control Git + GitHub
• Create new tasks • View all tasks • Delete tasks • Full API backend • Persistent database storage • Dockerized multi-container architecture
taskflow-app
backend ├── prisma │ └── schema.prisma ├── src │ └── server.js ├── Dockerfile └── package.json
frontend ├── src │ └── App.jsx ├── Dockerfile └── package.json
docker-compose.yml README.md
GET /tasks Fetch all tasks
POST /tasks Create a new task
DELETE /tasks/:id Delete a task
GET /health Health check endpoint
Start all containers
docker compose up --build
Access the application
Frontend http://localhost:5173
Backend Health Check http://localhost:3000/health
Database PostgreSQL container used for persistent storage.
Backend Node.js Express API container.
Frontend React application served via Docker.
During development the following real-world debugging scenarios were encountered and resolved:
• Docker container crashes • Express routing errors • CORS configuration issues • Docker DNS vs browser DNS differences • Port conflicts during development • Backend service health verification
These debugging steps simulate real challenges encountered in production environments.
• Add user authentication • Implement CI/CD pipeline • Deploy to cloud infrastructure • Add reverse proxy with Nginx • Add automated health checks • Implement monitoring and logging
ARCHITECHURE DIAGRAM User Browser │ │ HTTP Requests ▼ React Frontend (Vite) http://localhost:5173 │ │ REST API ▼ Node.js Express Backend http://localhost:3000 │ │ Prisma ORM ▼ PostgreSQL Database (Docker)
DOCKER ARCHITECTURE
Docker Compose
├── frontend container │ React + Vite │ Port 5173 │ ├── backend container │ Node.js + Express │ Port 3000 │ └── db container PostgreSQL Port 5432
Kennedy Cloud / DevOps Engineer