Explore page

[steverydz]

Done

Adds explore page

Note: The content will be different from the design, and in the case of slices it is intentionally duplicated as currently there is only one slice which only contains two snaps

How to QA

• Go to https://snapcraft-io-5179.demos.haus/explore
• Compare to the design

Testing

• This PR has tests
• No testing required (explain why):

Issue / Card

Fixes https://warthogs.atlassian.net/browse/WD-20973

[webteam-app]

Demo

Jenkins

demos.haus

[M7mdisk]

Its very nice. but I agree with you both that this should be server side rendered 👍

[M7mdisk]

Just a note, from my understanding, @0-luke wants this to be more dynamic (i.e, if I want to change the title, I don't need to open a PR). The service itself still isn't ready for this, but thought I'd mention it so that its in mind when the code is changed to be server side

[leiaru-c]

Here are points I think need updates:

• Overall layout:
  The spacing between elements seems to be a bit tight after titles.

• Search bar empty state:

The empty state should say "Search snap store" to stay aligned with [charmhub](https://charmhub.io/) or "Search thousands of apps" to stay true to designs. I think that searching Snapcraft is misleading, there is nothing to search on snapcraft, only on snapcraft.io or the snap store, and snapstore.io could refer to other marketing pages, not apps.

• Categories section:

1/ Without any illustration, it looks quite bare. I can check with the visual team on what to do here if we cannot use icons. 2/ The Featured category is missing in the demo (Yellow).

• Top rated vs most popular, most popular vs trending snaps:
  The wording in both these categories is confusing.
  In the design, the titles say "top rated" versus "most popular", so my guess is that it means most liked/high rated snaps versus most downloaded snaps.
  In the demo, "most popular" versus "trending snaps" sound too similar, it makes me think that they both are based on the number of downloads.

We need to clarify what criteria we use to show results for these categories.

• Game section:
  The game spotlight is very good, can't we have it?

These are not show stoppers, but worth raising:

• Banners:
  The banners with selection of apps for specific use cases are nice, they add some color and spotlight useful apps. I am assuming it is not in the demo because it is not feasible short term, but would be good to have.

• See all link for "recently updated snaps":

I don't know if seeing all recently updated snap is possible, but there was a link in the intial designs.

• Categories section:

3/ The copy style guide specifies that we should use small caps in titles, not capitalise words. That being said, I know that the categories themselves in filters are capitalised, so imo, there are 3 options: - Leave as is: if we go for consistency and can't modify the filters, it's ok to keep the capitalisation as is. - Only modify the copy on the page, leave the filters as is: if we consider that the category titles are not the same as filters, then removing the caps would be good. - Modify the copy and update the filters: And if we want consistency with copy guidelines and the way that filters are formatted, it would be good to remove the second word capitalisation in the filters as well.

• Top rated vs most popular, most popular vs trending snaps:
  In addition to feedback earlier, I think that these two concepts (most downloads, and best ratings) overlap quite a bit and might not provide as much value. In the demo, two apps overlap, which is not the end of the world but is not all that great either. A selection of popular snaps per top categories might be more interesting in the future?

• Ubuntu community section:
  Also really nice, what would need to be done to have that section in asap?

[steverydz]

@leiaru-c I've addressed the key points we talked about with the design. Could you please take another look?

• Fixed spacing between sections and headings
• Updated the placeholder text of the search box
• The capitalisation for the categories comes from the API so would need to be changed at that level
• The titles, e.g. Most popular etc. come from the recommendations service so can be updated there along with the chosen snaps

[leiaru-c]

Checked and it's good to go for me. Looking forward to the next iteration :)

[abbiesims]

LGTM! 🚀