krenhammer / github-user-search

Optimized GitHub User Search.

Github User Search

Is a TypeScript based React web application used to search the Github userbase.

Highlights

Development/Deployment Workflow:

In order to facilitate a clean development/deployment workflow, this app makes use of three branches:

• dev (Development Codebase)
• main (Tested, Production Ready Codebase)
• deploy (Tracking branch for GitOps Deployment to Netlify)

For convenience, the scripts directory contains two scripts to automate merging between the three branches:

• scripts/merge-main.sh: Merge dev into main
• scripts/deploy: Merge main into deploy

Additionally, both scripts can be run simultaneously using the merge-deploy package.json command.

GitHub Actions Deployment

The app uses GitHub Actions to enable a continuous integration workflow for deployment to Netlify.

Here is an overview of that process:

• Checkout code from this repo.
• Install dependencies using pnpm install.
• Build the project with pnpm run build.
• Deploy to Netlify using the South-Paw/action-netlify-deploy GitHub Action

Feature / Onboarding Tour

Clicking the Tour Button (see below), starts a Feature Tour

API Request Caching

Facilitated through the use of React Query

Cache and Stale times are adjusted in the useUser.ts and useUsersSearch.ts custom hooks. See below for more info.

HINT: Click the React Query Dev Tools button in the lower left corner to open the inspector.

Application Wide State Management

The application utilizes Valtio's change aware proxy state. In addition, Valtio supports the use of the standard Redux Dev Tools browser extension to provide a formidable state inspection toolset. See state folder contents for more details.

Custom Hooks

Can be found in the Hooks directory.

• useStoredQueryData.ts - Hydrates valtio state with data from query hooks.
• useURLState.ts - Store and retrieve URL parameters to state.
• useUser.ts - Query hook to fetch user data from GitHub given a username.
• useUsersSearch.ts - Query hook to search GitHub Users given a userFilter search string.

Chunk Splitting / Federated Lazy Loading

App uses @loadable/component to lazy load React Components for given routes. This enables Vite Chunk Splitting / Brotli Compression and reduces the bundle size. See main.tsx

Browser Experience Optimization

Application has been tuned using Chrome Lighthouse to provide an optimal browser experience.

Accessibility

Application leverages React Aria to ensure high-standard accessibility for the user interface.

Responsive Layout / PWA Functionality

By utilizing TailwindCSS' Mobile First breakpoints and the Vite PWA Plugin, the application is able to support a robust Mobile experience. See vite.config.ts for more details.

Service Worker tasking can be viewed below: