This is an web application created using React which integrates with open API for Star Wars to display information from Star Wars franchise in various categories.
The project is available for showcase at https://react-starwars-api-jet.vercel.app
For more information please visit the API website and the docs here
Made with ❤️ by @apfirebolt
- The app aims at displaying data from the Star Wars API in an attractive looking UI.
- The API has data from various categories like Planets, People, Ships and Vehicles.
- Each category would have a separate page.
- Pagination and API caching is enabled through the use of 'react-query' library.
Simply install node modules for frontend and run conventional commands to see it in development mode on your local system. For production environment use 'Docker'.
npm install
npm start
- Docker containers are used for deploying this.
- You can own a virtual server or configure your ECS AWS instances with Docker to deploy this.
- React production build would be served through Nginx, everything would be through Docker containers.
sudo docker build -t react-starwars .
sudo docker run -d --name evil_react -p 80:80 react-starwars
-
First step is to create a Docker image from the Docker file within this repo, optionally you can tag it with a name otherwise some random fancy name would be assigned to it.
-
Once you have the image, you can spawn a container using the second command and then check on localhost port 80 to see the running container.
- This app can be seamlessly deployed on Heroku using this buildpack https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack
- Might as well have detail sections for each character, vehicle and more from the API.
- Search filtering might be added.
- More pages to fetch more types of data from the Star Wars API might be available in future, would be notified here.
Some of the screenshots for this application are listed below. For instance this one displays information about planets from the Star Wars franchise.
Star ships information
Data from the vehicles API end-point.