💡 [Feature]: Add categories for the APIs

[koustov]

Is your feature request related to a problem? Please describe.
As the list will grow over time, we need a smarter mechanism to handle the heap. An easy and convenient way is to categorize them.

Describe the solution you'd like
A radio button-based category listing.

Describe alternatives you've considered
Tabs, accordion

Additional context

[koustov]

@atapas can you assign it to me?

[atapas]

@koustov please come up with the design first and share.

[koustov]

@koustov please come up with the design first and share.

High-level wireframe
https://app.moqups.com/LEsZyn0fKfPUmXVeSDgn7qN3JetBc5oi/view/page/aa9df7b72

Note:

1. Short of icons, please use your imagination
2. In the list of the filters, the first one is for "ALL"

[atapas]

One quick question @koustov => How does the icons related to the demo?

[koustov]

One quick question @koustov => How does the icons related to the demo?

The icons are carefully chosen categories (e,g,: "screen" for all screen-related demos). We can start with any popular icon library (which can give something around 70% impression) however eventually we would go for a custom set.

Note: On hovering category icons will render the category name

[atapas]

Yes, a categorization is surely required. I liked the idea. However, I am not fully sure if this UX is the best one. The categorization(some of them, not all) That I can think of are,

• Screen
• DOM
• Camera
• Location
• Connectivity
• Operating System

Check out https://whatwebcando.today/ site. It has some categorization but it is not very useful either. Can we go for a low-fidelity wireframe with actual categorization?

@koustov @max-programming @niteshseram @mverissimo What are your thoughts?

[mverissimo]

I like the idea, but we don't have much content for this, and about the layout, the reference sent by @atapas looks good, just needs a little enhancement.

[atapas]

I like the idea, but we don't have much content for this, and about the layout, the reference sent by @atapas looks good, just needs a little enhancement.

To start with, we can keep the framework ready. It is ok if for some category it shows no demo available. That in fact drive us to create one sooner :).

Question to you @mverissimo => As you are planning the next PR to bring the rest of the demo inside the module and aesthetic, we can take up categorization right after that. What say? Or do we need to think about it togerger?