streamline layout and enhance community social proof by IanoNjuguna · Pull Request #226 · IntersectMBO/developer-experience

IanoNjuguna · 2026-05-03T17:20:10Z

The purpose of this PR is to make the Community Section more engaging.

Related to #218

Type of Change

Check the type of change this PR introduces:

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Documentation update
Refactor (improves code structure or readability without changing functionality)
Other (please describe):

Changes Made

Created a new Contributors.tsx component that dynamically fetches and displays real-time contributor data from the GitHub API.
Implemented a filtering system in the contributors list to automatically exclude automated bot accounts and Dependabot.
Integrated the Contributors component into the CommunitySection layout between the description paragraph and action buttons.
Updated the section heading and description copy to focus on community assistance and suggesting improvements.
Added the all-time repository pulse on the right half of the section.

Checklist

Ensure you have completed the following steps before submitting your PR:

My code follows the project's coding style and guidelines.
I have performed a self-review of my own code.
I have commented my code, particularly in hard-to-understand areas.
I have updated the documentation (if applicable).
My changes generate no new warnings or errors.
I have added tests that prove my fix is effective or that my feature works.
I have checked for merge conflicts.
I have rebased my branch onto the latest main or master branch.

HarunJr

Thanks for putting this together. The visual design and the use of live data look fantastic!
I have a few architectural notes to help us polish this up before merging:

Lockfiles (website/bun.lock & website/yarn.lock) It looks like bun was used locally. This project strictly uses yarn, so committing bun.lock could cause confusion for other contributors and break our CI.

Suggestion: Please delete bun.lock, run yarn install to cleanly restore yarn.lock, and update the PR.

I have highlighted some Rate limit issues and some nick picks before. other than that I have a few nit picks on the UI design.

For consistency and visual pull poposes purposes, kindly restore the rounded joint intersect to the original orange rounded corner and center it since you have removed the other Visit GitHub Repository from this location.

The goal is for this to be the primary button visitors want to click on, so it should be a different colot i.e: Orange for Prominence.

As the Scondary button, again, we can maintain the rounded corners but consider having this button lead to the issues page like your initial PR. Seeing as it is a secondary button, consider having it white. This should direct the visitor's eyes after the join intersect button.

HarunJr · 2026-05-12T13:17:43Z

