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

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.

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

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

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.

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.

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.

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

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

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

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: