Версия на русском языке

https://al3xsus.github.io/Star-Wars-React-SPA/

A simple SPA dedicated to the Star Wars universe. Technology stack: React (create-react-app), Semantic UI React, SPA. The API https://swapi.dev/ was used to obtain information. Color palette source - https://loading.io/color/feature/StarWars-Yoda

SPA consists of three sections - Films, People, Starships. Each of the sections has a search and filter panel, a list of objects, and a pagination panel.

How to search? Type the desired search expression (every section has its own hint for the desired field) and click on the search icon.

How to filter? Select the desired operation from the drop-down list, type the desired value for filtration and click on the filter icon.

How to reset the result? Clear the search and click on the icon again.

When you click on an object, a modal window with more complete information will appear on the screen. Part of information requiring additional loading will be presented as links. If you click on the button on the right, those information links will be downloaded and processed.

ATTENTION. Sometimes an API can take a very long time to respond. That is why getting all data is derived by separate functionality.

Run from the project folder:

To install modules

To launche the application in development mode at [http: // localhost: 3000] (http: // localhost: 3000).

To build project in the build folder.

To install a local server.

To run built project on a local server.

Homepage

The top of the section and the search and filter panel

The bottom of the section and the pagination panel

Search results

Filter Results

Modal window without additional data loading

Modal window with all data downloaded