OpenSource Scout

Discover GitHub repositories/issues, manage a local pipeline, and track activity. Deployed on netlify: opensourcescout.netlify.app

Features

• Discover: search repositories/issues + filter controls + infinite scrolling results
• Pipeline: saved repositories/issues with stage/status workflows and bulk actions
• Board: drag-and-drop pipeline stages
• Activity: timeline + daily summaries + quick actions
• Repository detail: key stats, contributors, top open issues, README summary

Design

1) App shell and routing

• Library: @tanstack/react-router
• Why: File-free, strongly typed route tree with query-param driven UX.

2) Server state and API fetching

• Library: @tanstack/react-query
• Why: Caching, stale-time control, loading/error states, and infinite pagination for search pages.

3) UI primitives and component strategy

• Libraries: shadcn + @base-ui/react
• Why: Copy-in component ownership (shadcn style) with accessible low-level primitives.

4) Styling system

• Libraries: tailwindcss, tw-animate-css, class-variance-authority, clsx, tailwind-merge
• Why: Utility-first layout + variant-driven component APIs + deterministic class conflict resolution.

5) Light/Dark theming

• Library: next-themes
• Why: Simple runtime theme switching via the dark class while keeping tokenized CSS.

6) Local persistence and app-level client state

• Approach: Browser localStorage with typed helpers and a sync hook.
• Why: Keep pipeline/issue workflow fast and offline-friendly without backend auth/storage.

7) Drag and drop for board UX

• Libraries: @dnd-kit/core, @dnd-kit/utilities
• Why: Accessible, composable drag/drop with explicit state transitions.

8) Markdown rendering

• Library: react-markdown
• Why: Render repository README content safely in the repo detail page.

9) API typing strategy

• Library: @octokit/openapi-types
• Why: Type GitHub REST responses from official OpenAPI definitions.

Scripts

• npm run dev — local dev server
• npm run build — type-check + production build
• npm run preview — preview production build
• npm run test — run tests once
• npm run test:coverage — run tests with coverage
• npm run lint — lint codebase

Deployment

• Netlify config: netlify.toml
  • Build command: npm run build
  • Publish directory: dist
  • SPA redirect to index.html for client-side routes