serejahh/kottans-2017.md

## kottans-2017.md

      
    Raw
  

              kottans-2017.md
            
          
    Kottans Front End 2017 — test assignment

Hello and welcome to the next step of our selection process.
The goal is to determine if we are a good match.
Flow

mini GitHub API client
First screen: owner (organization or user) name input and submit button.

Treat organizations as users: unconditionally use /users/${owner}/repos API.

On submit: show cards with repositories, filters, and sorting.

Only public repos of the owner are shown. Do not waste your time on auth.

Pagination: render "Load more" button at the bottom.
On card click: dialog with repo details is shown.
Cards

Pretty much resembles GitHub's repositories tab:

repo name
description
is repo a fork?
stars count
updated date
language

Filters

Multiple filters can be selected at the same time: they are applied in conjunction (&&).
All filters should be implemented on the client, without using type parameter.

has open issues


For the sake of future compatibility, use ${prop}_count instead of ${prop}.
Example: prefer open_issues_count over open_issues.


has topics


As of August 2017, the topics property for repositories is available in preview. You have to provide a custom media type in the Accept header: application/vnd.github.mercy-preview+json.


starred >= X times
updated after X date
type (all, forks, or sources)
language


Only one language can be selected at the time.


Do not hardcode language options: they should be determined using downloaded dataset and stay in sync.

Sorting

Order: ascending or descending. Only one of the following can be selected.
Sorting should be implemented on the client, without using sort parameter.

repo name
stars count
open issues count
updated date

Dialog


link to repo on github.com
link to fork's source on github.com (only if repo is a fork)
contributors table (username | contributions) of the most active (top <= 3) contributors, with profile links
languages table (language | Kb) of the most used languages (more than 1Kb)
list of the most commented (top <= 5, only currently open) PRs, with links

Deployment

We expect to receive at least 250 submissions.
Our resources are quite limited, and reviewing tasks is extremely boring.
With that said, we will ignore submissions that do not satisfy the following requirements:

source should contain source code of the app
source should be default branch
master should contain built app
master should be hosted with GitHub Pages
README.md should include a link to hosted app (somewhere at the top)

Browser support

Apps will be tested only in latest stable Google Chrome with default feature flags.
While it is not the way web apps should be shipped, we would like to see how good you are with new APIs.
Surely you can include couple shims if you are up to.
Deadline

September 5, 2017 16:00 (Kiev time)
We will ignore submissions that have major code changes after the deadline.

Bonus points

The list below is quite extensive: we want to give you space to show your motivation and current skill level.
Also, sections below will make reviewing process more transparent.
User experience


long repo descriptions are nicely trimmed
progress indicator (for slow connections)
network failures are handled in user-friendly way
date can be entered in user-preferred locale or with datepicker
relative date (updated) formatting
languages control allows both selecting from the list and typing in
stars count is nicely rounded (5627 => 5.6k)
repos languages are hidden when filtering by language
repos forks statuses are hidden when filtering by sources or forks type

Accessibility


color contrast ratio is acceptable
owner name input is accessible with screen reader
submit button is pressed with "Enter" key
progress indicator is accessible with screen reader
when tabbing, focus order is sensible
focus ring (outline) is distinguishable
dialog is accessible with keyboard and screen reader
pie chart is read by screen reader
icons are read by screen reader

Router

URL should precisely reflect application state:

owner was selected

/kottans

sorting was enabled

/kottans?sort=updated

sorting order was reversed

/kottans?sort=updated&order=desc

filter was applied

/kottans?sort=updated&order=desc&has_open_issues

another filter was applied

/kottans?sort=updated&order=desc&has_open_issues&starred_gt=200

scrolled to the next page

/kottans?sort=updated&order=desc&has_open_issues&starred_gt=200&page=2
Other considerations:

router ignores opening link in a new tab (with keyboard or context menu)
application state is restored after reloading
history navigation is sensible
History API is used

Performance


total app size (HTML + CSS + JS) <= 14Kb (including dependencies, minified & gzipped)
when getting top <= X, use query parameter to limit payload size
PWA, near 💯 Lighthouse scores

Code


modern HTML/CSS (semantic markup, flex/grid)
ES6, new browser APIs
no direct DOM manipulation
data access layer for GitHub API

Tests

End-to-end and (or) unit tests is a huge 👍. GitHub API imposes rate limiting (60 rph), so make sure you cache requests (for example, with service worker). Headless Chrome is the best option for running integration tests.
Other

Not less important improvements, just uncategorized.

master is automatically rebuilt on every commit to source
neat commits: small, targeted, with good messages
the app is served over https://
infinite scroll instead of "Load more"
languages table is replaced with pie chart
works in all evergreen browsers
fancy UI


Have fun and learn something new!