This is a SPA project based on React.js. It has five views, About Page, Pokedex Page, Team Build Page, Form Page, and Policy Page.
- In About Page, I write a Accordion UI, to explain how to use my website.
- In Pokedex Page, I will load 20 pokemons every time, user can use button to view the previous (if available) 20 pokemons or next 20 pokemons.
- In Team Build Page, user can build their own team by entering the pokemon id.
- In Form Page, user can sign up to become website membership, and after submitting their information, I will store their infomation in state and display their user name.
- In Policy Page, it a fake policy agreement, I add skiplink in this page for quick navigation.
Clone the repo.
npm install
npm run build
npx serve -s build
I use 5 complex UI in this project.
- In Main Page, I use a Tab UI to navigate between five views.
- In About Page, I use an accodion UI to introduce basic information.
- In Pokedex Page, I use a dynamic list UI to fetch the pokedex and display pokemon with relevant color.
- In Team Page, I use a Form and Card UI to allow user enter and then display specific pokemon.
- In Form Page, I use a Form with validation.
I use three loading indicators in this project.
- The first loading indicator in Pokedex page, it will show when our project to fetch 20 pokemons data form pokeapi.
- The secont loading indicator also in Pokedex page, it will show after we fetch the 20 pokemons data and need to fetch data for each single pokemon.
- The third loading indicator in Team Build page, it will show after user enter pokemon name or id.
I use two fonts from Google Fonts, the Fonts links are:
- https://fonts.google.com/specimen/Sigmar+One?query=sigma#standard-styles
- https://fonts.google.com/specimen/Beau+Rivage
I use three Loading Indicators from css.gg, the Indicators links are:
I will one image from freepngimg.com as my logo, the image link:
I also use one favicon from uxwing.com, the favicon link:
All of the assets I mentioned above and used in my project, the license says it is allowed to free use, at least it is allowed to free use in personal project. The license details are: