This project was bootstrapped with Create React App. Using API from SWAPI.
To see this project in action, go to Demo Star Wars on Code SandBox
![preview](https://raw.githubusercontent.com/AOMuiz/starwars/main/./docs/assets/initialpage.png)
![preview](https://raw.githubusercontent.com/AOMuiz/starwars/main/./docs/assets/error state.png)
![preview](https://raw.githubusercontent.com/AOMuiz/starwars/main/./docs/assets/loadingselect-movie.png)
![preview](https://raw.githubusercontent.com/AOMuiz/starwars/main/./docs/assets/moviedesc-marquee.png)
![preview](https://raw.githubusercontent.com/AOMuiz/starwars/main/./docs/assets/moviedetail.png)
![preview](https://raw.githubusercontent.com/AOMuiz/starwars/main/./docs/assets/tablefiltered.png)
![preview](https://raw.githubusercontent.com/AOMuiz/starwars/main/./docs/assets/tableSorted-asc.png)
![preview](https://raw.githubusercontent.com/AOMuiz/starwars/main/./docs/assets/tableSorted-desc.png)
Clone this repo :
git clone https://github.com/AOMuiz/starwars
Navigate to the root folder and install all dependencies :
yarn
ornpm install
Start Development Mode :
yarn start
ornpm start
- Open http://localhost:3000 to view it in the browser.
- Happy Hacking!
Build a Starwars Website Using Swapi api
List all characters(name, height, gender) in a table based on selected movie.
Filter table based on the selected gender.
Sort the table by clicking on the header in ascending or descending order.
Show the sum of the character and the total heights in cm(ft/in)
-
Used
React Js
for building the website. -
Implemented website styling using
Styled Components
. -
Used
Error Boundary
npm package for handling errors. -
Used
fetch api
for data fecthing. -
Created
Custom Hooks
for handling fetched data and rendering.
This project using relative unit based 10px. so you can use 1rem
which means 10px
propeties in css to help ours styling more easier handling Resposive.
State | Properties |
---|---|
Default | 1rem = 10px |
max-width 768px | 1rem = 9px |
max-width 576px | 1rem = 8px |
State | Properties |
---|---|
Default | width = 100% |
min-width 576px | width = 540px |
min-width 768px | width = 720px |
min-width 992px | width = 960px |
min-width 1200px | width = 1140px |