FRACTAL

Inspiration

FRACTAL is an AI-powered knowledge exploration platform that turns any topic into an interactive mind map you can expand infinitely. Enter a subject, and the app generates a branching tree of subtopics with fun facts, then challenges your understanding with blizzard-themed mastery quizzes. The entire experience is wrapped in an immersive winter campfire scene with roaming bears, dynamic weather, and a warmth mechanic that gamifies learning. I wanted to make something that makes the process of learning a new concept easy and intuitive.

What it does

Infinite Knowledge Trees: Enter any topic and explore a branching mind map of subtopics generated by AI. Click any node to expand it further, as deep as you want. Fun Fact Popups: Hover over any node to see an educational fun fact about that topic. Blizzard Mode Quizzes: Mark a topic as "learned" to trigger a 5-question mastery quiz with a warmth survival mechanic -- answer correctly to stay warm, answer wrong and the cold creeps in. Immersive Winter Scene: A parallax campfire village background with animated roaming bears, falling snow particles, day/night toggle, and ambient wind synthesis. Concepts History: Revisit previously explored topics with their full tree structures preserved. Response Caching: All AI responses are cached in MongoDB with a 24-hour TTL to keep things fast and reduce API costs.

How we built it

TypeScript React Vite TailwindCSS Express.js MongoDB Google Gemini

Challenges we ran into

Designing a tree layout algorithm that recursively positions subtrees without node overlaps as the graph scales to dozens of nodes Getting consistent, structured JSON output from the LLMs for subtopic generation, fun facts, and quiz questions Balancing the campfire SVG animations (flame flicker, roaming bears, snow particles) to feel alive without causing performance issues on the infinite canvas Integrating two different AI providers (Featherless via OpenAI SDK, Gemini via Google SDK) behind a unified service layer with graceful fallbacks Working with Tailwind v4's new CSS-first configuration, which breaks if you use the old v3 directive syntax

Accomplishments that we're proud of

The infinite expansion really works. You can go ten levels deep on any topic and the tree stays readable and performant. The blizzard quiz mechanic turned out to be genuinely fun; the warmth survival pressure makes you actually care about getting answers right instead of just clicking through. We're also proud of the atmosphere. The campfire scene with roaming bears, dynamic snow, day/night mode, and wind synthesis makes it feel like a real place you're learning in, not just another flashcard app. And the caching layer means the second time anyone explores a topic, it loads instantly.

What we learned

We learned that working with multiple LLM providers behind a unified interface requires a lot more error handling than you'd expect, as each model has its own quirks with JSON formatting and instruction following. We got hands-on experience with React Flow's custom node and edge system, which is powerful but has sharp edges around e-renders and type registration. Tailwind v4 taught us to actually read migration guides instead of assuming backwards compatibility. And building the SVG campfire scene from scratch gave us a deep appreciation for how much work goes into making simple animations feel natural.

What's next for Fractal

We want to add collaborative exploration where multiple users can branch out from the same root topic in real time and see each other's paths. A spaced repetition system would bring users back to review topics at optimal intervals, turning one-time exploration into long-term retention. We're also planning to add more quiz formats beyond multiple choice, such as fill-in-the-blank, ordering, and open-ended responses evaluated by the LLM. On the visual side, we want to let users earn cosmetic rewards for mastery streaks: new bears, campfire upgrades, and seasonal themes beyond winter. Finally, we'd like to integrate citation sources so every fun fact links back to real references, making FRACTAL useful for actual research and not just casual exploration.

Built With

• express.js
• gemini
• mongodb
• react
• tailwindcss
• typescript
• vite