https://github.com/sujilnt/demodashborad-uidemo
A IOT dashboard that display values from IOT sensor into visualiable charts
https://github.com/sujilnt/demodashborad-uidemo
compressed imagemin jpeg mock mongoose react service-worker webp webpack worbox workbo
Last synced: 3 months ago
JSON representation
A IOT dashboard that display values from IOT sensor into visualiable charts
- Host: GitHub
- URL: https://github.com/sujilnt/demodashborad-uidemo
- Owner: sujilnt
- License: mit
- Created: 2019-07-03T14:36:00.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-11-04T23:41:26.000Z (over 6 years ago)
- Last Synced: 2026-01-03T16:06:23.956Z (6 months ago)
- Topics: compressed, imagemin, jpeg, mock, mongoose, react, service-worker, webp, webpack, worbox, workbo
- Language: JavaScript
- Homepage:
- Size: 15.9 MB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: License.txt
Awesome Lists containing this project
README
# Offline featured IOT analytics tool
Offline featured IoT dashboard from scratch where users can visualise data from the IoT sensors. The user can also generate reports and add new sensors or delete sensor information. This web application can work both on online and offline mode. The technologies I used to develop was React.js, React Blueprint UI library, CSS, webpack, node.js, express.js (REST API), mongoose (mongo DB), service-workers.js, workbox, D3.js or Recharts.js (JavaScript data Visualisation), dweet.io (Realtime Rest API library) and jsonwebtoken.js.The sesnors are taken from Distruptive Technologies. The sensor that is used is from disruptive technologies.
## linting tools
Eslint
## Install
```
git clone https://github.com/sujilnt/ReactNode-ExpressBoilerplate.git`
yarn install
```
## Features and Commands
### `Webpack Bundle Analyzer`
A plugin that Visualizes the size of webpack output files with an interactive zoomable treemap. - **dev** - development mode - **prod** - development mode - **client** - client bundles only will be analysed based on dev or prod mode. - **server** - server bundle only will be analysed based on dev or prod mode .
##### Commands for webpack Analyser
bundle-analyzer:client-dev
bundle-analyzer:client-prod
bundle-analyzer:server-dev
bundle-analyzer:server-prod
### `Webp - Image Format`
Image format that supports lossy and lossless compression, as well as animation and alpha transparency. WebP images are smaller than their JPEG and PNG counterparts—usually on the magnitude of a 25–35% reduction in filesize. This decreases page sizes and improves performance.
A node.js script that convert all images in png or Jpeg format in **_assets_** Folder .
##### Commands for webp - Image Format
node ./utils/covertImgtoWebP.js
All the webp information got insipired from [web.dev](https://web.dev/serve-images-webp).
## Running the Project
##### For Development
```
Client Side Run - yarn run client-dev:watch
Server Side Run - yarn run server-dev
or
yarn run project (running both server and client side)
```
##### For Production
```
Client Side Run - yarn run client-prod:build
Server Side Run - yarn run server-prod:build
or
both build - yarn run build
```
**_Note -1
In production mode all source code files in .js or .css or .html will be minfied and compressed into gzip files using webpack compression algorithm , by default gzip all 91% of browser supports gzip. sever side bundle will be only minfied._**
**_Note - 2
Certain plugins like imagemin are also been used image compression based on suggestion from [web.dev](https://web.dev/use-imagemin-to-compress-images)._**
## Testing
Jest is a delightful JavaScript Testing Framework with a focus on simplicity. There is a **_mock_** folder inside **_src_** directory that is used for mock something like custom image etc. while writing automated test cases.
##### For running all the test cases
`yarn run test:coverage`
## License
The code is available under the [MIT license](License.txt).
deve