Beregond

Beregond is a website where users can create, explore, and interact with fantasy or science fiction worlds. Add characters and chat with them through AI to dive deeper into your favorite universes!

Comment

What inspired me

I chose the idea for the project through Gemini, Perplexity with a corresponding request so that the idea would be useful and not yet implemented. That's how I came across an idea that I really liked: the ability to create a fictional world and characters and, using LLM (Gemini), have conversations with them about this world, its history, and other interesting aspects of the characters. It's like a fandom where anyone can create a world, a character, set the character's story, and write their own stories, but with the ability to communicate with the character, which is not possible in fandoms. I found this idea interesting and useful, and that's why I implemented it.

What I learned

In fact, I had never used tools like bolt before. I used Gemini to write a simple Streamlit page for ML models, but I had never developed a full-fledged website. So I would say that I learned how to write prompts for step-by-step website creation from scratch and how to break down a complex project into components.

How the project was created

A theme was chosen and the first prompt was written using Claude and improved through bolt. Here it is:

" Act as a senior full-stack developer with expertise in React, TypeScript, and modern web development. Your task is to architect and implement «Beregond» - an interactive platform for fictional universe exploration.

Technical Scope: Create a web application that enables:

  1. User-generated content management for fictional worlds
  2. AI-powered character interactions through video avatars
  3. Real-time collaborative world-building features

Core Requirements: Frontend:

  • Implement React 18+ with TypeScript for type-safe development
  • Use Tailwind CSS for responsive design with Framer Motion for fluid animations
  • Structure the application using React Router v6 for seamless navigation
  • Implement optimistic UI updates with React Context API and hooks

Backend Integration:

  • Supabase Authentication for secure user management
  • Supabase for real-time data synchronization
  • Supabase Storage for media asset management
  • Integration with:
    • Tavus API for dynamic video avatar generation
    • ElevenLabs API for character voice synthesis
    • Google Gemini API for contextual conversation handling

Performance Expectations:

  • Implement lazy loading and code splitting
  • Ensure responsive design across devices
  • Maintain <2 second initial load time
  • Support real-time updates with minimal latency

Deliverables:

  1. Modular, well-documented React components
  2. Type-safe API integration layers
  3. Comprehensive state management solution
  4. Responsive UI with smooth animations
  5. Unit and integration tests

Please provide a detailed technical approach for implementing this system. "

A basic interface was created, to which functions such as API integration, a database, design improvements, color scheme redesign, and ongoing bug fixes were then added. If you look at the basic prompt, there is a mention of Tavus, but during the creation and development of the project, I abandoned this idea because it was unnecessarily complicated. In general, it was not possible to integrate those APIs the first time around; it took two prompts, and the idea of integrating Tavus is still preserved in the note.

" Please integrate Gemini for the user QA chatbot with a character avatar, ElevenLabs for generating speech from text coming from Gemini, and Tavus for generating a character avatar that will receive audio from ElevenLabs. The avatar should only speak when the user asks it to. "

What it does

On the website, users can create fictional worlds, fill in information about them, create characters and write information about them, communicate with characters via LLM(Gemini), write their own stories about characters, and other users can see them. Users can collaborate by making changes to each other's worlds and characters and adding to them.

What were the achievements

The achievement I am most proud of is the implementation of the idea of creating a character and communicating with them, that is, not just reading Wikipedia or fandoms, but hearing what the character responds to based on the knowledge of the LLM(Gemini) model and the description of the character's history. In addition, female and male characters have female and male voices, respectively, with different emotional tones.

What challenges were there

To create a more or less acceptable design on the first try, integrate the database, and there was a problem that, for example, the quantitative indicator of conversations, which is an indicator of conversations with a character, increased only for the character that the user created and conversed with, and not for all users who conversed with the character. There were also problems with the collaborators indicator, which is an indicator of how many users are participating in the world. Or here's another challenge: conversations increase, but there are no conversations themselves, no messages to LLM(Gemini), no responses, and this needed to be resolved. In general, the challenge was to write clear and detailed prompts so that Bolt would understand the first time and do everything as it should be without the need for rework.

What's next for Beregond

Fix bugs that users encounter while using the site. Add new features, such as the ability for users to communicate with each other, the ability to save favorite worlds or characters, and the ability to save the history of communication with a character.

Built With

Share this project:

Updates