Beezy | Frontend technical test

https://charlybeezymarvel.herokuapp.com/

Table of Contents

• Table of Contents
• About The Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
  • Deployment
  • What to do
  • There will be two principal screens in the app:
  • Requirements What to do

About The Project

In relation to the communication between client and server, Graphql has been chosen since it makes simpler the process of calling the API. As for the server, it has been created in the simplest way, providing all the business logic to the client and using Apolloin both parts as it is the library that best suits the client in React.

In terms of the client, in order to generate the structure of the application create-react-app was used. Personally speaking, if it was about developing on a real app, I would have considered other options if required, subjected to use cases.

With regard to using Material UI, I opted for this library to avoid complicating the design of user interface and to put more focus on development.

As for deployment, I used Heroku since it integrates perfectly with Github and facilitates using CircleCi for continuous integration.

Built With

• React
• Graphql
• Apollo Client-Apollo Server
• Express
• Material UI

Getting Started

You can use docker-compose and run the app with http://localhost:4000

docker-compose up

Or you can run it without docker.

Prerequisites

• npm or yarn

npm install npm@latest -g

brew install yarn

Installation

1. Clone the repo

git clone https://github.com/cavr/beezy-code-challenge.git

2. Install NPM packages

npm install or yarn install

3. Run tests

yarn run test or yarn run test

4. Start APP

npm run start or yarn run start

Deployment

As mentioned above, I used Heroku for deployment. When I push a commit, the tests are executed in CircleCI and, if they are ok, then it will be deployed with Heroku.

What to do

The purpose of the test is build a single page application with React, showing a list of items with some information in each of them, and another page showing detailed information of each item. Here you have a list of public APIs you can use for the test, but you can use another one, if you want: https://github.com/public-apis/public-apis Some recommendations: Marvel, SWAPI...

There will be two principal screens in the app:

• Listing: o It will show a list of items coming from the API, with some information. Title is mandatory. o The app will be able to order the items by, at least, the Title. o The app will be able to filter the items by some of the fields. It could be a property from the items with any select or checkbox or a search field, or all of them.
• Detail: o It will show detailed information of the selected element. Technical

Requirements

• The app should be done in React - The app should be compatible with IE11+. Bonus points
• Mobile support - Testing - User interface - Performance (loading and rendering)