For this assignment, students are tasked with developing a small full-stack application that interfaces with GitHub's API in order to aggregate, transform, and display a given user's profile and repository data.
The assignment is composed of two independent pieces that make up a simple full-stack application.
- A Node server exposing an API using Express
- A Web-based client using HTML, CSS, JavaScript, Styled Components, ReactJS, and Create React App
This specification is split into multiple parts.
- Assignment Overview - Gives a general overview of the assignment and technical requirements
- Development - Instructions on setting up development environment and servers
- Server - Information specific to Node API implementation
Students will implement a web application to communicate with a provided supporting API to get the following data for a given user's GitHub profile. The backend has been implemented as a Node API using Express that will call GitHub's API to fetch data necessary to derive/display the data specified. The user will see a home page where they can choose between two options: inspect or duel.
In order to increase your rate limit with the GitHub API and improve overall testability of your application as you develop, you will need to create and use a GitHub token. Instructions for this process are included in the token-setup/README.md.
Students will build a client side application using React. The app will consist of a Home Page, an Inspect Page, and a Duel Page. Refer to the wireframe below as a basic guideline for the structure.
The service calls have been provided in UserService Client.
On the inspect page, a client will enter a username, submit, and be displayed the user's profile data.
For the duel page, it is left up to the student to choose how a winner is determined. Two usernames will be entered, submitted, and their profile data displayed. Using the fields that are received from the API and displayed to the user, the student will need to visually signify differences in the data displayed as well as make an overall winner apparent to the user.
Display the error messages given by the API.