{"id":18255916,"url":"https://github.com/nothingnothings/reactdex","last_synced_at":"2026-04-15T10:37:54.400Z","repository":{"id":62019136,"uuid":"555857141","full_name":"nothingnothings/ReactDex","owner":"nothingnothings","description":"Basic Pokédex built with ReactJS.","archived":false,"fork":false,"pushed_at":"2024-09-23T19:41:53.000Z","size":6494,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-11T17:08:11.045Z","etag":null,"topics":["axios","bootstrap4","css3","frontend","gh-actions","gh-pages","html5","javascript","react","react-router","reacthooks","single-page-application","single-page-applications-with-react","state-management","typescript"],"latest_commit_sha":null,"homepage":"https://nothingnothings.github.io/ReactDex/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nothingnothings.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-22T13:51:54.000Z","updated_at":"2024-09-23T19:41:56.000Z","dependencies_parsed_at":"2024-11-05T10:35:11.475Z","dependency_job_id":null,"html_url":"https://github.com/nothingnothings/ReactDex","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nothingnothings/ReactDex","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FReactDex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FReactDex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FReactDex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FReactDex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nothingnothings","download_url":"https://codeload.github.com/nothingnothings/ReactDex/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FReactDex/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31837745,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T10:26:52.245Z","status":"ssl_error","status_checked_at":"2026-04-15T10:26:51.649Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","bootstrap4","css3","frontend","gh-actions","gh-pages","html5","javascript","react","react-router","reacthooks","single-page-application","single-page-applications-with-react","state-management","typescript"],"created_at":"2024-11-05T10:19:04.496Z","updated_at":"2026-04-15T10:37:54.380Z","avatar_url":"https://github.com/nothingnothings.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eReactDex - OceanBlue - A Pokédex Built with ReactJS\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"public/logo512.png\" alt=\"Reactdex-logo\" width=\"120px\" height=\"120px\"/\u003e\n  \u003cbr\u003e\n  \u003ci\u003eThis web app is an example of an application that can be built using the \n    \u003cbr\u003eJavaScript framework ReactJS.\u003c/i\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://nothingnothings.github.io/ReactDex\" target=\"_blank\" rel=\"noreferrer noopener\"\u003e\u003cstrong\u003ehttps://nothingnothings.github.io/ReactDex\u003c/strong\u003e\u003c/a\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\n\n\n## Introduction\n\n![Reactdex](snapshot/ReactDex1.png)\n\n\n\n\n![Reactdex](snapshot/ReactDex2.png)\n\n\n\n\n![Reactdex](snapshot/ReactDex3.png)\n\nSingle Page Application (SPA) built with the ReactJS library/framework (create-react-app). The app's design was inspired by the website [https://pokeapi.co](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.\n\nThe app was initialized/bootstrapped with the `create-react-app` command/environment and deployed with GitHub Pages, assisted by GitHub Actions.\n\n![CodeFactor Grade](https://img.shields.io/codefactor/grade/github/nothingnothings/ReactDex?style=flat-square)\n[![en](https://img.shields.io/badge/lang-en-red.svg?style=flat-square)](https://github.com/nothingnothings/ReactDex)\n[![pt-br](https://img.shields.io/badge/lang-pt--br-green.svg?style=flat-square)](https://github.com/nothingnothings/ReactDex/blob/master/README.pt-br.md)\n\n\n\n\n \n## Technologies\n \nSome of the languages and libraries that were used:\n \n- Node Package Manager (bootstrapping and managing the React application)\n- HTML5 (with JSX, due to React)\n- CSS3 (animations, Flexbox, media queries)\n- Vanilla JavaScript for setting up a Single Page Application on GitHub Pages (script placed in the `\u003chead\u003e` of the `index.html` file)\n- ReactJS (JavaScript library/framework, app composed entirely of React components)\n- TypeScript (for type safety of objects received from backend endpoints, models, and interfaces, etc.)\n- React Router (for navigation between the different \"pages\" of the app)\n- 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\")\n- Bootstrap (used in the navigation bar and for overall positioning of elements on the page, with \"container,\" \"row,\" and \"col\")\n- Axios (for communication, requests, and responses between this frontend application and the targeted backend API endpoints provided by the domain \"pokeapi.co\")\n \n \n## Project Directory Structure\n\nThe development environment (created by using the `create-react-app` tool/environment/workflow):\n\n\n```\n\n.\\\n│\n├── .github\\\n│   │\n│   └── workflows\\\n│       └── publish.yml\n│\n│\n├── public\\\n│   │\n│   ├── fonts\\\n│   │   └── Pokemon Solid.ttf\n│   │\n│   ├── 404.html\n│   ├── favicon-16x16.png\n│   ├── favicon-32x32.png\n│   ├── favicon.ico\n│   ├── index.html\n│   ├── logo192.png\n│   ├── logo512.png\n│   └── manifest.json\n│\n├── snapshot\\\n│   ├── Reactdex1.png\n│   └── Reactdex2.png\n│\n├── src\\\n│   │\n│   ├── components\\\n│   │   │\n│   │   ├── Card\\\n│   │   │   ├── Card.css\n│   │   │   └── Card.tsx\n│   │   │\n│   │   ├── ErrorComponent\\\n│   │   │   ├── ErrorComponent.css\n│   │   │   └── ErrorComponent.tsx\n│   │   │\n│   │   ├── PokeSearch\\\n│   │   │   └── PokeSearch.tsx\n│   │   │\n│   │   ├── Pokedex\\\n│   │   │   ├── Pokedex.css\n│   │   │   └── Pokedex.tsx\n│   │   │\n│   │   ├── PokemonDetailsCard\\\n│   │   │   ├── PokemonDetailsCard.css\n│   │   │   └── PokemonDetailsCard.tsx\n│   │   │\n│   │   ├── UI\\\n│   │   │   │\n│   │   │   ├── PokeBall\\\n│   │   │   │   ├── Pokeball.css\n│   │   │   │   └── Pokeball.tsx\n│   │   │   │\n│   │   │   ├── Spinner\\\n│   │   │   │   └── Spinner.tsx\n│   │   │   │\n│   │   │   └── Toolbar\\\n│   │   │       │\n│   │   │       ├── MainNavigation\\\n│   │   │       │   │\n│   │   │       │   ├── NavigationItems\\\n│   │   │       │   │   │\n│   │   │       │   │   ├── NavigationItem\\\n│   │   │       │   │   │   ├── NavigationItem.css\n│   │   │       │   │   │   └── NavigationItem.tsx\n│   │   │       │   │   │\n│   │   │       │   │   ├── NavigationItems.css\n│   │   │       │   │   └── NavigationItems.tsx\n│   │   │       │   │\n│   │   │       │   ├── MainNavigation.css\n│   │   │       │   └── MainNavigation.tsx\n│   │   │       │\n│   │   │       ├── Toolbar.css\n│   │   │       └── Toolbar.tsx\n│   │   │\n│   │   │\n│   │   ├── Utility\\\n│   │   │   │\n│   │   │   └── ScrollToTop\\\n│   │   │       └── ScrollToTop.tsx\n│   │   │\n│   │   │\n│   │   └── hocs\\\n│   │       │\n│   │       ├── Layout\\\n│   │       │   └── Layout.tsx\n│   │       │\n│   │       └── PokedexWrapper\\\n│   │           ├── PokedexWrapper.css\n│   │           └── PokedexWrapper.tsx\n│   │\n│   │\n│   │\n│   ├── models\\\n│   │   ├── pokemon.model.ts\n│   │   └── simplepokemon.model.ts\n│   │\n│   ├── pages\\\n│   │   │\n│   │   ├── PokedexPage\\\n│   │   │   └── PokedexPage.tsx\n│   │   │\n│   │   ├── PokemonDetails\\\n│   │   │   └── PokemonDetails.tsx\n│   │   │\n│   │   └── PokemonSearch\\\n│   │       └── PokemonSearch.tsx\n│   │\n│   │\n│   ├── App.tsx\n│   ├── index.css\n│   ├── index.tsx\n│   └── logo.svg\n│\n├── README.md\n├── README.pt-br.md\n├── package-lock.json\n├── package.json\n├── react-app-env.d.ts\n└── tsconfig.json\n```\n\n\nThe production output of `create-react-app`, which can be viewed in the `gh-pages` branch (responsible for deploying the app):\n\n\n```\n.\\\n│\n├── fonts\\\n│   └── Pokemon Solid.ttf\n│\n├── static\\\n│   │\n│   ├── css\\\n│   │   ├── main.d8663289.css\n│   │   └── main.d8663289.css.map\n│   │\n│   ├── js\\\n│   │   ├── main.006563d5.js\n│   │   ├── main.006563d5.js.LICENSE.txt\n│   │   └── main.006563d5.js.map\n│   │\n│   └── media\\\n│       └── Pokemon Solid.5d60be1f7ff5fcc21fc1.ttf\n│\n│\n├── .nojekyll\n├── 404.html\n├── asset-manifest.json\n├── favicon-16x16.png\n├── favicon-32x32.png\n├── favicon.ico\n├── index.html\n├── logo192.png\n├── logo512.png\n└── manifest.json\n```\n\n\n\n\n## Project Configuration Files (package.json and tsconfig.json)\n\n\nThe `package.json` file used in the project:\n\n```\n{\n  \"name\": \"projeto-pokemon\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"homepage\": \"https://nothingnothings.github.io/pokemonapi\",\n  \"dependencies\": {\n    \"@testing-library/jest-dom\": \"^5.16.5\",\n    \"@testing-library/react\": \"^13.4.0\",\n    \"@testing-library/user-event\": \"^13.5.0\",\n    \"@types/jest\": \"^29.2.0\",\n    \"@types/node\": \"^18.11.3\",\n    \"@types/react\": \"^18.0.21\",\n    \"@types/react-dom\": \"^18.0.6\",\n    \"axios\": \"^1.1.3\",\n    \"gh-pages\": \"^4.0.0\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\",\n    \"react-router-dom\": \"^6.4.2\",\n    \"react-scripts\": \"5.0.1\",\n    \"typescript\": \"^4.8.4\",\n    \"web-vitals\": \"^2.1.4\"\n  },\n  \"scripts\": {\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\"\n  },\n  \"eslintConfig\": {\n    \"extends\": [\n      \"react-app\",\n      \"react-app/jest\"\n    ]\n  },\n  \"browserslist\": {\n    \"production\": [\n      \"\u003e0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  }\n}\n```\n\n\nThe tsconfig.json file used in the project:\n\n\n```\n\n{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"strict\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": true,\n    \"jsx\": \"react-jsx\"\n  },\n  \"include\": [\n    \"src\"\n  ]\n}\n\n```\n\n## Installation/Usage\n\n\nTo use this project, clone it using Git:\n\n1. Run `git clone` to clone the project into your local Git repository.\n2. Run `npm install` to install all dependencies (`react`, `axios`, etc.).\n3. Run `npm run build` to create the production/deployment version of the application (outputted in the `/build` directory).\n4. Serve the production/deployment files locally or on the web (with the help of a hosting service).\n5. 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.\n\n\n## Features\n\n- Single-page application with no page reloads, using a single HTML file (ReactJS).\n- Application divided into various components, some of which are reused across different pages (design philosophy of the ReactJS library).\n- Custom CSS design.\n- Responsive design (adaptive, supporting mobile and desktop devices) created with Bootstrap, Flexbox, and media queries.\n- GitHub Actions and GitHub Pages usage with the `create-react-app` tool to build a seamless workflow (transitioning from development to production/deployment). With the `git push` command, GitHub Actions transfers the content from the `master` branch to the `gh-pages` branch, which then deploys the app at https://nothingnothings.github.io/ReactDex/.\n- 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.\n- Utilization of core features of the ReactJS library, such as the hooks `useState()` and `useEffect()`.\n- Custom loading spinner (Pokéball).\n- Custom error page that outputs the error message/reason to the user.\n- Favicon compatible with various devices.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnothingnothings%2Freactdex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnothingnothings%2Freactdex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnothingnothings%2Freactdex/lists"}