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
: Mergedev
intomain
scripts/deploy
: Mergemain
intodeploy
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
- Hydratesvaltio
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 ausername
.useUsersSearch.ts
- Query hook to search GitHub Users given auserFilter
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: