Skip to content

add:add about page content, start with github-api#15

Merged
Zay-M3 merged 1 commit into
mainfrom
add/about-page-with-githubapi
Apr 15, 2026
Merged

add:add about page content, start with github-api#15
Zay-M3 merged 1 commit into
mainfrom
add/about-page-with-githubapi

Conversation

@Zay-M3
Copy link
Copy Markdown
Owner

@Zay-M3 Zay-M3 commented Apr 15, 2026

Summary by CodeRabbit

Release Notes

  • New Features

    • Introduced GitHub project badge component supporting compact and detailed display modes, showing repository stars and optional creator information
    • Enhanced About page with improved styling, comprehensive content, and integrated project showcase
  • Documentation

    • Footer GitHub repository link now displays richer project metadata using the new badge component

@Zay-M3 Zay-M3 self-assigned this Apr 15, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 15, 2026

📝 Walkthrough

Walkthrough

A new GitHub project badge component (GitHubProjectBadge) and corresponding custom hook (useGitHubProject) are introduced to display repository and creator metadata. The hook fetches GitHub repository and user profile data via concurrent API calls. The component is integrated into the Footer and About pages to showcase project information with support for compact and detailed display variants.

Changes

Cohort / File(s) Summary
New Component & Hook
app/client/src/components/ui/GitHubProjectBadge.tsx, app/client/src/hooks/useGitHubProject.ts
Added GitHubProjectBadge component supporting compact and detailed variants with optional creator and bio display. Added useGitHubProject hook that fetches repository metadata and user profile via concurrent GitHub API calls with proper error handling, loading states, and request cleanup.
Footer Integration
app/client/src/layout/Footer.tsx
Replaced hardcoded GitHub link <a> element with GitHubProjectBadge component in compact variant.
About Page Enhancement
app/client/src/pages/About.tsx
Expanded minimal About page into styled main layout with hero section, logo, descriptive paragraphs, three-column problem/solution/mission grid, and integrated GitHubProjectBadge component with detailed variant.

Sequence Diagram

sequenceDiagram
    participant Component as GitHubProjectBadge
    participant Hook as useGitHubProject Hook
    participant GH as GitHub API
    participant UI as React Rendering

    Component->>Hook: owner, repo
    activate Hook
    Hook->>GH: fetch repository data
    Hook->>GH: fetch user profile data
    Note over Hook: Concurrent requests
    par
        GH-->>Hook: repository response
    and
        GH-->>Hook: profile response
    end
    Hook->>Hook: Normalize & merge data
    Hook->>Hook: Update state (data, isLoading)
    deactivate Hook
    Hook-->>Component: { data, isLoading, error }
    Component->>UI: Render badge with fetched metadata
    activate UI
    alt isLoading
        UI->>UI: Show placeholder text
    else variant: compact
        UI->>UI: Render star link
    else variant: detailed
        UI->>UI: Render profile card with avatar & bio
    end
    deactivate UI
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 wiggles nose

Badge components spring to life with data,
GitHub repos shine a little brighter,
Hooks fetch stars from API's embrace,
A footer and About page rejoice—
More badges, more beauty, more GitHub grace! ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check ❓ Inconclusive The title refers to real changes in the PR (about page content and GitHub API integration) but uses awkward phrasing ('add:add') and doesn't clearly convey the primary focus of the changeset. Consider clarifying the title to something like 'Add About page content with GitHub project badge' to better convey the main changes without redundancy or unclear syntax.
✅ Passed checks (1 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch add/about-page-with-githubapi

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
app/client/src/hooks/useGitHubProject.ts (1)

48-50: Reset stale project data when starting a new fetch.

When owner or repo changes, the fetch begins by setting setIsLoading(true) and setError(null) at lines 48-49, but the previous data persists in state. While loading, stale repository metadata remains visible. If the request fails, old data lingers alongside the error message.

🧹 Small fix
 		const fetchProject = async () => {
 			setIsLoading(true)
 			setError(null)
+			setData(null)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@app/client/src/hooks/useGitHubProject.ts` around lines 48 - 50, The hook
useGitHubProject leaves previous repository data visible when starting a new
fetch; before calling fetchProject (when owner or repo changes) clear stale data
by calling the data state setter (e.g., setData(null) or setProject(null))
together with setIsLoading(true) and setError(null). Update the effect or fetch
handler that currently calls setIsLoading and setError to also reset the stored
data (reference: useGitHubProject, setIsLoading, setError, setData/setProject)
so the UI doesn't show stale metadata during loading or after a failed request.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/client/src/components/ui/GitHubProjectBadge.tsx`:
- Around line 24-25: The hook call in GitHubProjectBadge only destructures data
and isLoading from useGitHubProject, so failed requests show as "0 stars";
update the call to also destructure error (e.g., const { data, isLoading, error
} = useGitHubProject(owner, repo)) and then change the render logic in both the
compact and detailed variants (the JSX that currently shows star count at lines
around the compact and detailed display) to: while isLoading keep the loader, if
error show an explicit unavailable fallback (e.g., "—" or "N/A" / "unavailable")
instead of 0, otherwise show data.stars; apply the same conditional check in
both compact and detailed render branches to avoid misleading star values.

In `@app/client/src/hooks/useGitHubProject.ts`:
- Around line 43-61: Add a module-level in-flight + TTL cache (e.g., a Map
called githubProjectCache keyed by `${owner}/${repo}`) and use it inside the
useGitHubProject hook (and its inner fetchProject) so simultaneous mounts share
the same Promise and recent results are returned without new network calls; on
hook mount check the cache entry: if entry exists and not expired return its
data (or await its stored promise), if a live promise exists return/await it,
otherwise create the fetch Promise, store it in githubProjectCache immediately,
and on resolution store the resolved data with an expiresAt timestamp (TTL like
30s) and clear or replace on error; keep per-hook AbortController/ignore flags
to let callers ignore late results but do not cancel the shared in-flight
Promise. Ensure you reference useGitHubProject and fetchProject when
adding/using githubProjectCache, and update setIsLoading/setError/setProject
based on the (possibly cached) result.

---

Nitpick comments:
In `@app/client/src/hooks/useGitHubProject.ts`:
- Around line 48-50: The hook useGitHubProject leaves previous repository data
visible when starting a new fetch; before calling fetchProject (when owner or
repo changes) clear stale data by calling the data state setter (e.g.,
setData(null) or setProject(null)) together with setIsLoading(true) and
setError(null). Update the effect or fetch handler that currently calls
setIsLoading and setError to also reset the stored data (reference:
useGitHubProject, setIsLoading, setError, setData/setProject) so the UI doesn't
show stale metadata during loading or after a failed request.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: bb173f2d-2073-416f-a131-acc07623b08c

📥 Commits

Reviewing files that changed from the base of the PR and between 997d8ef and 8ee9215.

⛔ Files ignored due to path filters (2)
  • app/client/public/favicon.svg is excluded by !**/*.svg
  • app/client/public/img/naturalsql.png is excluded by !**/*.png
📒 Files selected for processing (4)
  • app/client/src/components/ui/GitHubProjectBadge.tsx
  • app/client/src/hooks/useGitHubProject.ts
  • app/client/src/layout/Footer.tsx
  • app/client/src/pages/About.tsx

Comment thread app/client/src/components/ui/GitHubProjectBadge.tsx
Comment thread app/client/src/hooks/useGitHubProject.ts
@Zay-M3 Zay-M3 merged commit 417bfd9 into main Apr 15, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant