The idea is that a user create a collection of their favourite star wars related stuff: films, people, planets, vehicles, starships. At the moment, the default is to fetch films. you can toggle results, but there's no results yet for characters ( or any of the others ), so some ideas for improvments could be ( getting progressively harder):
1 wire up the endpoint to display the results for characters just like the films components work. ( ie copy/paste )
2 we need pagination also for the results - luckily the json provides a next and previous and a total count of items
-- there's a faves component but all we can do is add, we can't delete or sort by rating.
3 update the removeFave function /features/faves/favesSlice.reducer.removeFave to find and remove the selected favourite from
the state faves array
4 It's possible to add the same fave twice, extend the existing addFave function to make sure we're not adding the same fave again
5 change the FaveItemProps interface in the FavesItem component from any so that it satisfies the typescript compiler
remove the 'any' and add the correct type interface Props{ fave:any; handleRating:any; handleRemove:any; }
6 update the unit test to test the input/output of the FaveItem
7 create a new slice of state for a future shopping cart we're going to add later with addCartItem, removeCartItem and editCartItem methods and make sure that each item when added has a unique id
8 add filters eg type / 1-star 2-star 3-star
9 add new RTKQuery API end points for vehicles and planets to services https://swapi.dev/documentation
10 Time left? add some flair, a 'show off' feature
nvm install lts
nvm use 16.14.0
npm install -g [email protected]npm ci
npm start*** sometimes npm can be buggy, if you need to reinstall packages to clear any errors, then try the following command :
rm -rf node_modules
npm cii
npm startIf for some reason you can’t get the app to spin up then just have a go using ‘ npx create-react-app’ at hitting some of the endpoints, mapping the data and displaying the results as best you can.
-- You are advised to have VS Code, Redux dev tools, Eslint, Prettier, VS Code Chrome Debugger Extensions installed
-- useful links
https://redux-toolkit.js.org/introduction/getting-started
https://github.com/coreybutler/nvm-windows/releases
https://dev.to/skaytech/how-to-install-node-version-manager-nvm-for-windows-10-4nbi
https://create-react-app.dev/docs/getting-started/
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en
https://daveceddia.com/redux-tutorial/