= How to build an IoT management web server =

Hi guys,
I'm a hobby programmer and need a little bit of advice

To make it short: I want to create a little web app to control my Philips Hue lamps and other IoT stuff at home

I already played around with the Hue API in Python and have a few scripts that work great. I also have some scripts that run commands per SSH on a different device

So as my next step I want to create a web app to have a good looking UI

In my past I also created a small Android app, first in Kotlin, then in Flutter and Firebase and I was amazed how easily I could get a semi good looking UI working in Flutter. I know Flutter can also be used as web app, but I don't think this is the right tool for this

I took a look at React and Angular and worked through the beginner guides. Compared to Flutter they look like more work to make them look good, but maybe I just need a better template

In my imagination I would like to trigger one script to gather the current status, the script writes it into some JSON file and the UI displays a nice graph or diagram. Then press a button and this writes another file and fires a script, which reads the file and, lets say changes the light color accordingly

Now, I'm a little bit lost with what to start, to be honest

From what I gathered I can build the front-end with Angular and then have maybe a MongoDB as my "filesystem" where I can store and load the states of my lights or config scripts. I think then I would need an API to connect the DB to my UI. I hope I am at least partly right :D
Would you say starting with JS/TS and creating a UI in Angular or React is the right direction? Or is this completely wrong for my intentions?
Thanks for your advice!

You're definitely on the right track here, the bit you're missing is tying it all together into a spec for a server

What I would do in your case is build a server that serves a web page. The web page makes HTTP requests back to a REST API exposed by the server. The server is the central connection point between your front-end web page, your scripts, your DB; don't try and connect from the web page to the DB or change a light status without going through the server

Define your API endpoints. Let's say you want to control your lights; maybe you need:
Get an auth token [
HTTP GET //api/token with creds in header], returns token or 401
Get status of devices [
HTTP GET //api/devices with token in header], returns JSON status of all devices
Get status of lights [
HTTP GET //api/devices/lights with token in header] returns JSON status of all lights
Control a single light [
HTTP POST //api/light/ wwith token in header, payload specifying RGB], returns empty 200 on valid request, 422 otherwise
And so forth. Once you have an API spec you can develop whatever you want to first; the server code for the API (Django is good if you're comfortable with Python), the front-end code, the server code for integrating your scripts or the DB. As long as the API is sufficiently specified then the parts will all talk to each other nicely. Separation of concerns makes it simple to build some bits, mock others up, modify and replace as needed

A tip: don't write anything to files if you're just sending JSON data around. The server itself can
*probably* just call all the script code directly with no need to pass files, and can definitely serve the JSON via HTTP to the web page for display purposes

This sounds like a fun project. Can you tell me a little about your end goal with it? Maybe I’ll do something like it at my house. I guess what I’m wondering is aside from being a fun project, what (if any) controls does it give you over your devices that don’t come sort of “baked in” via remote controls