-
-
overview of the web app screen
🚧 Challenges I Faced
Browser CORS Policy and Asset Blocking
While testing local network connections and JavaScript module loading, I encountered errors such as:
net::ERR_CONNECTION_TIMED_OUT
I also experienced browser security restrictions caused by unique-origin policies.
I resolved these issues by:
- Realigning the endpoint-fetch configuration.
- Creating a custom Python micro-hosting server.
- Serving project files through a trusted local origin instead of opening them directly in the browser.
Server Traffic and Account Rate Limits
I encountered repeated:
503 Service Unavailable
API errors caused by high server traffic and account-level usage limits.
I addressed this by changing the core language-model parameter to a more lightweight, separately tiered cloud model:
gemini-3.5-flash-lite
This helped reduce resource usage and improve response reliability.
State Memory Retention
Standard HTML forms caused the browser to refresh whenever a choice was submitted. These refresh loops erased the player’s stored state and interrupted the experience.
I fixed this by:
- Replacing form-submission controls with non-refreshing button elements.
- Attaching the buttons directly to custom asynchronous arrow-function event listeners.
- Preserving player choices and application state without reloading the page.
🎓 What I Learned
As an eighth-grade solo developer participating in my first hackathon, this project significantly strengthened my technical problem-solving and software-development skills.
API Integration
I learned how to:
- Construct structured API request payloads.
- Configure request headers correctly.
- Send asynchronous JavaScript requests.
- Parse and process JSON responses.
Secure Sandbox Development
I learned how to:
- Isolate development environments safely.
- Organize project files and directories in Visual Studio Code.
- Use placeholder-masking patterns to protect API credentials.
- Prepare a project for safe publication in a public code repository.
Product Optimization
I gained practical experience with:
- Prompt-engineering constraints.
- Token and request-traffic management.
- Model selection and performance trade-offs.
- User-interface and user-experience design.
- Debugging browser, server, and application-state issues.
Ending Logic
The experience concludes when both choices evaluate to "END":
[ \text{choiceA} = \text{"END"} \quad \text{and} \quad \text{choiceB} = \text{"END"} ]
When this condition evaluates to true, the frontend client removes the choice-layout container and securely resolves the time-space continuum.
What’s Next
Next, I plan to expand HistoryQuest AI with more historical eras, branching storylines, improved memory, and more reliable AI responses. My goal is to make each adventure more immersive, educational, and personalized while continuing to improve performance, security, and the overall player experience.
Conclusion
HistoryQuest AI shows how artificial intelligence can make learning history more interactive and engaging. Building this project helped me strengthen my coding, debugging, API integration, and problem-solving skills while turning a creative idea into a working experience.
Built With
- and
- assistance
- chatgpt
- css
- development
- for
- gemini-api
- github
- html
- javascript
- vercel
