alessxr/github-finder-typescript

Purpose and runtime

GitHub Finder is a Vite-served React/TypeScript single-page application for searching GitHub users and displaying profile and repository details. It runs entirely in the browser; GitHub’s API is the material external service. Entry bootstrap is src/main.tsx, with application composition in src/App.tsx and global styling in src/main.css.

Application orchestration

src/App.tsx is the likely feature boundary and state owner: it connects search input, selected/fetched user data, loading/error states, and profile rendering. It should be treated as the primary control-flow hub rather than distributing API state across presentational components.

• src/App.tsx

• src/main.tsx

• src/types/user.ts

Search and GitHub API boundary

The search interaction is encapsulated by src/components/Search/Search.tsx; user-driven queries flow upward to the app layer, which performs GitHub API requests and maps responses into typed user data. API failures and loading behavior belong at this boundary so display components remain data-driven.

• src/components/Search/Search.tsx

• src/types/user.ts

• src/types/index.ts

Profile presentation pipeline

Fetched user data is rendered by the UserCard feature, with subcomponents separating identity, metadata, and statistics. This forms the main downstream rendering path: API response → typed model → UserCard props → focused profile sections.

• src/components/UserCard/UserCard.tsx

• src/components/UserCard/User/User.tsx

• src/components/UserCard/UserStat/UserStat.tsx

Local/mock-user fallback or augmentation

The repository includes a mock-data module and an extraction utility, indicating a boundary for selecting or normalizing local user data before rendering. This can support initial content, offline development, or conversion of a richer response into the local profile model.

• src/mock/index.ts

• src/utils/extract-local-user.ts

• src/utils/typeguards.ts

Shared layout and interaction primitives

Reusable UI primitives establish the page shell and common interactions: header/navigation area, constrained content layout, and buttons. Feature components should consume these rather than duplicate layout or action styling.

• src/components/Header/Header.tsx

• src/components/Container/Container.tsx

• src/components/Button/Button.tsx

Theme control and styling boundary

Theme switching is a dedicated interactive component, while component-scoped SCSS modules isolate visual styles. Global cross-cutting styles remain in src/main.css; theme state/effects should remain coordinated with the application shell rather than profile content.

• src/components/ThemeSwitcher/ThemeSwitcher.tsx

• src/components/ThemeSwitcher/ThemeSwitcher.module.scss

• src/main.css

Build and deployment infrastructure

Vite provides dev/build serving and TypeScript compilation is split between application and Node/Vite config contexts. The demo is deployed on Vercel, but no server-side runtime or repository-owned backend is indicated.

• vite.config.ts

• tsconfig.app.json

• package.json