DEV Community

loading...
Cover image for PWA Universal Controller

PWA Universal Controller

Raghav Dhingra
Google DSC Lead | Software Development Engineer | Google Cloud Student Mentor | IoT Enthusiast
・3 min read

#Control anything around the world

Surprising? Obvio not, all the traditional machines and softwares are being replaced with modernized technology.
Therefore, my concepts and belief also substitute with new ideas.

I am really fascinated by the world being changed so rapidly with up-to-date designs, plans, structures in terms of software as well as hardware. Not long ago, I have been engrossed in electronics and communication.
P.S. I am not an electronics or electrical student (^_^)/
Being from a software background, it kick-starts the ability to integrate my software skills with the hardware.

I am wandering around IoT stuffs for few months, and playing with different components and modules in my leisure time.
Begin to test out the knowledge while developing some astonishing devices, may not be the as good insight as others. But yeah, will share it soon.

Inspiration for the project

The project where I have taken an inspiration from, a simple remote control car. I wish to try out a different approach of controlling through a mobile, again ordinary, but not for me.
I had build a car using simple components, NodeMCU (ESP8266), and a motor driver bridge (L298N).
Along with it, I had used the Blynk android application as a medium for controlling. That was my first incredible experience in the field of IoT. Though already made some small projects,but it was just insane.

Still, want to take it to a higher level. It has a major dependency on an application - Blynk, which I have not developed. I wish to have some personal up-gradation but have no control over it. Also, it has a limitation of connection. The device and the mobile have to be connected over the same wifi network. Again, we can operate through an android mobile application.
#restrictions ヽ(ಠ_ಠ)ノ

Hence, after days of research, got upon a distinct process of communication via MQTT protocol.
I had some experimentation and exploration about the protocol. This is a very lightweight protocol for messaging transmission that follows a pattern of pub/sub.
MQTT Structure

Again, analysis over the scalability factor, efforts for integration over the web. Subsequently, initiated the react application, and set up the MQTT broker over the EC2, again, I don't want to use publicly available brokers due to configuration restrictions.
Finalized the flow, and implemented within few weeks. Cumulatively, it's not more than a week task, but due to other activities alongside, and the research part took more than a month.
After weeks-long work, got the application and the device ready for use.
Currently, anyone around the world can control the IoT device in my room. The only restriction is that the device/car should be connected to the internet.
The current application is a PWA, hence can be installed as a native application over any platform, whether it's Windows, Mac, Linux, Android, Ios, and any other.
For PWA, I have used the service workers to cache all the application data inside and serves when the browser is offline. (But can't control the device)
PWA Structure

Multiple controllers can control the device at one time, hence can have disturbance seen, if so (≧∇≦)/.
I have tested the controller and car with some friends over a meet. A delay of 120 ms can be seen while controlling the device due to the internet and the network latency.

Dashboard View
Controller View

You can view the demo video at

Test out the controller at controller.raghavdhingra.com
Username: raghavdhingra
Password: qwerty1234

Now you have the master control for the car and all my future devices. But will change the password soon 😜

If you wish to have a live demo and play with it, you can mail me at admin@raghavdhingra.com

Do give it a like and follow me up on GitHub: github.com/raghavdhingra

Tech Stack

Frontend - ReactJs, Recoil
Broker - Mosquitto MQTT broker
IoT - C++

Broker deployed on AWS EC2
Frontend deployed on Netlify

Open-Source

Frontend code
github.com/raghavdhingra/React-MQTT

IoT device code
github.com/raghavdhingra/Arduino-Cpp/blob/main/mqtt_car_controller-with-react/mqtt_car_controller-with-react.ino

Connection Diagram

Connection Diagram

Do check out my other blogs

#Control stuff around the world

Discussion (0)