yogeshtakeo commented 1 year ago

Task 10: Retrieve and Display GitHub Profile Using GitHub API and JSX Components

Objective: Retrieve a student's GitHub profile data using the GitHub API URL and display it using JSX components in a React project.

Task Overview

Understand how to retrieve data from an API using the fetch function in JavaScript.
Use JSX components to display the retrieved GitHub profile data in a React project.

Task Details

Create a React Project:

Set up a new React project using Vite or any other preferred tool.
Create the necessary file structure and components for the task.

Retrieve GitHub Profile Data:

In a React component (e.g., GitHubProfile.js), use the fetch function to make a GET request to the GitHub API URL for the student's profile.

API example: https://api.github.com/users/<your_username>

Handle the promise returned by fetch using the then and catch methods.
Extract the response data (JSON) from the resolved promise using the JSON method.
Store the relevant profile data in the component's state.

Display GitHub Profile Using JSX Components:

Create JSX components (e.g., ProfileCard.js, RepositoryList.js, etc.) to render and display the different aspects of the GitHub profile.
Pass the retrieved profile data from the GitHub Profile component to the child components as props or you can use the single file to show the output.
Use the received data within the child components to render the profile information, repositories, followers, etc.
Style the components using CSS to enhance the visual presentation.

Test and Refine:

Start the development server and run the React project.
Verify that the GitHub profile data is successfully retrieved and displayed using the JSX components.
Ensure the layout and styling are visually appealing and well-presented.
Test with different student GitHub profiles to ensure the data is fetched and displayed accurately.

Task Submission

Take a screenshot of the web browser displaying the rendered React component . Share the screenshot Optionally, submit the code files (App.js and any other relevant files) for review with the GitHub Repository.