From 3c394bddfb6572e404122af649fcdb3144389f22 Mon Sep 17 00:00:00 2001 From: Leons Aleksandrovs <58330666+Skrazzo@users.noreply.github.com> Date: Mon, 7 Jul 2025 22:08:18 +0300 Subject: [PATCH] docs(readme): add readme file about the project Root readme file contains task completion status, as well as intruction on how to run project in development stage using docker compose --- README.md | 71 ++++++++++++++++++++++++++++++++++++++++++++++ backend/README.md | 24 ++++++++++++++++ caddy/README.md | 14 +++++++++ frontend/README.md | 33 +++++++++++++++++++-- 4 files changed, 139 insertions(+), 3 deletions(-) create mode 100644 backend/README.md create mode 100644 caddy/README.md diff --git a/README.md b/README.md index e69de29..0116c95 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,71 @@ +# Vue with WebSockets + +This is a simple project that demonstrates how to use WebSockets with a Vue.js frontend and a Node.js backend. + +## Runnin application + +The application can be run using Docker and Docker Compose. + +### Prerequisites + +- Docker +- Docker Compose + +### Running the application + +To run the application, you can use the following command: + +```bash +docker-compose -f development.yml up --build -d +``` + +This will build and start the frontend, backend, and caddy services in detached mode. + +To stop the application, you can use the following command: + +```bash +docker-compose -f development.yml down +``` + +## Task completions + +### Every task was completed successfully + +- [x] Node.js server that hosts web socket server + - [x] Every 10 seconds, generates random number + - [x] That is in 0 - 100 range, and doesn't go beyond ±30% range of previous number + - [x] Each entry has timestamp + - [x] Saves history of numbers in a json file (max 15 entries) + - [x] Publishes each new entry to web socket clients + - [x] Creates history file if it doesn't exist + - [x] Restores history from history file if it exists + - [x] Has helper class, that simplifies process of saving and restoring history data + - [x] Sends complete history to newly connected clients +- [x] Vue.js frontend application, that connects to web socket, and displays data in real time with line chart + - [x] Connects to web socket server + - [x] Retrieves data, and displays it in line graph + - [x] In line graph, x axis is timestamp, and y axis is the received number + - [x] Each time when new data is received, it is added to the graph + - [x] In graph, there cannot be more that 15 data points + - [x] When history data is loaded, it is added to the graph upon web socket connection + - [x] Last update timestamp is displayed above the graph + - [x] Current connection status (connected/disconnected) is displayed above the graph + - [x] Automatic reconnection every 5 seconds, when websocket is disconnected + +## Project Structure + +``` +. +├── backend # Contains backend server project +├── caddy # Contains caddy configuration for docker +├── development.yml # Development docker-compose file +├── Dockerfile.backend # Docker backend build file +├── Dockerfile.frontend # Docker frontend build file +├── frontend # Contains frontend project +├── README.md +└── scripts # Contains scripts for building and running the application (docker) +``` + +## Honorable mention + +Made with love by **Leons** <3 diff --git a/backend/README.md b/backend/README.md new file mode 100644 index 0000000..d5ccdcb --- /dev/null +++ b/backend/README.md @@ -0,0 +1,24 @@ +# Backend + +This directory contains the backend server for the application. + +## Purpose + +The backend is a WebSocket server that provides real-time data to the frontend. It also serves as a simple API to get the history of the data. + +## Project Structure + +``` +. +├── classes +│   └── HistoryFile.js # HistoryFile class, that provides easy way to save, and read history data +├── consts.js # Contains constants for the application +├── data.json # History file +├── index.js # Entrypoint for backend server +├── nodemon.json # Nodemon configuration file (used inside of docker) +├── package-lock.json +├── package.json +├── README.md +└── utils + └── random.js # Utility that provides random data for backend +``` diff --git a/caddy/README.md b/caddy/README.md new file mode 100644 index 0000000..f6e0787 --- /dev/null +++ b/caddy/README.md @@ -0,0 +1,14 @@ +# Caddy + +This directory contains the configuration for the Caddy web server. + +## Purpose + +Caddy is used as a reverse proxy to route traffic to the appropriate services: + +- Requests to `/` are served by the frontend Vue.js application. +- Requests to `/ws` are proxied to the backend WebSocket server. + +## Project Structure + +- **Caddyfile**: The main configuration file for Caddy. It defines how Caddy should serve the application, including reverse proxying to the frontend and backend services. diff --git a/frontend/README.md b/frontend/README.md index 1511959..d6c67c2 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,5 +1,32 @@ -# Vue 3 + Vite +# Frontend -This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `