Skip to content

README.md

Latest commit

 

History

History
49 lines (30 loc) · 2.48 KB

README.md

File metadata and controls

49 lines (30 loc) · 2.48 KB
Raw

GitHub Tracker

This week, we want you to create a place to keep track of the GitHub repos that we're using here at Technigo. The project is to continue practicing JavaScript and API skills with the help of GitHub's own

Project's requirements

🔵 Blue Level (Minimum Requirements) - ACHIEVED

Your page should include:

  • A list of all repos that are forked from Technigo
  • Your username and profile picture
  • Most recent update (push) for each repo
  • Name of your default branch for each repo
  • URL to the actual GitHub repo
  • Number of commits for each repo
  • It should be responsive (mobile first)
  • A visualisation, for example through a pie chart, of how many projects you've done so far, compared to how many you will do (in total it will be 19 weekly projects 🥳) using Chart.js.

🔴 Red Level (Intermediary Goals) - ACHIEVED

  • Sort your list in different ways. Example of what you can sort by: creation date, name, most commits, followers or stargazers
  • Create the opportunity to filter the repos based on a condition, e.g. only JavaScript repos
  • Display the actual commit messages for each repo in a good way. Maybe by adding a modal (popup) or an accordion?
  • Display the comments you got from each pull request

⚫ Black Level (Advanced Goals) - ACHIEVED

  • Implement a search field to find a specific repo based on name

The problem

This week we focused on fetching and collecting datas from API. I found it challenging to collect the correct datas and display them on the matching project. It was a good practice to learn about dynamic ID and how it helped me to solve the problem above.

My main goal was to go through all level requirents and learn as much as possible. It took me a long time to implement the search bar and filter button. I am happy to find a solution to complete it and learned a lot about how and when to use the filter() and sort() method. Regarding to the site's user friendliness, I selected few important categories such as languages, updated time, and show all to help the user get the search result faster.

What will I improve, if I had had more time

I have to admit that the search field is not yet perfect, as I aimed to implement a function for the clear ❌ button. When the user click ❌, it will display all the project's cards, instead of showing empty space.

Figma's link:

https://www.figma.com/file/x2cLkf2v0G3r83hNHfUpgv/Untitled?node-id=0%3A1

View it live

https://suki-github.netlify.app