Logo
screenshot of github user search app

Github User Search App

next.jsreactreact-hook-formreact-querytailwindcsstypescript

Preview Site

This is a solution to the GitHub user search app challenge on Frontend Mentor.

Requirements

The challenge is to build out this GitHub user search app using the GitHub users API and get it looking as close to the design as possible.

The users should be able to:

  • View the optimal layout for the app depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Search for GitHub users by their username
  • See relevant user information based on their search
  • Switch between light and dark themes
  • Bonus: Have the correct color scheme chosen for them based on their computer preferences. Hint: Research prefers-color-scheme in CSS.

The GitHub users API endpoint is https://api.github.com/users/:username. So, if you wanted to search for the Octocat profile, you'd be able to make a request to https://api.github.com/users/octocat.

Expected behaviour

  • On first load, show the profile information for Octocat.
  • Display an error message (as shown in the design) if no user is found when a new search is made.
  • If a GitHub user hasn't added their name, show their username where the name would be without the @ symbol and again below with the @ symbol.
  • If a GitHub user's bio is empty, show the text "This profile has no bio" with transparency added (as shown in the design). The lorem ipsum text in the designs shows how the bio should look when it is present.
  • If any of the location, website, twitter, or company properties are empty, show the text "Not Available" with transparency added (as shown in the design).
  • Website, twitter, and company information should all be links to those resources. For the company link, it should remove the @ symbol and link to the company page on GitHub. For Octocat, with @github being returned for the company, this would lead to a URL of https://github.com/github.

Built with

Code Quality with

Implementation time

This challenge was completed over a span of 7 hours.

Project Highlights

This project showcases a modern web application built with Next.js, integrating several advanced features and best practices in web development. Below are the key highlights and technologies used:

Theming with next-themes

  • Dynamic Theming: Implemented dynamic theming capabilities using next-themes, allowing users to switch between light and dark modes seamlessly. This integration enhances user experience and accessibility by respecting system preferences and providing theme toggle options.

Secure API Calls with Server Actions

  • Server-Side Authentication: Utilized Next.js server actions to securely call the GitHub API, ensuring sensitive credentials (access tokens) are managed server-side and never exposed to the client. This approach uses environment variables to safely store and access API tokens.
  • Enhanced Security and Performance: By handling API requests on the server, the application enhances overall security and leverages server-side rendering for improved performance.

Data Fetching with React Query

  • State Management for Fetching: Integrated React Query to manage the fetching, caching, and updating of server state. This includes:
    • Loading States: React Query’s loading states are used to provide real-time feedback to the user, improving the interactive experience.
    • Error Handling: Systematic error handling strategies to gracefully manage and display errors to users when API calls fail.
    • Data Management: Efficient data synchronization and UI state updates without extensive boilerplate.

Form Handling with React-Hook-Form

  • Efficient Form Management: Leveraged react-hook-form to handle forms, which simplifies form validation and submission while reducing re-renders and improving performance.
  • Validation: Built-in validation mechanisms to ensure data integrity before submitting user input to the server.

UI Component Library Integration

  • Reusable UI Components: Utilized Shadcn’s UI component library, which builds on top of Radix UI. This choice promotes accessibility and flexibility, providing robust components like buttons, inputs, and skeletons.
  • Skeleton Loading Screens: Implemented skeleton screens during data loading phases to enhance perceived performance and keep users informed about the loading state.

Accessibility and User Experience

  • Radix UI Foundation: The use of Radix UI components ensures that accessibility is a core feature, with components adhering to WAI-ARIA standards.
  • Responsive and Interactive UI: Designed a responsive layout that adjusts to various device screens and provides interactive feedback based on user actions.