simpixelated / gistlist Goto Github PK

Goal

Create a public gist viewer. Once finished, we should be able to search for a GitHub username and see all the public gists for that user. From each gist, we should be able to view all the files in that gist. To make things a little more interesting, we also want to be able to mark our favorite files inside a gist.

Deliverables

There are two deliverables for this project:

1. A small JavaScript library that wraps the GitHub REST API for gists.
2. A single page React app that uses your small JavaScript library. (Most of your time will be spent here.)

Specs

Library:

• Your library should provide a function that, given a username, retrieves the public gists for that particular user.
• Your library should provide a function that, given a gist ID, retrieves a specific gist.
• Your library will be an internal module inside your project for now. No need to separatly package it.
• You don't have to worry about authentication. Anonymous access is fine, since you're only retrieving public gists. (See note about our proxy below though.)
• Feel free to use any data-fetching libraries like axios, etc., if you prefer. Vanilla fetch tends to work just as well for this project though.
• Do not use any libraries specifically related to GitHub, for example a library that wraps GitHub’s REST API.

Keep in mind that in the future, this API may grow to support more methods of GitHub's REST API.

Documentation for the gist REST API can be found here: https://developer.github.com/v3/gists/

Note that GitHub’s API allows any origin, and you can assume modern browsers, so there are no cross-origin or legacy issues to worry about.

FYI GitHub's API is rate limited to 60 requests per hour for anonymous users.

App:

• A text box should be provided to enter a username.
• After entering the username, it should list the public gists for that user in summary form. The summary should contain at least the description and the date the gist was created. (Feel free to provide additional properties if you want.)
• Clicking on a gist should open up a detail page for that gist.
• The detail of the gist should list all the files for that gist.
• The contents of each file in the gist must be viewable somehow, but you can decide how best to do this. You can choose whether to show links to each file in the gist, a summary view of each file that expands, or the full content of each file on the detail page, etc. However, your app must render the file contents, so do not open external links to GitHub. Otherwise, there's no right or wrong choice here, just your personal preference.
• Using a button, link, icon, etc., you should be able to mark a particular file in a gist as a favorite. Once marked as a favorite, it should be clear (via text, icon, button state, etc.) that a particular file is a favorite. It should also be possible to unmark a particular file as a favorite.
• The list of favorites should be retained across different page views. So, for example, if a file "foo.txt" is marked as a favorite for username "foouser", and then a search is done for "baruser", "foo.txt" should still be marked as a favorite if we later search for "foouser" again and return to the "foo.txt" file. It is okay if favorites don't persist beyond a browser refresh.
• Some basic navigation/header should make it possible to return from a particular gist to the list of gists for a user and to perform a search for a different user, without having to refresh the browser or use the back button. It is okay if the browser’s URL doesn’t change while navigating.
• Do not use any third-party React components. All React components must be yours.
• Don’t worry too much about presentation. This means no particular CSS, fonts, or images are required. This is a coding activity and not a design activity. That’s not to say we don’t appreciate great design or that we don’t value those skills if you have them! It’s just that we won’t be considering design when scoring this particular project.
• Do make sure the available interactions are intuitive. In other words, we will be considering usability.