EnMoTech Environmental Monitoring System WebApp

Project description

This is proudly my first React full website from complete scratch. This app is to run on desktops/laptopsm mobile devices, and moreover; a special Raspberry Pi 7″ touchscreen with a special resolution that will run in kiosk mode (touch only no keyboard). Based on the figma prototype designed for the client by me, I used create-react-app to initiate a new React project. I designed the component hierarchy by myself. Then started writing code as functional components. I worked with the Back-End developer to get the REST API requests fully working on the app. I also used a fake (mockup) REST API server to test requests and data flow.

CLIENT: EnMoTech USA

AREA

WEB DEV

TOOLS

REACT JS
CSS

SITE LANGUAGE

ENGLISH

CLIENT: EnMoTech USA

Project Features

  • Light/Dark theme layouts that user can flawlessly switch between.
  • A special design for mobile devices that follows the modern look of Android/IOS web applications.
  • Error handling
  • Input field advanced validations.
  • CSS animations.
  • A special media query system for the 7″ Raspberry touchscreen (RPi) that the webapp will mainly run on in kiosk mode (no keyboard).
  • A touchscreen keyboard plugin that works only on the 7″ youchscreen resolution.

Figma Prototype

Below is the final figma prototype designed by me for the webapp:

Desktop / Featuring light theme look only

Mobile / Featuring dark theme plus a glimpse of light theme look

WebApp Demo Video

Below is a live demo video (layout/functionality) for the webapp on desktop/laptop, mobile devices and the RPi 7″ touchscreen without keyboard:

Github Repo

A github repo featuring the source code is available for demonstration upon request.

Get in touch!