react-user-search

React user search task

Core Technology	Сomplexity	Estimation	Goal
React	Medium	4-12 hours	Check if a candidate can write reusable components, use best practices, work with asynchronous code using third-party API.

• If you are a recruiter, and the task doesn't fit the recruiting process ask your Tech Lead to modify the stack
• If you are a candidate, don't copy/paste if you found a solution on the Internet. A technical person can catch you sooner or later. For both sides, it is time-wasting if you won't implement this by yourself.

Task

Develop a simple React application that allows searching Github users by login, name, or email.

Starters

Use one of the following starters:

• Next.js
• Create React App
• Gatsby.js
• Other

Components

Implement the following components:

• <Select placeholderText="Search by" />
• <Input placeholderText={selectedOption} />
• <SubmitButton />
• <UsersList />
• <UserProfileCard />
• <Validation />, useValidation hook or utils (implement custom or native validation)

Please write your own components instead of using components from material-ui, antd, etc.

User path

1. A user chooses "Search by" option using <Select /> component ("Login", "Name", "Email"):
2. A user provides a value to the <Input /> component, and the following validation occurs:
   • "Search by" 👉 "Name":
     • Required
     • Minimum 3 characters
   • "Search by" 👉 "Login":
     • Required
     • Minimum 3 characters
   • "Search by" 👉 "Email":
     • Required
     • Accepts only valid email format
3. A user clicks <SubmitButton />
4. A user gets <UserProfileCard /> with profile information or "No users found." message.

Required

1. Use React.js
2. Use any other libraries that can help you to implement the task
3. RWD
4. Publish the task to your own Github account
5. Add a README.md file with instruction about installation and how to run the app

Important!

• You can use any other API instead of Github if you think you can be more performant with it
• Use any technology stack around your React application
  • State management:
    • Apollo
    • React context
    • Recoil.js
    • Mobx
    • Redux
    • Xstate
  • Styling:
    • JSS
    • Sass
    • Styled-components
    • Tailwind
  • Testing:
    • Enzyme
    • Jest
    • React Testing Library

Additional points

Don't try to implement all these features and spend too much time on it.

• Adding "Load more" functionality
• Adding a profile page of particular user
• Adding unit tests
• Clean GIT commits history
• UI/UX skills
• Using Eslint
• Using Prettier
• Using Typescript
• Using best practices (DRY, KISS, SOLID, etc.)

Design example

The following design is the only example that would give you a visual understanding of what is required by the task. It would be great if can make it look even better than in the following example:

Show design

Github API

GitHub GraphQL API

Here are some details if you decide to use Github Graphql API:

• Documentation
• Explorer

Queries:

query SearchUsers($query: String!, $first: Int!) {
  search(query: $query, type: USER, first: $first) {
    edges {
      node {
        ... on User {
          login
        }
      }
    }
  }
}

query GetUser($login: String!) {
  user(login: $login) {
    name
    bio
    websiteUrl
  }
}

Variables:

{
  "query": "Dan Abramov",
  "first": 10,
  "login": "gaearon"
}

GitHub REST API

The documentation.