interview-test-case-easy.md

React.js Developer Test Case

〰️ Technical requirements

Strictly required stack

• React
• React Router
• Redux
• Styled Components
• Apollo GraphQL Client (Or Axios)
• Redux Saga 🤘

〰️ The task

➖ Base rules

• Pure 16.7+ API. 100% functional components. Hooks.
• Architechture. Imagine perfect, scalable architecture and implement it.
• Responsive layouts (phones/desktop only). Any simple look for your choise.
• Screens/Tabs are router based.
• Don't use any third-party boilerplates for project structure.
• Styled components.
• No CSS frameworks like Bootstrap, grid libs or other ancient moves. Flexbox only!
• Pixel-perfect isn't required. But, there are some rules:
  • You can change layout design whatever you want.
  • It's okay if your version looks fine.
  • Don't use any UI kits.

〰️ 🔹 Screen: Startup

Github username input.

If given github username exists

• Store username
• Fetch data
• Navigate to catalog screen

〰️ 🔹 Screen: Catalog

Catalog of starred repos, sorting, pagination.

➖ Catalog

• Fetch data via GraphQL Github API or Rest API.
• Pagination. Show 90 items per one page.
• Every card must be marked by repo's primary programming language color (yellow line on mocks).

〰️ Order by

• Most starred - by stars count.
• Repository created - by repo creation date, from fresh to old
• From first to last - list repos from first you ever starred to last

〰️ Search

Search instance should be called on every key press.

〰️ GraphQL Tips

Fetch repos query:

Use my github login to fetch from, cause i starred > 3k projects.

query {
  user(login:"andreystarkov") {
    starredRepositories(first:99) {
      edges {
        node {
          name
          stargazers (last: 0){
            totalCount
          }
          primaryLanguage {
            id
          }
          createdAt
          updatedAt
          description
          languages {
            edges {
              node {
                id
                name
                color
              }
            }
          }
          owner {
            login
          }
        }
      }
    }
  }
}

You can test queries via GitHub GraphQL API Explorer.

Same data via REST API (Don't use it, just for fun): https://api.github.com/users/andreystarkov/starred

〰️ Look also

Full docs to Github GraphQL API are here

Repository GraphQL object described here

Check my implementation of this stack. It has an example of Apollo Client integrated with Redux/Saga (GraphQL API).

Feel free to ask me about anything via telegram: @touchableopacity