https://github.com/apfirebolt/react-starwars-api
A React application which integrates Star Wars public API to display data from Star Wars franchise
https://github.com/apfirebolt/react-starwars-api
docker react react-query react-router-v6 reactjs spectre-css swapi-api
Last synced: about 1 year ago
JSON representation
A React application which integrates Star Wars public API to display data from Star Wars franchise
- Host: GitHub
- URL: https://github.com/apfirebolt/react-starwars-api
- Owner: Apfirebolt
- License: mit
- Created: 2021-12-02T20:43:02.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-03-10T00:23:47.000Z (about 1 year ago)
- Last Synced: 2025-03-10T00:25:26.216Z (about 1 year ago)
- Topics: docker, react, react-query, react-router-v6, reactjs, spectre-css, swapi-api
- Language: TypeScript
- Homepage:
- Size: 844 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
For more information please visit the API website and the docs [here](https://swapi.dev/)
Made with ❤️ by **[@apfirebolt](https://github.com/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](https://reactjs.org/)
* [React Query](https://react-query.tanstack.com/)
* [Spectre CSS Framework](https://picturepan2.github.io/spectre/)
## 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.
