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.
git clone https://github.com/wallacesat/Starwars-front-apicd Starwars-front-apiyarn installyarn start
If you prefer, use
npminstead ofyarn
After the server starts successfully, you can make requests to the end points of this api.
You will need internet access, because even if the API is running locally, the data collection is stored in an online database.
yarn testthen press 'a' key to test all components
If you prefer, use
npminstead ofyarn
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 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:
To handle HTTP browser requests.
In this application this module was used for the implementation of the tables.
For managing internal navigation, between the pages of this application.
For centralization and management of application state.
For management of routing system, routes, HTTP requests and responses.
For multiplatform environment variable definition.
To enable the execution of multiple scripts. This allows two applications to be started in parallel.
For simulating an API with fake data. Enables front-end development without prior access to a real API.
To generate the random data that will compose the api fake database.
To color the words printed on the terminal output.
To perform unit testing of application components.
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.
To perform the tests on the components linked to the application store, which in this case is managed by Redux.
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.
- Javascript - w3school: JS tutorial
- ES6 - ECMAScript 2015: Specification
- JSX Sintax - React: JXS introduction
- CSS - w3school: CSS tutorial
MIT © wallacesat