To-Do List Application

A fully containerized full‑stack To‑Do List application

Demo Video

Tech Stack

• DevOps: Docker & Docker Compose, ELK Stack (Elasticsearch, Filebeat, Kibana)
• Backend: NestJS, MongoDB, RabbitMQ, Redis, Apollo GraphQL
• Frontend: React, Next.js, SCSS, Apollo Client

Last Updated: April 20, 2025

Table of Contents

1. Project Overview
2. Tech Architecture
3. Getting Started
4. Dockerization Rationale
5. Logging & Visualization
6. Kibana Dashboard Import
7. Screenshots
8. License

Project Overview

This application provides GraphQL‑powered CRUD operations for tasks, backed by MongoDB, cached in Redis, and events published to RabbitMQ. All operations emit structured JSON logs that are collected by Filebeat and visualized in Kibana.

Tech Architecture

[Frontend: Next.js] <--GraphQL--> [NestJS Backend]
                             |
                             +--> MongoDB    (store tasks)
                             +--> Redis      (cache list queries)
                             +--> RabbitMQ   (publish task events)
                             +--> Filebeat -> Elasticsearch -> Kibana (logs)

Getting Started

Prerequisites

• Docker & Docker Compose v1.29+
• Node.js v14+ (for local development outside containers)

Local Development (Docker Compose)

1. Clone the repo:

   git clone https://github.com/innovategy/todo-list.git
   cd todo-list

2. Build and start all services:

   docker-compose up --build -d

3. Verify services:

   • Frontend: http://localhost:3000
   • GraphQL API: http://localhost:4000/graphql
   • Kibana: http://localhost:5601

4. Stop services:

   docker-compose down

Dockerization Rationale

• NestJS Backend: Isolated environment, consistent Node version, simplified dependency management.
• React Frontend (Next.js): Encapsulates build/runtime, ensures parity across machines.
• MongoDB: Containerized for data isolation and easy teardown.
• Redis: Ephemeral cache service, container simplifies local setup.
• RabbitMQ: Messaging broker in a container for consistent configuration.
• Elasticsearch: Stateful search engine, containerized for easy orchestration.
• Filebeat: Collects logs from NestJS, container ensures correct version/config.
• Kibana: Visualization UI, container ensures compatibility with Elasticsearch.

Logging & Visualization

• The NestJS app logs every operation in JSON:

  {"timestamp":"...","level":"info","operation":"createTask","taskId":"...","payload":{...}}

• Filebeat harvests /app/logs/*.json and forwards to Elasticsearch.
• Kibana provides a dashboard for tracking CRUD events and errors.

Kibana Dashboard Import

1. Open Kibana at http://localhost:5601.
2. Go to Management > Saved Objects.
3. Click Import, select helm/kibana/kibana-dashboard.json.
4. Apply default index pattern filebeat-*.

Screenshots

CRUD Operations Over Time

License

• 2025 by Innovategy Oy is licensed under CC BY 4.0