Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/abz4375/iwds

🌐 IWDS - Integrated Wireless Detection System: A seamless and interactive React-based platform for real-time data management and smooth navigation, optimized for both desktop and mobile devices. 🚀✨
https://github.com/abz4375/iwds

firebase firebase-auth firebase-hosting google-maps-api reactjs

Last synced: about 1 month ago
JSON representation

🌐 IWDS - Integrated Wireless Detection System: A seamless and interactive React-based platform for real-time data management and smooth navigation, optimized for both desktop and mobile devices. 🚀✨

Awesome Lists containing this project

README

        

# 🌐 IWDS - Integrated Wireless Detection System

Welcome to IWDS, an Integrated Wireless Detection System developed as part of the 2024 Engineering & Design Project at IIITDM Jabalpur! This project aims to provide a mobile and integrated approach to environmental monitoring, overcoming the limitations of traditional stationary systems. 🚀

## 📋 Table of Contents
- [Project Overview](#project-overview)
- [Features](#features)
- [Getting Started](#getting-started)
- [Project Structure](#project-structure)
- [Usage](#usage)
- [Contributing](#contributing)
- [License](#license)

## 📖 Project Overview

### Problem Statement
Recent industrial incidents, such as the Vishakhapatnam Gas Leak (2020) and the Ennore Ammonia Gas Leak (2022), highlight the limitations of traditional monitoring systems. These systems are often stationary, costly, and lack real-time data capabilities, making them inadequate for widespread and effective environmental monitoring.

### Need for a Mobile & Integrated Approach
- **Immobility of Traditional Systems**: Limited coverage and high costs.
- **Need for Real-time Data**: Lack of widespread deployment and data accessibility.
- **User-friendly Tools**: Essential for citizen science initiatives and broader applications.

### IWDS as a Solution
- **Mobile Platform**: Equipped with various sensors to collect environmental data.
- **Real-time Alerts**: Generates alerts based on air quality levels.
- **User-friendly Web App**: Provides real-time data access.

## ✨ Features
- **Mobility and Wider Coverage**: Enables data collection across diverse locations.
- **Multi-parameter Sensing**: Measures various environmental parameters.
- **Real-time Data Visualization**: Access data through a user-friendly mobile web app.
- **Diverse Applications**: Suitable for personal monitoring, awareness campaigns, and research.

## 🚀 Getting Started

### Prerequisites
Make sure you have the following installed:
- Node.js (>= 14.x)
- npm (>= 6.x) or yarn (>= 1.x)

### Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/iwds.git
cd iwds
```

2. Install dependencies:
```bash
npm install
# or
yarn install
```

3. Start the development server:
```bash
npm run dev
# or
yarn dev
```

4. Open your browser and navigate to `http://localhost:3000`.

## 🗂 Project Structure
Here's a brief overview of the project's structure:

```
iwds/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ │ ├── Dashboard/
│ │ │ ├── TopBar.jsx
│ │ │ └── ...
│ ├── pages/
│ ├── App.jsx
│ ├── main.jsx
│ └── ...
├── .eslintrc.js
├── package.json
├── README.md
└── ...
```

## 📖 Usage

### Dashboard Navigation
- **TopBar Component**: The top navigation bar that includes essential navigation items like "Logout".
```jsx
const navItems = ["Logout"];
```

### Scroll Effects
- **ElevationScroll**: Adds elevation to the component when the user scrolls.
```jsx
function ElevationScroll(props) {
const { children, window } = props;
const trigger = useScrollTrigger({
disableHysteresis: true,
threshold: 0,
target: window ? window() : undefined,
});
return React.cloneElement(children, {
elevation: trigger ? 4 : 0,
});
}
```

- **ScrollTop**: Scrolls the component to the top when triggered.
```jsx
function ScrollTop(props) {
const { children, window } = props;
const trigger = useScrollTrigger({
target: window ? window() : undefined,
disableHysteresis: true,
threshold: 100,
});
}
```

### Customization
- **PropTypes**: Ensure the components receive the correct props.
```jsx
ElevationScroll.propTypes = {
children: PropTypes.element.isRequired,
window: PropTypes.func,
};

ScrollTop.propTypes = {
children: PropTypes.element.isRequired,
window: PropTypes.func,
};
```

## 🤝 Contributing
We welcome contributions! Please read our [Contributing Guidelines](CONTRIBUTING.md) for more details.

## 📄 License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.