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;

Built with

The app is built with the following tools and technologies:

• Vite: Next Generation Fronted Tooling
• Typescript
• React - JS library
• Ky: Delightful HTTP Requests
• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Grid
• Mobile-first workflow

Color theme

Font

Installation

To run this app on your local machine:

1. Clone the repository using git clone https://github.com/z-bj/DEVCOVER.git.
2. Navigate to the project directory using `cd Make-it-blink.
3. Install the dependencies using npm install.
4. Start the development server using npm start.

Contributing

Contributions are welcome! To contribute to this project:

1. Fork the repository.
2. Make your changes.
3. Submit a pull request.

License

This project is licensed under the MIT License.