ashcrysis / matriz-leetcode

Matriz is a student group to study coding languages and technologies

Driven by challenges, almost a game developer

---

About Me

• +4 years of programming experience
• Developing games since 2020 using GameMaker & Unity
• Actively participating in game jams
• Worked on international projects

---

Skills

Languages & Frameworks

• 🗣️ Advanced English
• 🥶 C#, Java, JavaScript, Python, Kotlin, Ruby
• 🧊 Unity, GameMaker Studio 2, Godot
• ☁️ React JS, Ruby on Rails

Tools & Technologies

• 😶‍🌫️ Large-Scale Data Transformation
• 🐉 Web Data Extraction and Process Automation with Selenium
• ☁️ Databricks, AWS, Microsoft Server

---

Professional Contact

• Email: [email protected]

---

My Skills

---

GitHub Stats

matriz-leetcode's Issues

React Application to Fetch and Display Pokemon Data

Request: React Application to Fetch and Display Pokemon Data

Description

I want to request the creation of a React JS application that allows users to fetch and display information about a Pokémon by entering its ID or name. The application should use the PokeAPI v2 for fetching Pokémon data and display the information in a user-friendly manner.

Requirements

1. User Input: The application should have an input field where users can type the Pokémon's ID or name.
2. Fetch Data: Upon submitting the input, the application should fetch data from the PokeAPI v2.
3. Display Data: Display the fetched Pokémon information, including its name, image, type(s), and any other relevant details.
4. Error Handling: Handle errors, such as displaying a message if the Pokémon is not found.
5. Styling: Use CSS to style the application, ensuring it is visually appealing and responsive.

Technical Details

• Framework: React JS
• API: PokeAPI v2 (https://pokeapi.co/api/v2/)
• Styling: CSS (preferably using CSS modules or styled-components for better modularity)

Example Workflow

1. User enters a Pokémon ID or name into the input field.
2. User submits the form.
3. Application fetches data from the PokeAPI v2.
4. If the Pokémon is found, display its:
   • Name
   • Image
   • Type(s)
   • Abilities
   • Any other relevant information
5. If the Pokémon is not found, display an error message.

References

• PokeAPI v2 documentation: https://pokeapi.co/docs/v2
• useState documentation : https://react.dev/reference/react/useState
• useEffect documentation : https://www.w3schools.com/react/react_useeffect.asp
• fetch api documentation : https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch / https://www.freecodecamp.org/news/how-to-fetch-data-from-an-api-using-the-fetch-api-in-javascript/

Additional Notes

• Ensure the application is responsive and works well on both desktop and mobile devices.
• Consider using modern React hooks such as useState and useEffect for managing state and side effects.