This web app is an example of an application that can be built using the
JavaScript framework ReactJS.
https://nothingnothings.github.io/ReactDex
Single Page Application (SPA) built with the ReactJS library/framework (create-react-app). The app's design was inspired by the website https://pokeapi.co. Bootstrap, Flexbox, and media queries were used to create a responsive design (aiming to provide the best possible experience across multiple screen configurations/devices, both desktop and mobile, with varying resolutions). Following the latest guidelines/versions of the React library, the app was built using functional components, moving away from the class-based approach ("class App extends React.Component{}") used in the past.
The app was initialized/bootstrapped with the create-react-app command/environment and deployed with GitHub Pages, assisted by GitHub Actions.
Some of the languages and libraries that were used:
- Node Package Manager (bootstrapping and managing the React application)
- HTML5 (with JSX, due to React)
- CSS3 (animations, Flexbox, media queries)
- Vanilla JavaScript for setting up a Single Page Application on GitHub Pages (script placed in the
<head>of theindex.htmlfile) - ReactJS (JavaScript library/framework, app composed entirely of React components)
- TypeScript (for type safety of objects received from backend endpoints, models, and interfaces, etc.)
- React Router (for navigation between the different "pages" of the app)
- Local state management (two main states: the central one in "App.js", used in the "Pokedex" and "Search for a Pokémon" pages, and the individual Pokémon state located in the "PokemonDetails" page, accessed via the route "/pokedex/:pokemonId")
- Bootstrap (used in the navigation bar and for overall positioning of elements on the page, with "container," "row," and "col")
- Axios (for communication, requests, and responses between this frontend application and the targeted backend API endpoints provided by the domain "pokeapi.co")
The development environment (created by using the create-react-app tool/environment/workflow):
.\
│
├── .github\
│ │
│ └── workflows\
│ └── publish.yml
│
│
├── public\
│ │
│ ├── fonts\
│ │ └── Pokemon Solid.ttf
│ │
│ ├── 404.html
│ ├── favicon-16x16.png
│ ├── favicon-32x32.png
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ └── manifest.json
│
├── snapshot\
│ ├── Reactdex1.png
│ └── Reactdex2.png
│
├── src\
│ │
│ ├── components\
│ │ │
│ │ ├── Card\
│ │ │ ├── Card.css
│ │ │ └── Card.tsx
│ │ │
│ │ ├── ErrorComponent\
│ │ │ ├── ErrorComponent.css
│ │ │ └── ErrorComponent.tsx
│ │ │
│ │ ├── PokeSearch\
│ │ │ └── PokeSearch.tsx
│ │ │
│ │ ├── Pokedex\
│ │ │ ├── Pokedex.css
│ │ │ └── Pokedex.tsx
│ │ │
│ │ ├── PokemonDetailsCard\
│ │ │ ├── PokemonDetailsCard.css
│ │ │ └── PokemonDetailsCard.tsx
│ │ │
│ │ ├── UI\
│ │ │ │
│ │ │ ├── PokeBall\
│ │ │ │ ├── Pokeball.css
│ │ │ │ └── Pokeball.tsx
│ │ │ │
│ │ │ ├── Spinner\
│ │ │ │ └── Spinner.tsx
│ │ │ │
│ │ │ └── Toolbar\
│ │ │ │
│ │ │ ├── MainNavigation\
│ │ │ │ │
│ │ │ │ ├── NavigationItems\
│ │ │ │ │ │
│ │ │ │ │ ├── NavigationItem\
│ │ │ │ │ │ ├── NavigationItem.css
│ │ │ │ │ │ └── NavigationItem.tsx
│ │ │ │ │ │
│ │ │ │ │ ├── NavigationItems.css
│ │ │ │ │ └── NavigationItems.tsx
│ │ │ │ │
│ │ │ │ ├── MainNavigation.css
│ │ │ │ └── MainNavigation.tsx
│ │ │ │
│ │ │ ├── Toolbar.css
│ │ │ └── Toolbar.tsx
│ │ │
│ │ │
│ │ ├── Utility\
│ │ │ │
│ │ │ └── ScrollToTop\
│ │ │ └── ScrollToTop.tsx
│ │ │
│ │ │
│ │ └── hocs\
│ │ │
│ │ ├── Layout\
│ │ │ └── Layout.tsx
│ │ │
│ │ └── PokedexWrapper\
│ │ ├── PokedexWrapper.css
│ │ └── PokedexWrapper.tsx
│ │
│ │
│ │
│ ├── models\
│ │ ├── pokemon.model.ts
│ │ └── simplepokemon.model.ts
│ │
│ ├── pages\
│ │ │
│ │ ├── PokedexPage\
│ │ │ └── PokedexPage.tsx
│ │ │
│ │ ├── PokemonDetails\
│ │ │ └── PokemonDetails.tsx
│ │ │
│ │ └── PokemonSearch\
│ │ └── PokemonSearch.tsx
│ │
│ │
│ ├── App.tsx
│ ├── index.css
│ ├── index.tsx
│ └── logo.svg
│
├── README.md
├── README.pt-br.md
├── package-lock.json
├── package.json
├── react-app-env.d.ts
└── tsconfig.json
The production output of create-react-app, which can be viewed in the gh-pages branch (responsible for deploying the app):
.\
│
├── fonts\
│ └── Pokemon Solid.ttf
│
├── static\
│ │
│ ├── css\
│ │ ├── main.d8663289.css
│ │ └── main.d8663289.css.map
│ │
│ ├── js\
│ │ ├── main.006563d5.js
│ │ ├── main.006563d5.js.LICENSE.txt
│ │ └── main.006563d5.js.map
│ │
│ └── media\
│ └── Pokemon Solid.5d60be1f7ff5fcc21fc1.ttf
│
│
├── .nojekyll
├── 404.html
├── asset-manifest.json
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
└── manifest.json
The package.json file used in the project:
{
"name": "projeto-pokemon",
"version": "0.1.0",
"private": true,
"homepage": "https://nothingnothings.github.io/pokemonapi",
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^29.2.0",
"@types/node": "^18.11.3",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"axios": "^1.1.3",
"gh-pages": "^4.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"typescript": "^4.8.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
The tsconfig.json file used in the project:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
To use this project, clone it using Git:
- Run
git cloneto clone the project into your local Git repository. - Run
npm installto install all dependencies (react,axios, etc.). - Run
npm run buildto create the production/deployment version of the application (outputted in the/builddirectory). - Serve the production/deployment files locally or on the web (with the help of a hosting service).
- On the "Pokédex" page, click/tap on the Pokémon whose characteristics you want to view. On the "Search for a Pokémon" page, type the name of the Pokémon you want to search for.
- Single-page application with no page reloads, using a single HTML file (ReactJS).
- Application divided into various components, some of which are reused across different pages (design philosophy of the ReactJS library).
- Custom CSS design.
- Responsive design (adaptive, supporting mobile and desktop devices) created with Bootstrap, Flexbox, and media queries.
- GitHub Actions and GitHub Pages usage with the
create-react-apptool to build a seamless workflow (transitioning from development to production/deployment). With thegit pushcommand, GitHub Actions transfers the content from themasterbranch to thegh-pagesbranch, which then deploys the app at https://nothingnothings.github.io/ReactDex/. - Usage of the Axios package/tool for communication with the backend "pokeapi.co," which provides Pokémon data (names, IDs, weight, height, types, abilities, etc.) to the React app.
- Utilization of core features of the ReactJS library, such as the hooks
useState()anduseEffect(). - Custom loading spinner (Pokéball).
- Custom error page that outputs the error message/reason to the user.
- Favicon compatible with various devices.