Merge branch 'docs/readme' into 'main'

docs(readme): add readme file about the project

See merge request trials9654228/vue-with-websockets!2

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

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
+```

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.

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 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+This directory contains the frontend Vue.js application.
+
+## Purpose
+
+The frontend is a Vue.js application that connects to the backend WebSocket server to receive real-time data and display it in a chart.
+
+## Project Structure
+
+```
+.
+├── index.html
+├── package-lock.json
+├── package.json
+├── public
+│   └── vite.svg
+├── README.md
+├── src                     # Contains Vue.js application
+│   ├── App.vue             # Main app component
+│   ├── assets              # Assets directory
+│   │   └── vue.svg
+│   ├── components          # Components
+│   │   └── LineChart.vue   # Line chart component
+│   ├── main.js             # Vue.js entry point
+│   ├── style.css           # Global css file
+│   └── utils               # Utility functions
+│       ├── formatDate.js   # Timestamp formatting
+│       └── tryCatch.js     # Contains helper function for error handling
+└── vite.config.js
+```
 
-Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).