z-bj/DEVCOVER

3rd-party-api business github hr human-ressource-management react sourcing typescript

Introducing Devcover

Github user search app that allows recruiter to search for Developer by their username.

Desktop

Mobile

Features

View the optimal layout for the app depending on device 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

API

The app utilizes the Github REST API to retrieve user information. The API provides access to a wide range of Github resources, including user profiles, repositories, organizations, and more. For more information about the Github REST API and its endpoints, please see the GitHub REST API documentation.

Note that for unauthenticated requests, the rate limit allows for up to 60 requests per hour. Unauthenticated requests are associated with the originating IP address and not the user making requests.

Main.tsx

import React, { useCallback, useEffect, useState } from "react";

import ky from "ky"; // Import the ky HTTP library
import Input from "./Input";
import Card from "./Card";

const Main = () => {
  const [user, setUser] = useState("z-bj");
  const [choice, setChoice] = useState("z-bj");
  const [error, setError] = useState("");

  const changeUser = (newUser) => {
    setChoice(newUser);
  };

  // Define the fetchUserHandler function with useCallback to memoize the function
  const fetchUserHandler = useCallback(async () => {
    setError("");

    try {
    
      const response = await ky(`https://api.github.com/users/${choice}`);

      if (!response.ok) {
        throw new Error();
      }

      const newUser = await response.json();

      setUser(newUser);
    } catch (err) {
      console.log(err.message);
      setError("No results");
    }
  }, [choice]);

  // Call fetchUserHandler on component mount
  useEffect(() => {
    fetchUserHandler();
  }, [fetchUserHandler]);

  return (
    <main>
          <Input changeUser={changeUser} error={error} />
          <Card user={user} />
    </main>
  );
};

export default Main;