Week 12: DevSphere - Your Github Profile

React Side Effects, API and Client Routing

Introduction

• For this project, you'll be building a simple Github Profile using React and calling the open Github API.
• You will need to know how to use axios and useEffect hook together to render data on React state using useState hook.

Instructions

Task 1: Project Setup

• Create a forked copy of this project.
• Clone your OWN version of the repository in your terminal
• CD into the project base directory cd Week12_DevShere
• Download project dependencies by running npm install
• Start up the app using npm run dev
• Create a new branch: git checkout -b <firstName-lastName>. Implement the project on your newly created <firstName-lastName> branch, committing changes regularly.
• Push commits: git push origin <firstName-lastName>.

Task 2a: MVP

• Use Github's open API https://api.github.com/users/<your-github-username> to render your profile data in Home.jsx file.
• Also render your repositories in the Projects.jsx file. Read the comments in that file.
• Make sure your Home page looks like the The Home preview image
• Make sure your Projects page looks like the The Projects preview image
• Make sure to setup react-router-dom in App.jsx file and setup the link in Navbar.jsx file.
• Find everywhere it shows TODO and follow the instructions.

Task 3: Stretch Goals

• Convert your project's style to Tailwind CSS
• Add new page that has contact information.
• Host your project on Netlify and share the link.

Submission Format

• Submit a Pull-Request to merge <firstName-lastName> Branch into main (student's Repo). Please don't merge your own pull request