EN_README.md

Sensor Monitoring System Dahboard

❓ What is the Sensor Monitoring System Dahboard?

The sensor monitoring system allows users to specify a center point and then define different types of sensors within a certain radius of that center point. Each created sensor regularly creates a record according to the reporting period specified when the sensor is created and presents it to the user. The user can observe different data coming from the sensor in real time.

❓ What is the Vue.js 3 ?

Vue (pronounced /vjuː/, like view) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex.

❓ What is the Vite ?

Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

• A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).

• A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

Vite is opinionated and comes with sensible defaults out of the box, but is also highly extensible via its Plugin API and JavaScript API with full typing support.

❓ What is the NodeJS?

Node.js is an open source runtime environment for networked applications, typically server-side. Node.js applications are typically developed using JavaScript, a client-side scripting language.

❓ What is the MongoDB?

MongoDB; MongoDB Inc. It is a scalable, document-based, open source, NoSQL database application developed by C++. MongoDB stores data in JSON type documents, its semantic fields vary from document to document, and the data structure can change over time.

❓ What is the Tailwindcss?

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

It's fast, flexible, and reliable — with zero-runtime.

📚 NPM Packages Used:

Client Side Packages :

• 🔗 Axios
• 🔗 DaisyUI
• 🔗 Pinia
• 🔗 Vue Router
• 🔗 Vue Toastification
• 🔗 Vite
• 🔗 Tailwindcss
• 🔗 Eslint

Server Side Packages :

• 🔗 Cors
• 🔗 Dotenv
• 🔗 Express
• 🔗 Joi
• 🔗 Http-status
• 🔗 Logger
• 🔗 Mongoose
• 🔗 Winston
• 🔗 Socket.io
• 🔗 Nodemon

💾 For Project

Clone with this URL : git clone https://github.com/fatihes1/Sensor-Monitoring-Dahborard-w-Vue3-NodeJS.git

Switch to project directory after cloning : cd Sensor-Monitoring-Dahborard-w-Vue3-NodeJS

Switch to project server: cd server

• ! ! ! Create yourself a .env file by referencing the example_.env file. The project is configured on the cloud using MongoDB Atlas by default. To use the database from your local machine, access the file in the server/v1/src/loaders/db.js directory and configure the await Mongoose.connect(process.env.DB_STRING, . . .) line.

To download the requirements : npm install

To run server : npm run dev

Go back to the project directory and switch to project directory: cd client

To download the requirements : npm install

To run Viye: npm run dev

By default the project will run at : http://localhost:3000/

🚀 Project Pictures

• The project was created as a back-end using as detailed a folder as possible. In this way, the file containing a problem can be easily detected.

• The part where the center point is created is indicated in the image :

• The part where the center point is listed is indicated in the image :

• The part where the sensors are created is indicated in the image :

• The part where the sensors are listed is indicated in the image :

• 404 Not Found Page:

👤 Contact With Me