Table of Contents
rESPonder is the client-facing segment of a multi-tier Internet of Things (IoT) application aimed at assisting emergency services in organizing and managing disaster relief situations.
As the name suggests, the platform benefits from the use of ESP32 microcontrollers (i.e., r-ESP-onder) as the basis of data acquisition. A network of autonomous ESP32 microcontrollers is programmed to detect Wi-Fi devices within their vicinity, gathering various metrics such as RSSI, which are transmitted via LoRa to a custom ESP32-based centralized node. From there, the data is relayed via MQTT to AWS, where it is processed and stored using IoT Core and DynamoDB, respectively.In the cloud domain, Lambda functions are employed to calculate distances from deployed ESP nodes using RSSI-based proximity calculation formulas. An API serves this information to the rESPonder front-end client, originally hosted on S3.
The current (v2) implementation is an updated version of the original front-end, designed to demonstrate the final product and enhance user-friendliness. Key features of this implementation include:
- Implementation of Mock Service Worker to periodically fetch randomized sensor data, simulating data retrieval from the original deployment of ESP sensors and AWS infrastructure (which is no longer active).
- Utilization of React Router for routing and re-rendering only the content element, maintaining consistency across foundational elements such as the header and sidebar.
- Integration of the Context API to manage information such as the selected sensor throughout various sections of the application. Secondary logic relies on efficient context handling for data flow and state management.
- Integration of Leaflet for the purpose of displaying sensor locations and data on a real-world map.
To get a local deployment up and running, please follow these simple example steps.
A latest version of npm is needed to install all necessary packages and run the project.
npm install npm@latest -gIt is recommended to use node v.20.13.1 .
Follow the steps below to get the project up and running:
- Clone the repo
git clone https://github.com/dimikmps/rESPonder-v2.git
- Install NPM packages
npm install
- Serve locally
npm run start
This section displays the current locations of sensors deployed in the Paliouri, Chalkidiki (GR) area, which was selected for the experimental deployment in the original implementation. Users can view all deployed sensors or select a specific one from the main dropdown menu.
A central node, located on a government building, is always visible on the map. This node relays sensor data from nearby areas to the cloud-based (AWS) back-end service. The blue circle on the map represents a 6km radius, indicating the optimal LoRa communication range.
Clicking on each sensor icon provides additional information, such as its coordinates and a link to the specific sensor's data streaming page.
The main dropdown menu allows users to choose between displaying each of the three deployed sensors individually or all sensors simultaneously.
Sensor data is retrieved and updated every second.
This section provides real-time streaming data from the sensors, including the number of registered and unregistered devices near the selected sensor. Users can choose to display data for a specific sensor via the dropdown menu. The data is updated every second.
This section displays RSSI-based proximity data, calculated by AWS Lambda every five seconds. It includes information about pre-registered devices near each sensor and offers sorting capabilities through a table to help identify the closest registered devices (and potential users) in the area.
The displayed data is updated every five seconds and corresponds to the sensor currently selected via the main dropdown menu. Any device present in the selected sensor's proximity will appear in the table.
- App-wide Components
- Add Main content component
- Add Header component
- Add Footer component
- Add Routing
- Add Error boundary component
- Linting/formatting
- Add formatting configuration
- Add pre-commit linting and formatting
- App Pages/Views
- Add Homepage
- Add Sensor Readings page
- Add Map page
- Add Device Proximity page
- Add Contact page
- Add About page
- API/Sensor Data
- Create data interfaces as per original rESPonder imlementation
- Create mock API to fetch sensor streaming data
- Create mock API to fetch map-related data
- Create mock API to fetch proximity-related data
- Multiple sensors handling
- Create selected sensor Context
- Extend APIs
- Refactor pages/components to acommodate changes
See the open issues for a full list of proposed features (and known issues).
Dimitris Kampas - LinkedIn
Project Link: https://github.com/dimikmps/rESPonder-v2