Design / Feature Proposal based on my experiences

[j4n-e4t]

Over the past few days, I've been building a similar DB site specifically for Matter devices, unknowingly of this project. After a quick introduction in the Discord channel, I'd like to share my thoughts here.

I'll start by answering some questions by Matthias:

What was your main aim when you designed your interface (e.g. showing most device info available vs. showing some essentials)?

My primary goal was to make the site as performant as fast as possible so one can easily find a device their looking for. My focus was on searchability and filters. The choice for a table as the central ui was totally random since I'm not a big fan of cards for a DB ui. (I'm not a designer... I'm sure someone here can design such card better than me 😅).
Also since my project is so early, this was just a quick draft of what's possible.

Overall though, my idea was to show more information at once while also keeping it easy on the user (not just text, but badges, colours and icons).

Did you get any feedback so far?

No, not at all.

How did you approach the topic of collaboration?

My idea was to have all data stores ad JSON in the GitHub repo, so anyone could edit the devices while also having a review pipeline through PRs.
While this is not applicable for the Device Database, I do have my thoughts on review pipelines for manual edits - Isn't this going to be a hilarious amount of work? (just a random question btw)

Regarding performance and data modelling do you have suggestions in mind?

Performance was/is my key focus for this (kind of) site since fetching and rendering possibly thousands of items is not applicable (just from a cost perspective). If I'd design the architecture around that, I'd make it a static site with regular updates, even if that meant no "live" updates. This approach however might be complex/hard to do for dynamic content. (I assume the content is dynamic in a way, where edits and new devices from HA instances should be visible right away).

Then I'd probably go hard on caching... I've done projects in the past where a Nextjs app fetched 10000 items server side and aggressively cache then to serve from a CDN while being able to invalidate easily on change.

Maybe that's the best approach.

---

For those interested, the repo to my matter device db project is here https://github.com/j4n-e4t/matter-device-db and the actual site can be found here https://matter-device-db.vercel.app/.

Please let me know what you think and where I can help.

[sharko789]

Regarding the UI

Amazing work! I like the idea of a table as the main search UI, it would have been my first instinct as well. At first glance it looks quite clean and minimal to me and feels snappy (with the nine devices, lol).
An interface I have found very helpful/practical for a similar use case is the on from geizhals.de which follows a similar table approach and might be worth drawing inspiration from. (although it's a bit cluttered visually)

Nice things:

• having the filters be saved as URL params is convenient for creating bookmarks
• dark/light mode is nice
• rounded aesthetic is nice
• rows per page is nice (and a must-have for table UIs in my opinion)

Ideas/Critique:

• more columns (obviously dependent on the data)
  • columns for device type specific fields (e.g. bulb socket type) might require additional thought
  • if there were more columns/filters, making the filter list a scrollable container would be useful
• having the filters (or at least the most popular ones) be accessible without a dropdown in just one click would reduce friction
• device pictures and brand icons look weird in dark mode, making the background dynamic would probably fix this but sourcing originals without background might be hard (maybe background removal could be incorporated into the upload process? will mention in Device page wireframe design proposal #113)
• have a general/user-friendly and a pro/dev view. I'm not quite sure myself what exactly would belong where, but the concept is interesting to me
• you probably have stumbled upon this, but in case you haven't: there was(?) a similar project which might be worth taking a look at. The UI is quite broken for me now, but it might be a good source for more initial dummy testing data

[j4n-e4t]

First of all... thanks for the amazing feedback @sharko789 😉

• Actually, matterdevices.com was one of the reasons, I built my own solution to the problem. Their UI is... questionable at best. I did however have Codex merge their device list into mine for testing and to see how the site would behave with more devices. (https://matter-device-fn2oq41d2-j4ne4t.vercel.app/)
• As for the rest, I absolutely agree with you on the table (after looking at alternatives again) the ui on geizhals... For the actual Device Database site, we'll certainly use the OHF ui kit. I don't know what components are available there but a table should be in it.
• I do like the idea of automatically removing backgrounds from images, although this does come at a cost (literally) and I don't know how the budget for the project is.
• I want to talk to phillip (?) soon. As of my understanding he is one of the backend devs and can give me more info on what data is available/collected right now and what we can use on the frontend.

[sharko789]

To avoid confusion (since you mentioned phillip) I am just an opinionated user and in no way affiliated with the OHF. :)

If I have any more thoughts/opinions I'll let you know here.

[j4n-e4t]

So am I 🙃 (Matthias just mentioned phillip right here and I want to reach out to him)
Again, thanks for the input!
I'm sure there will be more to discuss when we have more than a UI draft in Figma (#113)