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

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).