Show "related" projects in the project details page

[michaelrambeau]

The need

When I check a given project, I want to see other related projects:

• similar projects (alternatives or contenders for a given solution) so that I can check the other options
• projects from the same author (inside the same GitHub org)

For the similar projects, the matching could be done by showing the projects that share the same tags.

The conversation started here: michaelrambeau/bestofjs#758 (comment)

What UI?

The most difficult question is about the layout, the project details page is already crowded with several sections:

• the header with the project's logo, name, description and tags
• GitHub
• Package on NPM
• README

Could we add 2 new sections (that would be optional as not all projects have related projects):

• Related Projects
• From the same author

Or maybe we should rethink these sections and display them as an accordion, to make things more compact on the screen?

An alternate way is to rethink the whole layout and create a sidebar that provides context.

I like the extra right sidebar GitHub provide to "explore" new projects:

However it would be weird to introduce a new sidebar just for this page.

It's related to a more general question: how to make a better use of the space on the screen? Now the layout is really constrained, a bit old-fashioned.

The context sidebar that could include other features:

• a button to bookmark the project (we still have to "port" this feature from the previous Best of JS)
• the recent history maybe?

[Evomatic]

Hi @michaelrambeau after reading about this issue and looking around online for inspiration, this is something I am interested in working on!

I like the idea of having a sidebar, that provides more context, but you mentioned that it might be strange to have it just for this page. Would that still be the case though, if the sidebar was made to be an obvious necessity for the page?

One idea I have is if we did have a sidebar, we could move the "Github graph" and the "package on NPM" to the sidebar (maybe the navbar information as well?). It might be a bit tricky with "package on NPM" since it has a bit more interactivity due to its dropdowns, but there could be a solution to this. Then the focus of the page would be the project Readme.

One other idea would be to have sort of a grid layout on the page. Both graphs in the same row.

[Evomatic]

Got some of the inspiration for daily.dev article details modal.

[michaelrambeau]

Thank you very much Evan for the research, I like the design of the screenshot you shared, having modals that have their own URL could be a nice pattern (is it the pattern made popular by Instagram?), to avoid losing the context of the list you are browsing.

To me the GitHub trends panel should be the most important content on the screen because it's the main value provided by Best of JS (to be able to assess if a project is hot or cold), I think, more than the access to the README that you also find on Yarn, NPM and GitHub itself of course.

I thought about a sidebar because it could be useful for other features like checking the user's activity (bringing a direct access to the latest pages you checked), not only in the details page, but from any page.

Sorry it's not a simple issue, I need to think more...

[Evomatic]

All good! I hope some of the ideas I presented spark some inspiration 😉

To me the GitHub trends panel should be the most important content on the screen because it's the main value provided by Best of JS (to be able to assess if a project is hot or cold), I think, more than the access to the README that you also find on Yarn, NPM and GitHub itself of course.

That definitely makes sense after thinking about it. The trends is a part of what makes the project page stand out. In that case the README could be moved to the sidebar and the Github trends and NPM can persist in the main view. (Or just the github trends even?). As you mentioned, what I like most about the sidebar is the possibilities and flexibility it adds for other features we would want to add down the road.