Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alexandr-g/quandoo

Quandoo candidate task
https://github.com/alexandr-g/quandoo

babel es6 eslint github-api jest react webpack yarn

Last synced: 7 days ago
JSON representation

Quandoo candidate task

Awesome Lists containing this project

README

        

[![Build Status](https://travis-ci.org/alexandr-g/quandoo.svg?branch=master)](https://travis-ci.org/alexandr-g/quandoo)
[![codecov](https://codecov.io/gh/alexandr-g/quandoo/branch/master/graph/badge.svg)](https://codecov.io/gh/alexandr-g/quandoo)

## Overview
This is a candidate task for Quandoo.

It is a simple React app including:
1. Search with autocomplete for pre-defined GitHub users
2. After typing or selecting GitHub user search request will be sent to GitHub API to fetch user info
3. Results page displays user info (such as name, login, location, bio)
4. Unit tests with Jest including snapshot tests
5. Webpack, ESlint, Babel config from scratch
6. Yarn to lock the dependencies

**Home**
screenshot 2017-05-01 14 43 20
**Autocomplete**
screenshot 2017-05-01 14 45 35
**Results**
screenshot 2017-05-01 14 47 38

## Usage

**To run the project locally clone the repo:**
```bash
$ git clone https://github.com/alexandr-g/quandoo.git
```

**Install project dependencies:**
```bash
$ yarn
```
or

```bash
$ npm i
```

**Build a valid js bundle:**
```bash
$ yarn build
```

**To start the project in development mode:**
```bash
$ yarn dev
```

Open `http://localhost:8080` in your browser that will serve webpack output with running app

#### Testing

Run the tests using Jest including snapshot tests:

```bash
$ npm t or yarn test
```

#### Linting

Run the linter by executing:

```bash
$ yarn lint
```

## Project Structure
├── __tests__ - Jest unit tests
├── src - All the source code
│ ├── components - React UI components
│ ├── utils - API helpers
│ └── index.js - JS entry point
├── .babelrc - Babel config to transpile ES6
├── .eslintrc.json - ESLint config
├── .gitignore - Ignore files for source control (node_modules, test coverage)
├── index.html - HTML file where React app lives
├── package.json - List of dependencies, npm scripts, author etc.
├── README.md - Project Overview and instruction how to run, test, lint
├── webpack.config.js - Webpack build steps/config
├── yarn.lock - Locked project dependencies