+
+  useEffect(() => {
+    const repo = 'IntersectMBO/developer-experience';
+    fetch(`https://api.github.com/repos/${repo}/contributors`)


Currently this fetches data directly from the GitHub API on the client side. Unauthenticated requests to /contributors are limited to 60 requests/hour, and the Search API is even stricter at 10 requests/minute. In a production environment, just a few concurrent visitors will quickly exhaust this limit and break the stats.

Link: GitHub Docs: Primary rate limit for unauthenticated users

HarunJr · 2026-05-12T13:20:30Z

+    async function fetchPulse() {
+      try {
+        // Fetching from GitHub Search API to get aggregate counts
+        const [prsRes, openIssuesRes, closedIssuesRes] = await Promise.all([


Just like the previuous comment. This also fetches directly from GitHub. Kindly look into the rate limit issue.

For both cases consider fetching this data at build time instead. Write a prebuild script to save the data to a local JSON file, then have the components import that JSON. Let me know if you need help setting this up!

HarunJr · 2026-05-12T13:21:30Z

+import styles from './styles.module.css';
+
+export default function Contributors() {
+  const [contributors, setContributors] = useState<any[]>([]);


The any type is used for contributor data.

Consider defining a minimal interface (e.g., interface Contributor { login: string; avatar_url: string; html_url: string; }) to keep types strict.

HarunJr · 2026-05-12T13:22:22Z

+      .then(response => response.json())
+      .then(data => {
+        if (Array.isArray(data)) {
+          const validContributors = data.filter((user: any) => 


Same here. Let's refrain using any in favour of propper typed types.

HarunJr · 2026-05-12T13:22:51Z

+  return (
+    <div className={styles.contributorsContainer}>
+      <div className={styles.contributorsList}>
+        {contributors.map((user: any) => (


Refer to previuous comments on the use any.

HarunJr · 2026-05-12T13:23:47Z

+      .catch(error => console.error('Error fetching contributors:', error));
+  }, []);
+
+  if (contributors.length === 0) {


Loading states are handled, but network failures are not.
Consider adding a fallback error state so the UI doesn't silently break or hang if a fetch fails

HarunJr · 2026-05-12T13:25:22Z

+          openIssues: openIssues.total_count !== undefined ? openIssues.total_count : '-',
+          closedIssues: closedIssues.total_count !== undefined ? closedIssues.total_count : '-'
+        });
+      } catch (error) {


Loading states are handled, but network failures are not.

Consider adding a fallback error state so the UI doesn't silently break or hang if a fetch fails.

Hello Harun,

Thanks for the review. I've updated the PR with the following fixes:

Build-Time Data Fetching: Moved GitHub API data fetching to build-time (scripts/fetch-github-data.js). MonthlyPulse and Contributors components now consume static JSON (githubData.json), resolving client-side rate limits.

Strict TypeScript Types: Defined explicit interface Contributor and removed all any type usage in Contributors.tsx.

Fallback Error States: Added styled fallback rendering for both Contributors (direct link to GitHub) and MonthlyPulse (baseline fallbacks) to handle missing build-time data gracefully.

fetch-github-data.js is a script that runs automatically at build time. It queries the GitHub API once during compilation and writes a static JSON snapshot to githubData.json. It supports `process.env.GITHUB_TOKEN` for higher rate limits in CI/CD pipelines and local development.

… restyle the pulse section button

…itySection UI styles

… update pulse section UI styling

…ta and update community section UI styles

…imize GitHub data fetching to use local JSON source

…nd update UI styles

…local JSON data, and add TypeScript typing to Root component

…ySection styles for centered layout and updated button branding

… branding and styling

…lders

IanoNjuguna added 3 commits May 1, 2026 17:59

extract CommunitySection into independent component

ce8a937

replace static placeholder with live GitHub repository overview

d204ec6

refine MonthlyPulse component design

9fa3ade

IanoNjuguna requested a review from Ranchhand87 as a code owner May 3, 2026 17:20

IanoNjuguna mentioned this pull request May 3, 2026

Add dynamic community issues feed. #218

Open

10 tasks

Emmanuel-Tyty self-requested a review May 6, 2026 07:16

HarunJr self-requested a review May 12, 2026 13:14

HarunJr requested changes May 12, 2026

View reviewed changes

IanoNjuguna added 14 commits August 1, 2026 14:36

Merge branch 'main' into devex-stats_ian and resolve yarn.lock

e8d5b50

delete bun.lock

883f82f

feat: implement localStorage caching for GitHub community metrics and…

2142a01

… restyle the pulse section button

feat: implement client-side caching for GitHub data and update Commun…

540c479

…itySection UI styles

feat: implement localStorage caching for GitHub community metrics and…

1847452

… update pulse section UI styling

refactor: replace client-side GitHub API fetching with static JSON da…

76f0803

…ta and update community section UI styles

style: update CommunitySection layout, refine button designs, and opt…

aa59f3d

…imize GitHub data fetching to use local JSON source

refactor: replace dynamic GitHub API fetching with static JSON data a…

6347224

…nd update UI styles

style: update CommunitySection UI, replace live GitHub fetching with …

6062158

…local JSON data, and add TypeScript typing to Root component

refactor: add TypeScript typing to Root component and update Communit…

b7dfd2f

…ySection styles for centered layout and updated button branding

style: center align community section elements and update join button…

ee7ebc9

… branding and styling

feat: add fallback message for empty contributor list

42aa821

feat: update MonthlyPulse fallback stats to include projected placeho…

e7c83df

…lders

IanoNjuguna requested a review from HarunJr August 1, 2026 13:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

streamline layout and enhance community social proof - #226

streamline layout and enhance community social proof#226
IanoNjuguna wants to merge 17 commits into
IntersectMBO:mainfrom
IanoNjuguna:devex-stats_ian

IanoNjuguna commented May 3, 2026 •

edited

Loading

Uh oh!

HarunJr left a comment •

edited

Loading

Uh oh!

HarunJr May 12, 2026

Uh oh!

HarunJr May 12, 2026

Uh oh!

HarunJr May 12, 2026

Uh oh!

HarunJr May 12, 2026

Uh oh!

HarunJr May 12, 2026

Uh oh!

HarunJr May 12, 2026

Uh oh!

HarunJr May 12, 2026

Uh oh!

IanoNjuguna Aug 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

IanoNjuguna commented May 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Type of Change

Changes Made

Checklist

Uh oh!

HarunJr left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

IanoNjuguna commented May 3, 2026 •

edited

Loading

HarunJr left a comment •

edited

Loading