introduce marketplace

[samuelstroschein]

Goal

• Discoverability of plugins, apps, lint rules

Open questions

• [x] #1246
• [x] #1243
• [x] #1244
• [x] #1265

Scope

Must have

• [x] #1224
• [x] general information (title, icon, description, and developer)
• [x] link to readme of each (how to use it)
• [x] button "Build it your own"

Should have

• [x] install modules from apps #1266
• [x] at least layout with install buttons (https://github.com/inlang/inlang/issues/1265#issuecomment-1684081250)
• [x] search field
• [x] categorization (plugins, lint rules, apps)

Nice to have

• [x] markdoc syntax for being used in READMES of the items
• [x] dynamic generation of pages to every item (README has to be rendered out)
• [x] add tutorial to marketplace README itself how to write the item READMEs
• [x] SEO
• [x] Select and install multiple modules at once
• [x] Let people preselect repos where things are getting installed

Out of scope

• installation count/sorting options (most recent, most popular …) [requires a database that stores downloads etc]
• create a new inlang config into repo
• implement CLI commands for going directly to the install app

[flornkm]

Addition: Why we're doing that?

• better UX (understating inlangs ecosystem, installation of plugins etc.)
• everything sorted and listed in one place
• docs are simpler and separated from interactive apps (e.g. badge)
• attracts new devs to develop their custom solutions
• great first touchpoint when optimized for search engines

[flornkm]

@inlang/team Please read and discuss the scope of the marketplace and the open questions.

[samuelstroschein]

1. Agree with the scoping.
2. Added SEO as "nice to have"
3. It seems like the metadata for plugins and lint rules should come from @inlang/marketplace to ensure consistency.

[flornkm]

Proposals for the layout of the marketplace

• I have the illustrations in different appearances
• Including the points from must + should have

Proposal 1 – Separated categories, interactive illu that scrolls you to anchor

Proposal 2 – Categories together, categorizable by dropdown field at search bar

Proposal 3 – A direct switch between categories and little different layout overall

@inlang/team please comment what layout we should take and discuss changes

[samuelstroschein]

Arguments in favor of Proposal 2:

• the mental model of a marketplace that I can search and filter on is simpler than a marketplace with different sections/categories
• the marketplace will look larger e.g. if 5 plugins are available the marketplace might look small. same 5 plugins + 3 apps + 9 lint rules looks bigger

---

Perhaps a mix of proposal 2 (show everything) and proposal 3 (select the categories "all" | "plugins" | "apps" | "lint rules") is the way to go. Hidden filters in proposal 2 are inferior to visible filters in proposal 3.

[NiklasBuchfink]

Great work 👍 For searching, Proposal 3 is the best: If I look for something specific, I don't want anything else to be shown. For Browsing, Proposal 2 is the best: The badges with color coding help with that. I like that it's introduced in the illustration.

I vote for the mix, as described by Samuel

[jannesblobel]

Flo and I were on a call and created a draft together. Let me/us know what you think about it.

https://www.loom.com/share/c5767833d35342adbd916ac90fabc394

[flornkm]

A small addition to @jannesblobel's loom: we could bring the heading and explanation of the marketplace back to the center of this screen. Most marketplaces we saw were in some form aligned to the left. This proposal without the search bar is most likely the simplest we can do. In my opinion, a great starting point to code and extend it afterward.

[NiklasBuchfink]

This proposal won't scale:

• "Build your own +" will never be seen if the list grows at some point (Keep it at the top)
• If I look for one category, it is pointless to see the others (Keep the filter with 4 options, it's not that hard to add it)

I don't think we need to diverge from best practices here. But I agree an illustration is candy and we can get to the point right away and show more results at first sight.

[flornkm]

@NiklasBuchfink with Jannes I've talked about the point the marketplace scales, and at this point, we have < 25 items and it doesn't seem to grow extremely in the next few months. Therefore we decided to put the button to the end because, for someone who just wants to explore, it is irrelevant.

In terms of the category filter yes, we can add it and it's quite fast to implement. But when thinking of scaling – what happens when we get more categories? Then we have to implement a dropdown menu or something like that because the switch won't fit anymore.

[flornkm]

Proposal 4 based on your feedback

Partly a mixture and a new idea:

• Filter just with a click to activate/deactivate, have every possibility, and is found below the search field which makes sense
• Build buttons both on the bottom and the top, you won't see two on one screen because of scrolling but when you can't find your solution at the end of the page user probably gets converted through the "button-card"

@NiklasBuchfink, @jannesblobel and @samuelstroschein you had some strong suggestions, what is your opinion on this?

[samuelstroschein]

@floriandwt the last proposal is straightforward 👍

• i would remove apps and plugins because redundant given the filters
• i would remove the build your own card because a) duplicate and b) as @NiklasBuchfink mentioned doesn't scale
• some visualization at the top that signals users what the marketplace offers is likely beneficial. thus disagree with @jannesblobel.

[ivanhofer]

Looks good, but I would place the "Build your own" button somewhere else or use a different style. I think some people will click on it because they think it is the "Apply Search" button.

[flornkm]

@ivanhofer good point, made some smaller changes to it. This is the layout we use:

[flornkm]

@inlang/team here is a quick update and some thoughts regarding the last things missing: https://www.loom.com/share/7ef5c7ef6cc24340a5ab879315b38f26

Feel free to discuss the importance and implementation of multi-selection, some changes to the UI are obviously necessary for allowing users to select multiple items from the marketplace.

[felixhaeberle]

@floriandwt can this be closed?