{"id":15200033,"url":"https://jagoda11.github.io/pokemon-react-app/","last_synced_at":"2025-10-02T16:30:50.808Z","repository":{"id":244943946,"uuid":"816742194","full_name":"Jagoda11/pokemon-react-app","owner":"Jagoda11","description":"🐢 displaying pokemons 🐡 React application built with TypeScript that leverages the Pokémon API to display a list of Pokémon and their detailed information. The application consists of two primary pages: a list of Pokémon and a detail page for each individual Pokémon. The detail page also showcases the selected Pokémon's evolutions. 🐹 ","archived":false,"fork":false,"pushed_at":"2024-11-08T02:26:17.000Z","size":2291,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-18T06:26:13.354Z","etag":null,"topics":["awesome-list","babel","ci-cd","code-spaces","eslint","formatting","frontend","gh-pages","github-actions","github-pages","jest","pokemon-api","prettier","react","react-hooks","react-router","redux","typescript","unit-testing","webpack"],"latest_commit_sha":null,"homepage":"https://jagoda11.github.io/pokemon-react-app/","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/Jagoda11.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":"Jagoda11"}},"created_at":"2024-06-18T10:13:59.000Z","updated_at":"2024-11-08T02:25:34.000Z","dependencies_parsed_at":"2024-10-11T19:20:52.476Z","dependency_job_id":"b0cfc70d-dd86-4911-9d4a-28db373f2906","html_url":"https://github.com/Jagoda11/pokemon-react-app","commit_stats":{"total_commits":59,"total_committers":4,"mean_commits":14.75,"dds":0.0847457627118644,"last_synced_commit":"4652655d4373c7d8c57574f23a4afe07f5977409"},"previous_names":["jagoda11/pokemon-react-app"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jagoda11%2Fpokemon-react-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jagoda11%2Fpokemon-react-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jagoda11%2Fpokemon-react-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jagoda11%2Fpokemon-react-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jagoda11","download_url":"https://codeload.github.com/Jagoda11/pokemon-react-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235019324,"owners_count":18923344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["awesome-list","babel","ci-cd","code-spaces","eslint","formatting","frontend","gh-pages","github-actions","github-pages","jest","pokemon-api","prettier","react","react-hooks","react-router","redux","typescript","unit-testing","webpack"],"created_at":"2024-09-28T02:40:21.757Z","updated_at":"2025-10-02T16:30:50.803Z","avatar_url":"https://github.com/Jagoda11.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Jagoda11"],"categories":["🚀 Deployment"],"sub_categories":[],"readme":"# Pokémon React App\n\n![License](https://img.shields.io/github/license/Jagoda11/pokemon-react-app?style=flat-square\u0026color=orange)\n![Open Issues](https://img.shields.io/github/issues/Jagoda11/pokemon-react-app?style=flat-square\u0026color=orange)\n![Last Commit](https://img.shields.io/github/last-commit/Jagoda11/pokemon-react-app/main?style=flat-square\u0026color=blue)\n![Build Status](https://github.com/Jagoda11/pokemon-react-app/actions/workflows/🚀ci.yml/badge.svg?branch=main)\n![Build Status](https://github.com/Jagoda11/pokemon-react-app/actions/workflows/⬆️npm-update.yml/badge.svg?branch=main)\n![TypeScript](https://img.shields.io/github/package-json/dependency-version/Jagoda11/pokemon-react-app/dev/typescript?label=TypeScript)\n![React](https://img.shields.io/github/package-json/dependency-version/Jagoda11/pokemon-react-app/react?label=React)\n\nThis is a React application built with TypeScript that leverages the Pokémon API to display a list of Pokémon and their detailed information.\nThe application consists of two primary pages:\na list of Pokémon\nand a detail page for each individual Pokémon. The detail page also showcases the selected Pokémon's evolutions, if any.\nThe app features modern web development tools and best practices, including Webpack, Babel, ESLint, Prettier, and Jest for testing.\n\n## 🚀 Deployment\n\nThis application is deployed using GitHub Pages. You can access it at [Pokémon React App](https://Jagoda11.github.io/pokemon-react-app).\n\nFor details on how this app is deployed using TypeScript, GitHub Actions, and GitHub Pages, check out my Medium article: [Deploying a React App with TypeScript and GitHub Actions to GitHub Pages](https://medium.com/@jagoda11/deploying-a-react-app-with-typescript-and-github-actions-to-github-pages-93c12d6c6675)\n\n## Screenshots\n\n### Pokémon List Page\n\n![Pokémon List Page](./assets/pokemons-list.png)\n\n### Pokémon Detail Page\n\n\u003cdiv style=\"text-align: center;\"\u003e\n  \u003cimg src=\"./assets/pikachu.png\" alt=\"Pokémon Detail Page\" width=\"300\"\u003e\n\u003c/div\u003e\n\n## Features\n\n- 📋 Display a list of 10 Pokémon with their images and names.\n- 🔄 Navigate through the list using next and previous buttons to load more Pokémon.\n- 📄 View detailed information about each Pokémon, including their name, image, abilities, and evolutions.\n- 🧬 Display a list of evolutions with images and names, which are also clickable to view their details.\n- 🔙 Navigate between list and detail pages using the browser's back and forward buttons.\n- 🔗 Bookmark or share links to favorite Pokémon's detail pages.\n- ♿ Ensure accessibility and responsiveness for a wide range of devices and users.\n\n## Technologies Used\n\n- ⚛️ **React**: A JavaScript library for building user interfaces.\n- 📜 **TypeScript**: A superset of JavaScript that adds static types.\n- 🌐 **Webpack**: A module bundler for JavaScript applications.\n- 🛠️ **Babel**: A JavaScript compiler for converting ECMAScript 2015+ code into a backwards-compatible version.\n- 📏 **ESLint**: A tool for identifying and fixing linting problems in JavaScript.\n- 🖋️ **Prettier**: An opinionated code formatter for consistent code style.\n- 🧪 **Jest**: A JavaScript testing framework for unit and integration tests.\n- 🔄 **React Router**: A library for routing in React applications.\n- 🔍 **Jest Testing Library**: Utilities for testing React components.\n- 🌳 **Redux**: A predictable state container for JavaScript apps.\n\n## 🚀 Initial Setup\n\n```bash\ngit clone https://github.com/Jagoda11/pokemon-react-app.git\n```\n\ncd pokemon-react-app\n\n```bash\nnpm install\n```\n\n## 📜 Scripts\n\nTo run these scripts, use `npm run \u003cscript-name\u003e`:\n\n- `start`: 🚀 Builds the code and starts the application at `http://localhost:3002.`\n- `build`: 🔨 Compiles the TypeScript code\n- `test`: 🧪 Runs tests using Jest and generates a coverage report.\n- `format`: 🖋️ Formats the code using Prettier.\n- `lint`: 🧹 Lints all files in the project using ESLint.\n\n- `pretest`: 🔍 Lints the code before running tests.\n- `watch`: 👀 Runs tests in watch mode using Jest.\n- `clean`: 🧽 Removes the `node_modules` directory and `package-lock.json` file.\n\n## 🤖 GitHub Actions Workflows\n\nThis template includes several GitHub Actions workflows that automate various tasks:\n\n- `🚀ci.yml`: Runs your project's continuous integration (CI) tasks.\n- `🔒close-merged-pull-requests.yml`: Automatically closes pull requests that have been merged.\n- `🔐close-stale-issues-and-prs.yml`: Closes stale issues and pull requests.\n- `🏷️label-new-pull-requests.yml`: Automatically adds labels to new pull requests.\n- `⬆️npm-update.yml`: checks for new versions of the dependencies and updates package.json and package-lock.json, scans with\n  [Debricked](https://debricked.com/) for vulnerabilities before it pushes the changes.\n\nThese workflows use the `secrets.GITHUB_TOKEN` secret, which GitHub automatically creates for every repository. You can create a personal access token and add it as a secret in your repository. For more information, see [Creating and storing encrypted secrets](https://docs.github.com/en/actions/reference/encrypted-secrets).\n\n## 🌐 GitHub Codespaces Support\n\nThis project includes a `.devcontainer.json` file, which allows you to work on this project in a Docker container using [GitHub Codespaces](https://github.com/features/codespaces). This helps to maintain a consistent development environment, making it easier for you to collaborate with others without having to worry about individual setups.\n\nGitHub Codespaces configures your development environment based on your project's needs using this file. When you create a new codespace for this project, the Codespaces environment is automatically configured as per the settings defined in `.devcontainer.json`.\n\nTo use GitHub Codespaces:\n\n1. Navigate to the main page of the repository.\n2. Click the Code button and then click \"Open with Codespaces\".\n3. Click \"+ New codespace\".\n\nYour development environment is now set up and running in a Docker container in the cloud. All commands you run in the Codespaces terminal will be executed inside the container. Any changes you make to the project will be reflected in the container and vice versa.\n\n## Contributing\n\nWe welcome contributions! Here are some guidelines to help you get started:\n\n1. **Fork the Repository**: Click the \"Fork\" button at the top right of this page.\n2. **Clone Your Fork**: Clone your fork to your local machine.\n\n```bash\ngit clone https://github.com/Jagoda11/pokemon-react-app.git\ncd pokemon-react-app\n```\n\nCreate a Branch: Create a new branch for your feature or bugfix.\n\n```bash\ngit checkout -b my-feature-branch\n```\n\nMake Your Changes: Make your changes to the codebase.\n\nCommit Your Changes: Commit your changes with a clear message.\n\n```bash\ngit commit -m \"Add new feature\"\n```\n\nPush to Your Fork: Push your changes to your fork.\n\n```bash\ngit push origin my-feature-branch\n```\n\nOpen a Pull Request: Open a pull request against the main branch of this repository.\n\n## Issue Templates\n\nWhen opening a new issue, please use the relevant template:\n\n- [Bug Report](.github/ISSUE_TEMPLATE/bug_report.md)\n- [Custom Issue](.github/ISSUE_TEMPLATE/custom_issue.md)\n- [Feature Request](.github/ISSUE_TEMPLATE/feature_request.md)\n\n## Code of Conduct\n\nPlease read our [Code of Conduct](CODE_OF_CONDUCT.md) to understand the standards we uphold in our community.\n\n## 📝 License\n\nJust like how Pooh Bear shares his honey with his friends, this project is shared under the MIT License. 🍯🐻 - see the [LICENSE](LICENSE.md) file for details.\n\n© 2024 Jagoda11\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/jagoda11.github.io%2Fpokemon-react-app%2F","html_url":"https://awesome.ecosyste.ms/projects/jagoda11.github.io%2Fpokemon-react-app%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/jagoda11.github.io%2Fpokemon-react-app%2F/lists"}