This is a submission for the KendoReact Free Components Challenge.
Hello Dev Community! đź‘‹
Teammate: @sri_charan_5b9c2e5e77b8d4
What we Built
We are thrilled to share Rewrite History: Your Omniscient View of the Past, an interactive game where history isn’t just read—it’s lived, shaped, and rewritten. Built using Kendo React components, Node.js, and the Nuclia RAG model, the game blends learning, storytelling, and strategy into a fully dynamic experience.
🕹️ Game Concept
• Choose an era: Ancient Rome, Renaissance, 20th century, and more
• Pick a historical character to play
• Make decisions that affect stats like influence, wealth, relationships, and health
• Every journey is dynamically generated and can follow history or diverge into alternate outcomes
• At the end, your story is compiled into a personalized book
Example choices generated by the game:
• “What if Napoleon chose peace instead of war?”
• “Could a scientist share a discovery earlier and change history?”
đź“– Key Features
Dynamic Timeline Representation
Visualizes the main historical timeline alongside branches created by your choices, so you can track both actual history and your alternate paths.
Summary Book
Automatically collects all events of a particular timeline. You don’t have to dig through pages—you can read your journey as a narrative or explore others’ stories.
Nuclia RAG Model Integration
• Historical events and character data are uploaded to Nuclia RAG.
• When generating the next event, the model fetches contextual historical data.
• Combined with your character’s current stats and attributes, this data is sent to an LLM that outputs three dynamic choices, making the gameplay unpredictable and engaging.
Demo
Youtube video link: https://youtu.be/e_5GR61W2pI?si=5VxDBaPLJ9BDqtMu
📸 Screenshots
Homepage
Era Selection
Character Selection
Game Dashboard / Stats Overview
Timeline & Choices
Story Summary / Alternate History
Other Pages
• Player Books Page
KendoReact Components Used
• Input (from @progress/kendo-react-inputs)
• TextArea (from @progress/kendo-react-inputs)
• Rating (from @progress/kendo-react-inputs)
• AppBar (from @progress/kendo-react-layout)
• AppBarSection (from @progress/kendo-react-layout)
• Avatar (from @progress/kendo-react-layout)
• Button (from @progress/kendo-react-buttons)
• Card (from @progress/kendo-react-layout)
• CardHeader (from @progress/kendo-react-layout)
• CardBody (from @progress/kendo-react-layout)
• ProgressBar (from @progress/kendo-react-progressbars)
• Fade (from @progress/kendo-react-animation)
• Badge (from @progress/kendo-react-indicators)
[RAGs to Riches prize category] Nuclia Integration
How Nuclia Rag model is used
Our interactive historical storytelling game is powered end-to-end by Nuclia’s Retrieval-Augmented Generation (RAG) model. Instead of writing static branching storylines, we give the model structured historical data and let it retrieve and generate content on the fly.
Here’s our process:
Building the Knowledge Base
We upload detailed, real-world historical data about each character:
– Chronological events
– Age, stats, and personality traits
– Political, social, and cultural contexts
This information becomes our searchable knowledge base inside Nuclia.
Retrieval + Generation as a Single Step
When the player reaches a new point in the story, we send the player’s current state (age, stats, personality, current event) to Nuclia’s RAG endpoint.
The RAG model automatically:
Retrieves the most relevant context from our uploaded knowledge.
Generates historically grounded yet dynamic choices.
The Nuclia RAG model returns three plausible next events or actions the player can take. These aren’t pre-coded. They’re dynamically generated based on:
The player’s previous decisions
The character’s evolving stats and personality
Authentic historical information from the knowledge base
Replayability and Scalability
Because the RAG model merges retrieval with generation, our game can scale infinitely. It also ensures that each playthrough is different while still staying faithful to history.
⚙️ Tech Stack
Frontend:
• React + Kendo UI components (menus, dashboards, timeline visualizations)
• Vite, Tailwind, and custom CSS for styling
Backend:
• Node.js + Express
• Nuclia RAG model for AI-generated storylines
• JSON-based storage for player books
Features:
• Dynamic, AI-generated branching storylines
• Personalized books for each journey
• Replayable history experiences
💡 Why It’s Different
• Every playthrough is unique thanks to AI-powered story generation
• History becomes interactive and immersive, not static
• Players can learn, explore, and create their own alternate histories
• Fully polished and responsive UI thanks to Kendo React components
đź”— Links
• Live Demo: https://kendohack.onrender.com/
• Source Code: https://github.com/SriCharan-616/kendohack
🚀 Next Steps
• Add more eras and historical characters
• Enhance AI storytelling for richer, more diverse narratives
• Mobile-first interface and accessibility improvements
• Social features for sharing and exploring player-created histories
History is no longer just facts in a book—it’s something you can live, shape, and share.
Top comments (0)