React-Typescript Pokemon App

Used Tech and Libraries

• React JS
• Used React Router Dom for routing.
• Powered by Typescript
• Styled Components used for modular stying with Pure CSS
• Redux Toolkit / RTK Query used for data fetching and caching.

Click here for live demo

Folder Structure

├── public
│   └── favicon.svg
├── README.md
├── src
│   ├── app
│   │   ├── hooks.ts
│   │   └── store.ts
│   ├── App.tsx
│   ├── assets
│   │   ├── banner.jpg
│   │   ├── icons
│   │   │   ├── bug.png
│   │   │   ├── dark.svg
│   │   │   ├── electric.svg
│   │   │   ├── fairy.svg
│   │   │   ├── fighting.svg
│   │   │   ├── fire.png
│   │   │   ├── flying.png
│   │   │   ├── ground.svg
│   │   │   ├── ice.svg
│   │   │   ├── normal.svg
│   │   │   ├── poison.svg
│   │   │   ├── psy.svg
│   │   │   ├── rock.svg
│   │   │   ├── steel.svg
│   │   │   └── water.svg
│   │   ├── load_ball.png
│   │   ├── pokeball.png
│   │   └── pokemon-logo.png
│   ├── components
│   │   ├── BackToTop
│   │   │   ├── BackToTop.styled.ts
│   │   │   └── BackToTop.tsx
│   │   ├── DetailCard
│   │   │   ├── DetailCard.styled.ts
│   │   │   └── DetailCard.tsx
│   │   ├── LoadingBar
│   │   │   ├── LoadingBar.styled.ts
│   │   │   └── LoadingBar.tsx
│   │   ├── Navbar
│   │   │   ├── Navbar.styled.ts
│   │   │   └── Navbar.tsx
│   │   └── PokeCard
│   │       ├── PokeCard.styled.ts
│   │       └── PokeCard.tsx
│   ├── features
│   │   └── themeSlice.ts
│   ├── hooks
│   │   └── useCapitalizeLetter.ts
│   ├── index.css
│   ├── main.tsx
│   ├── router
│   │   └── AppRouter.tsx
│   ├── services
│   │   └── pokemonApi.ts
│   ├── styles
│   │   ├── globalStyles.ts
│   │   ├── mixins.ts
│   │   └── themeVariables.ts
│   ├── tests
│   │   ├── App.test.tsx
│   │   ├── Navbar.test.tsx
│   │   └── PokeCard.test.tsx
│   ├── types
│   │   ├── interfaces.ts
│   │   └── types.ts
│   ├── utils
│   │   └── utils.ts
│   ├── views
│   │   ├── Detail
│   │   │   ├── Detail.styled.ts
│   │   │   ├── Detail.tsx
│   │   │   └── index.ts
│   │   └── Home
│   │       ├── Home.styled.ts
│   │       ├── Home.tsx
│   │       └── index.ts
│   └── vite-env.d.ts
├── task.txt
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock

Elements

Pokemon Card

Card element contains:

• Pokemon Type Icon
• Pokemon Animated Gif
• Pokemon Stats
• Pokemon Moves
• Pokemon Items(if any)

Pokemon Evolution

Evolution element contains:

• Pokemon Evolve Stages
• Pokemon Abilities(color by type)
• Pokemon Evolve Names
• Pokemon Evolve Images
• Pokemon Weight and Height

License

Project created by Can Berk Ocalir for educational purposes.