React Starwars - A Star Wars database application created in React using Star wars API ⚡️

Project Briefing

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

Features/Requirements

• 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.

Built With

• React
• React Query
• Spectre CSS Framework

Project setup

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

Production Deployment

• 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

1. 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.

2. 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.

Heroku Deployment

• This app can be seamlessly deployed on Heroku using this buildpack https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack

Future Requirements

• Might as well have detail sections for each character, vehicle and more from the API.
• Search filtering might be added.

Updates

• More pages to fetch more types of data from the Star Wars API might be available in future, would be notified here.

Project Screenshots

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.