Skip to content

lethang7794/github-issues

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CoderSchool FTW - GitHub Issues Team 1

Created with love by: Jade Ha Tuan Thang

View online at: https://lqt-github-issues-browser.netlify.app/

Summary: A browser for issues of a Github repo.

Video Walkthrough

User Stories

The following required functionalities are completed:

  • The user can enter a repository in a search bar, click "search", and see the associated issues. The repository should be of the format owner/repo-name, e.g. facebook/react.
  • If the repository does not exist, the user should see a proper error message.
  • The user should be able to see the following information for each issue:
    • Issue Title with Number of the issue
    • Owner of the Issue
    • Owner Avatar
    • How long ago the issue was updated in a human-friendly format (e.g. 2 days ago) (Hint: react-moment)
    • Body of the Issue
    • Labels of the issue
  • The user should be able to see multiple pages of results, by clicking a pagination control.

The following optional features are implemented:

  • The user can see more details (including 5 comments of the issue) in a modal that's opened by clicking on the title of the issue.
  • The user should be able to see the body of the issue rendered in markdown. (Hint: react-markdown)
  • Fetching is an asynchronous operation, so you should display a loading spinner whenever the app loads data, and hide it once the corresponding API call has been completed.
  • Input Fuzzy Matching: the user should be able to type in either https://github.com/facebook/react or facebook/react, BOTH should work.
  • In the Issue Detail Modal, let implement an infinite pagination with a "Show More" button: Fetch 5 more comments whenever user clicks on the button. The button is disabled or hidden when all the comments have been loaded.
  • Users can create a new issue. (Danger Warning: If you attempt this task, please do so on a private repository. Don't spam the official facebook/react repo!)

The following additional features are implemented:

  • Change label's text color depends on background color.

License

Copyright [2021] [Jade Ha Tuan Thang]

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Languages

  • JavaScript 67.2%
  • CSS 17.7%
  • HTML 15.1%