diff --git a/AI_LOG.md b/AI_LOG.md new file mode 100644 index 0000000..d0b4724 --- /dev/null +++ b/AI_LOG.md @@ -0,0 +1,169 @@ +# AI_LOG.md + +# AI Collaboration Log + +This document summarizes how AI tools were used during the development of this project, the decisions made, and the lessons learned throughout the implementation. + +--- + +# AI Tech Stack + +The following AI tools were used during development: + +- ChatGPT (GPT-5.5) +- GitHub Copilot (VS Code Chat) +- Google Gemini + +Each tool was used for different purposes, including brainstorming, backend implementation, debugging, architecture discussions, and documentation. + +--- + +# Development Journey + +## 1. Choosing the Frontend + +Initially, I was unsure whether to build the frontend using React or a simple static HTML page. + +Since the assignment required an MVP and the frontend only needed to display monitoring results and receive WebSocket updates, I decided to keep it simple and use a static HTML/JavaScript frontend served through Express. + +This reduced unnecessary complexity and allowed me to focus more on the backend implementation. + +--- + +## 2. Designing the Project Structure + +One of my first prompts to GitHub Copilot was to generate a project directory structure. + +The initial suggestion contained many folders, services, configuration files, and abstractions that felt unnecessary for a small MVP. + +Instead of following that structure directly, I simplified it significantly and ended up with a much smaller and easier-to-maintain project. + +Final structure: + +```text +backend/ + database/ + models/ + routes/ + utils/ + app.js + web_socket_server.js + +frontend/ + index.html + scripts.js +``` + +This structure was sufficient for the assignment while remaining easy to understand. + +--- + +# Prompts That Shaped the Project + +Examples of prompts used during development include: + +- "Generate a simple folder structure for a Node.js URL monitoring application." +- "Implement a WebSocket server that broadcasts URL health updates." +- "How should I organize Express routes and controllers?" +- "How can I dynamically update HTML using WebSockets?" +- "Generate a Docker Compose configuration for this application." +- "Create a professional README for this project." + +These prompts were used as starting points rather than copied directly into the final implementation. + +--- + +# Course Corrections + +AI significantly accelerated development, but many generated solutions required refinement before they became production-ready. + +## Simplifying the Architecture + +The first suggested architecture was considerably more complex than necessary for the scope of this assignment. + +I simplified the project by reducing unnecessary layers and keeping only the components required for the MVP. + +--- + +## WebSocket Communication + +While implementing WebSockets, I learned the difference between sending messages to a single client versus broadcasting to all connected clients. + +For example: + +- `ws.send()` sends data to a single connected client. +- Iterating through `wss.clients` and calling `client.send()` broadcasts updates to every connected client. + +This understanding helped implement real-time monitoring correctly. + +--- + +## Asynchronous Processing + +During implementation, I initially used asynchronous iteration in a way that caused the "finished" event to be emitted before all URL checks had completed. + +After debugging, I changed the implementation to wait for all monitoring requests before broadcasting the completion event. + +--- + +## File Path Management + +Initially I used hardcoded relative file paths. + +Through AI discussions and debugging, I learned that using Node.js `path.join()` together with `__dirname` produces more reliable and portable file paths, especially when running inside Docker or from different working directories. + +--- + +## Dynamic UI Updates + +Instead of requiring the user to refresh the page after adding a new URL, I implemented: + +- writing the URL into `urls.json` +- broadcasting the update through WebSockets +- dynamically adding the new row to the table + +This allows new URLs to appear immediately without refreshing the browser. + +--- + +# Development Focus + +The project intentionally prioritizes backend engineering over frontend styling. + +Most development effort was spent on: + +- REST API design +- WebSocket communication +- Health monitoring logic +- Monitoring history +- Dynamic updates +- Error handling +- Dockerization +- Project documentation + +The frontend was intentionally kept minimal because the primary objective of the assignment was demonstrating backend architecture and real-time communication. + +--- + +# Key Learnings + +During this project I improved my understanding of: + +- Express application structure +- REST API design +- WebSocket communication +- Real-time frontend updates +- Broadcasting messages to multiple clients +- Asynchronous programming in Node.js +- Managing JSON-based persistence +- File path handling using `path.join()` +- Dockerizing a Node.js application +- Structuring a maintainable backend project + +--- + +# Reflection + +AI greatly accelerated development by helping generate initial implementations, explain unfamiliar concepts, and assist with debugging. + +However, every generated solution was reviewed, simplified where necessary, and adapted to match the project requirements. Rather than accepting AI-generated code as-is, I treated it as a collaborative tool to explore alternatives, understand implementation details, and make informed engineering decisions. diff --git a/README.md b/README.md index 9f92629..f36a9f4 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,10 @@ A lightweight **URL Health Monitoring** application built with **Node.js, Express, WebSocket, Axios, and Docker**. The application periodically checks the health of registered URLs and updates the frontend in real time using WebSockets. +# Live demo (deployed on Render) + +### https://url-monitor-fsw7.onrender.com + ## Features - Real-time URL health monitoring @@ -276,6 +280,76 @@ setInterval(async () => { --- +## Testing Steps + +Follow the steps below to verify that the application correctly detects both **UP** and **DOWN** states in real time. + +### 1. Start the URL Health Monitor + +Launch the application using Docker (or run it locally). + +```bash +docker compose up +``` + +### 2. Create a Test Server + +Duplicate `backend/app.js` and save it as `backend/app-test.js`. + +Change the port to **3001** (or any unused port): + +```javascript +const PORT = 3001; +``` + +Start the test server: + +```bash +node backend/app-test.js +``` + +### 3. Register the Test URL + +Add the following URL using either: + +- the **Add URL** form in the top-right corner of the dashboard, or +- by appending it directly to `backend/database/urls.json`. + +``` +http://127.0.0.1:3001 +``` + +A new row will be added to the monitoring table automatically, and within the next polling cycle its status should change to: + +``` +Status: UP +``` + +No page refresh is required. + +### 4. Verify the DOWN State + +Stop the test server: + +```bash +Ctrl + C +``` + +Within the next monitoring interval, the dashboard will automatically update the same URL to: + +``` +Status: DOWN +``` + +This confirms that: + +- URL health checks are performed periodically. +- Status changes are detected automatically. +- WebSocket updates are pushed to the frontend in real time. +- No manual page refresh is required. + +# + # Docker Support The project can be run using Docker and Docker Compose. @@ -314,6 +388,120 @@ The `backend/database` directory can be mounted as a Docker volume so that `urls --- +# Deployment Sketch + +## Current MVP Deployment + +The application is currently deployed on **Render** as a single Node.js web service. + +The Express application serves: + +- Static frontend (`index.html`, `scripts.js`) +- REST API endpoints +- WebSocket server +- URL health monitoring service + +Monitoring data is currently stored in JSON files (`urls.json` and `db.json`) for simplicity. + +### High-Level Architecture + +```text + +----------------------+ + | Web Browser | + +----------+-----------+ + | + HTTP / WebSocket + | + v + +------------------------------------+ + | Render Web Service | + |------------------------------------| + | | + | Express.js Application | + | | + | +------------------------------+ | + | | Static Frontend | | + | | index.html | | + | | scripts.js | | + | +------------------------------+ | + | | + | +------------------------------+ | + | | REST API | | + | | GET /api/url | | + | | POST /api/url/register | | + | +------------------------------+ | + | | + | +------------------------------+ | + | | WebSocket Server | | + | | Real-time Status Updates | | + | +------------------------------+ | + | | + | +------------------------------+ | + | | Health Check Service | | + | | Axios Polling | | + | +------------------------------+ | + | | + | backend/database/ | + | urls.json db.json | + +------------------------------------+ +``` + +--- + +# Future Cloud Deployment + +For a production-ready deployment, I would separate the application into managed cloud services. + +```text + +----------------------+ + | Web Browser | + +----------+-----------+ + | + HTTPS / WSS + | + v + +------------------------+ + | Cloud Load Balancer | + +-----------+------------+ + | + v + +-------------------------------+ + | Dockerized Node.js App | + |-------------------------------| + | Express API | + | Static Frontend | + | WebSocket Server | + | Health Monitoring Service | + +---------------+---------------+ + | + +----------------+----------------+ + | | + v v + +---------------------+ +----------------------+ + | PostgreSQL/MongoDB | | Object Storage | + | Registered URLs | | Monitoring History | + +---------------------+ +----------------------+ +``` + +## Infrastructure-as-Code (Example) + +A minimal Docker-based deployment could be provisioned using Docker Compose: + +```yaml +version: "3.9" + +services: + url-health-monitor: + build: . + ports: + - "3000:3000" + restart: unless-stopped + volumes: + - ./backend/database:/app/backend/database +``` + +In a production cloud environment, the JSON files would be replaced by a managed PostgreSQL or MongoDB database, Docker images would be deployed automatically through a CI/CD pipeline, and HTTPS would be provided by the cloud platform. + # Future Improvements - Delete registered URLs