Overview

I'm excited to introduce GithubRef, a tool that allows you to search for GitHub users via the GitHub API and display their profile information. This project was born out of a desire to deepen my understanding of React reducers, explore the power of Shadcn UI, and get hands-on experience with TypeScript.

The Idea Behind GithubRef

I created GithubRef to achieve several learning goals:

  1. Master React Reducers: With React introducing hooks like useReducer, there's less reliance on external state management libraries like Redux. This project gave me a chance to solidify how and when to use reducers for managing state in a scalable way.

  2. Explore Shadcn UI: Shadcn UI is a modern, customizable component library. I wanted to experiment with its flexibility and design philosophy to create a clean, user-friendly interface.

  3. TypeScript Integration: Adding TypeScript ensures type safety and better code maintenance. This was an excellent opportunity to practice TypeScript's benefits within a real project.

How GithubRef Works

GithubRef is straightforward to use:

  1. Enter a GitHub username in the search bar.
  2. The app fetches data from the GitHub API.
  3. It displays key user information like their name, bio, repositories, and profile image.

The interface is designed to be intuitive, thanks to Shadcn UI's elegant components.

Key Technologies

  • React: For building dynamic, component-based UI.
  • React Reducers: For managing state transitions within the app.
  • Shadcn UI: To style the interface with customizable and reusable components.
  • TypeScript: For ensuring type safety and improving code clarity.
  • GitHub API: For fetching real-time user data.

Challenges and Lessons Learned

  • State Management: Using useReducer provided a cleaner and more predictable way to handle state compared to useState, especially as the app's complexity grew.

  • Shadcn UI: Customizing components in Shadcn UI was a breeze, and it made me appreciate the balance between simplicity and flexibility in a design system.

  • TypeScript: TypeScript's static typing caught several potential errors early and made the codebase more maintainable.

Conclusion

Building GithubRef was a rewarding experience that deepened my understanding of React reducers, introduced me to Shadcn UI, and reinforced TypeScript best practices. If you're interested in exploring the project, feel free to check out the repo!