wallacesat / starwars-front-api

A ReactJS application that consumes a dummy data API in the development environment and a real API in the production environment

Starwars front-end API

A simple web application that makes use of a fictional Star Wars data api and displays them on screen, sorting them into a table according to the selected category, these categories being people, spaceships, planets and vehicles.

Getting started

In your prefer local path:

• git clone https://github.com/wallacesat/Starwars-front-api
• cd Starwars-front-api
• yarn install
• yarn start

If you prefer, use npm instead of yarn

After the server starts successfully, you can make requests to the end points of this api.

NOTE

You will need internet access, because even if the API is running locally, the data collection is stored in an online database.

Getting tested

In your local path project:

• yarn test
• then press 'a' key to test all components

If you prefer, use npm instead of yarn

The test result will be printed on the terminal as the example below:

Coverage

When running the test a code coverage report will be generated.

To view this report, simply go to the root of the project and open the file 'jest_html_reporters.html' in your browser.

The detailed coverage report will be displayed as the example below:

Continuous integration

The continuous integration of this application was accomplished through the bitbucket pipeline. Where a battery of automated unit tests runs, and if all tests pass, the application deploy is approved and done automatically.

You can see below a part of the pipeline history generated by bitbucket right after the automated tests run:

And to make sure everything went as expected, below you can view the log of the hosting Firebase, the successful deployment was automatically:

Frameworks

Axios

To handle HTTP browser requests.

Reactstrap

In this application this module was used for the implementation of the tables.

React-router-dom

For managing internal navigation, between the pages of this application.

Redux

For centralization and management of application state.

ExpressJS

For management of routing system, routes, HTTP requests and responses.

Cross-env

For multiplatform environment variable definition.

Npm-run-all

To enable the execution of multiple scripts. This allows two applications to be started in parallel.

Fake API and Database

Json-schema-faker

For simulating an API with fake data. Enables front-end development without prior access to a real API.

Chance

To generate the random data that will compose the api fake database.

Chalk

To color the words printed on the terminal output.

Test tools

Jest

To perform unit testing of application components.

Enzyme

For the simulation of the states and returns of attributes and properties of components, thus enabling the unit test on each component separately, detaching them from the dependencies of other isolated components.

Redux-mock-store

To perform the tests on the components linked to the application store, which in this case is managed by Redux.

Nock

To simulate the return of HTTP requests, manipulating the data and status, thus enabling the test alone in the components that perform this type of request.

Languages

• Javascript - w3school: JS tutorial
• ES6 - ECMAScript 2015: Specification
• JSX Sintax - React: JXS introduction
• CSS - w3school: CSS tutorial

License

MIT © wallacesat