FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
shuyib
shuyibpokemonBattleAdvisor
Public
Like
pokemonBattleAdvisor
Home
Code
2
README.md
H
main.tsx
Branches
1
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in miliseconds.
Sign up now
Code
/
Code
/
Search
main.tsx
https://shuyib--c5985580277611f0b46e569c3dd06744.web.val.run
README.md

Pokémon Battle Advisor

Overview

The Pokémon Battle Advisor is a web application designed to help Pokémon trainers strategize their battles by providing detailed and realistic battle recommendations. Users can specify their Pokémon team or randomize a team, and then receive tailored battle strategies based on their team and the opponent's Pokémon. The application leverages the CEREBRAS API to generate these recommendations, ensuring they adhere to official Pokémon game mechanics.

Features

  • Specify Your Pokémon Team: Users can enter the names of up to three Pokémon to include in their team.
  • Randomize Pokémon Team: Users can opt to randomize their Pokémon team, fetching three random Pokémon from the PokéAPI.
  • Challenger Pokémon Input: Users can enter the name of the opponent's Pokémon to receive a battle recommendation.
  • Battle Recommendations: The app provides detailed battle strategies, including recommended Pokémon, strategies, and type advantages.
  • Data Validation: Ensures that only valid Pokémon names are accepted, preventing random or incorrect names from being processed.
  • Caching Mechanism: Uses in-memory caching to store fetched Pokémon data, reducing redundant API calls and improving performance.
  • Responsive Design: The app is designed to be responsive, ensuring usability across various devices and screen sizes.

Installation

Prerequisites

  • Deno: This project is built using Deno, a secure runtime for JavaScript and TypeScript.
    • Install Deno by following the instructions on the official website.

Steps

  1. Fork the Repository:

  2. Set Up Environment Variables: Create a .env file in the root directory and add your Cerebras API key:

    CEREBRAS_API_KEY=your_cerebras_api_key

    Note: Ensure that your Cerebras API key is kept secure and not exposed publicly.

  3. Run the Application: Execute the following command to start the server:

    deno run --allow-net --allow-env cerebras_try.ts
    • --allow-net: Grants network access needed for API calls.
    • --allow-env: Grants access to environment variables for the API key.
  4. Access the Application: Open your browser and navigate to http://localhost:8000 to view the Pokémon Battle Advisor.

Usage

Specify Your Pokémon:

  • Enter the names of up to three Pokémon in the input fields provided.
  • Click the "🎯 Load Specified Pokémon" button to fetch and display the specified Pokémon.

Randomize Pokémon:

  • Click the "🔀 Randomize Pokémon" button to fetch and display three random Pokémon.

Enter Challenger's Pokémon:

  • Enter the name of the opponent's Pokémon in the input field provided.
  • Click the "🤖 Get Battle Recommendation" button to generate a battle strategy.

View Battle Recommendation:

  • The app will display a detailed battle recommendation, including recommended Pokémon, strategies, and type advantages.

Code Structure

  • cerebras_try.ts: The main TypeScript file that serves both the server and client-side code.

    Server-Side:

    • Handles HTTP requests.
    • Serves the HTML page containing the React application.
    • Provides an API endpoint (/api/cerebras-key) to securely retrieve the Cerebras API key.

    Client-Side:

    • Built using React.
    • Manages the user interface, state management, and interactions.
    • Fetches Pokémon data from the PokéAPI.
    • Communicates with the OpenAI API but uses the CEREBRAS API to generate battle recommendations.

    Components & Functions:

    • App Component: The main React component that manages the state and logic for the application.
    • validatePokemonData Function: Validates the structure and types of fetched Pokémon data.
    • loadUserPokemons Function: Fetches and validates user-specified Pokémon.
    • fetchRandomPokemon Function: Fetches and validates random Pokémon.
    • generateBattleRecommendation Function: Generates battle recommendations using the OpenAI API.
    • formatRecommendation Function: Formats the recommendation text into structured sections.

Error Handling

  • Invalid Pokémon Names: If a user enters an invalid Pokémon name, an error message is displayed prompting the user to enter a valid name.
  • API Errors: Any network or unexpected errors during API calls are caught, and corresponding error messages are displayed to the user.
  • Missing API Key: The application checks for the presence of the Cerebras API key and notifies the user if it's missing or invalid.

Technologies Used

  • Deno: A secure runtime for JavaScript and TypeScript.
  • React: For building the user interface.
  • OpenAI API: For generating battle recommendations.
  • PokéAPI: For fetching Pokémon data.
  • TypeScript: For type safety and improved developer experience.

Contributing

Contributions are welcome! Please follow these steps to contribute:

Relevant when I move it to github.

  1. Fork the Repository: Click the "Fork" button at the top right of the repository page to create a copy of the repository under your GitHub account.

  2. Clone Your Fork:

    git clone https://github.com/yourusername/pokemon-battle-advisor.git cd pokemon-battle-advisor
  3. Create a New Branch:

    git checkout -b feature/your-feature-name
  4. Make Your Changes: Implement your feature or bug fix.

  5. Commit Your Changes:

    git commit -m "Add your commit message here"
  6. Push to Your Fork:

    git push origin feature/your-feature-name
  7. Submit a Pull Request: Go to the original repository on GitHub and create a pull request from your forked repository.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For any questions or feedback, please contact cusp-aloft-brim@duck.com

HTTP
  • main.tsx
    shuyib--c5…44.web.val.run
Code
README.md
H
main.tsx
Go to top
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Product
FeaturesPricing
Developers
DocsStatusAPI ExamplesNPM Package Examples
Explore
ShowcaseTemplatesNewest ValsTrending ValsNewsletter
Company
AboutBlogCareersBrandhi@val.town
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.