{"id":29024445,"url":"https://github.com/laruschkaj/pokedex-project","last_synced_at":"2026-05-11T07:19:04.174Z","repository":{"id":300457209,"uuid":"1006227868","full_name":"Laruschkaj/Pokedex-Project","owner":"Laruschkaj","description":"A  React application (Pokedex) demonstrating component hierarchy, props, conditional rendering, and dynamic list generation to simulate a Pokemon card game with two randomized hands.","archived":false,"fork":false,"pushed_at":"2025-06-21T19:52:16.000Z","size":8,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-21T20:28:33.249Z","etag":null,"topics":["arrays","components","conditional-rendering","defaultprops","frontend","game","javascript","jsx","map","pokedex","pokemon","props","react","web-development"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Laruschkaj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2025-06-21T19:25:25.000Z","updated_at":"2025-06-21T20:03:30.000Z","dependencies_parsed_at":"2025-06-21T20:39:30.800Z","dependency_job_id":null,"html_url":"https://github.com/Laruschkaj/Pokedex-Project","commit_stats":null,"previous_names":["laruschkaj/pokedex-project"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Laruschkaj/Pokedex-Project","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Laruschkaj%2FPokedex-Project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Laruschkaj%2FPokedex-Project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Laruschkaj%2FPokedex-Project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Laruschkaj%2FPokedex-Project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Laruschkaj","download_url":"https://codeload.github.com/Laruschkaj/Pokedex-Project/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Laruschkaj%2FPokedex-Project/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261997402,"owners_count":23242250,"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":["arrays","components","conditional-rendering","defaultprops","frontend","game","javascript","jsx","map","pokedex","pokemon","props","react","web-development"],"created_at":"2025-06-26T04:01:50.755Z","updated_at":"2026-05-11T07:19:04.100Z","avatar_url":"https://github.com/Laruschkaj.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pokedex-Project\nA  React application (Pokedex) demonstrating component hierarchy, props, conditional rendering, and dynamic list generation to simulate a Pokemon card game with two randomized hands.\n\n# **React Props: Pokedex**\n\n**This exercise lets you pratice using React components and properties.**\n\n## Steps\n\nCreate a pokemon application (a “pokedex”) that displays an interface that looks like this:\n\n![Screen Shot 2023-05-08 at 3.59.31 PM.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/556adb66-c855-4ee2-a1fb-b422b8d4b852/Screen_Shot_2023-05-08_at_3.59.31_PM.png)\n\nTo create the pokedex, you should use 3 components:\n\n**App :** This should just render a single Pokedex. (It’s common for the top-level app to not have direct logic in it, but to render the top application object — this becomes useful when you build sites that compose several different parts together.)\n\n**Pokecard :** Shows a single Pokemon, with their name, image, and type. \n\n**Pokedex : I**s provided, via props, an array of objects describing different pokemon, and renders a sequence of ***Pokecard*** components.\n\nUse the defaultProps feature of ***Pokedex*** to provide a default list of Pokemon characters to show. You can use this list for a good set of defaults:\n\n```jsx\n[\n  {id: 4, name: 'Charmander', type: 'fire', base_experience: 62},\n  {id: 7, name: 'Squirtle', type: 'water', base_experience: 63},\n  {id: 11, name: 'Metapod', type: 'bug', base_experience: 72},\n  {id: 12, name: 'Butterfree', type: 'flying', base_experience: 178},\n  {id: 25, name: 'Pikachu', type: 'electric', base_experience: 112},\n  {id: 39, name: 'Jigglypuff', type: 'normal', base_experience: 95},\n  {id: 94, name: 'Gengar', type: 'poison', base_experience: 225},\n  {id: 133, name: 'Eevee', type: 'normal', base_experience: 65}\n]\n```\n\nFor each pokemon, their image source should be:***https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png***\n.\n\n## **Further Study: More Pokemon!**\n\n### **Pokegame Component**\n\nModify your component hierarchy so that ***App*** renders a component called ***Pokegame***. ***Pokegame*** should take your list of 8 pokemon and randomly assign them into two hands of 4 cards each. It should then render two ***Pokedex*** components, one for each hand.\n\nOnce you’ve got this working, modify your ***Pokegame*** so that it also calculates the total experience for each hand of pokemon. It should pass this total to the ***Pokedex***.\n\nNext, have the ***Pokegame*** component determine which hand is the “winner,” where the winning hand is the one with the higher total experience. Then modify the ***Pokedex*** component one more time so that it accepts a prop of ***isWinner***. If the ***Pokedex*** is the winning one, it should display the message “THIS HAND WINS!” at the bottom of the deck.\n\nNow when you load the page, you should see two different hands with a randomly changing winner every time you refresh.\n\n### **Styling**\n\nAdd styling to your components — perhaps you can do interesting things when hovering over a Pokecard, or have them smoothly transition into the page, all via CSS?\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaruschkaj%2Fpokedex-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaruschkaj%2Fpokedex-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaruschkaj%2Fpokedex-project/lists"}