Synaptica

Visualize your ideas. Powered by intelligence.

Comment

Synaptica

An AI-powered mind mapping tool that deconstructs complex topics into an interactive, explorable knowledge matrix. Built by a team of beginners pushing their limits during a hackathon.

Inspiration

The inspiration for Synaptica came from our own struggles with learning complex subjects. We realized that traditional, linear notes often fail to capture the interconnected nature of knowledge. We wanted to create a tool that could help learners visualize and navigate intricate topics, especially in STEM fields, in an intuitive and engaging way. Our goal was to build a "GPS for knowledge," making it easier to see the big picture and dive into the details as needed.

What It Does

Synaptica is an interactive learning tool that transforms any high-level concept into a dynamic, hierarchical mind map.

  • AI-Powered Concept Decomposition: Users can enter a topic (e.g., "Calculus"), and the AI generates a tree of its core sub-concepts.
  • Recursive Exploration: Each node in the mind map can be expanded, querying the AI in real-time to build out deeper layers of the knowledge tree, allowing for an infinitely deep exploration.
  • On-Demand Explanations: With a single click, users can generate a clear, concise explanation for any concept in the map, complete with properly rendered mathematical formulas using KaTeX.
  • Dynamic & Responsive UI: The application features a clean, futuristic interface designed to make the process of learning and discovery intuitive and visually engaging.

How We Built It

We built Synaptica using a modern, frontend-focused tech stack. The user interface was built with React and TypeScript, which gave us the structure and type safety needed to manage a complex application state. We used Tailwind CSS for rapid, utility-first styling to create the polished and responsive design.

The core AI functionality is powered by the Google Gemini 2.5 Flash API. We leveraged its powerful JSON schema feature to get structured, predictable data for building the mind map, and its text generation capabilities for the on-demand explanations. The mathematical typesetting is handled by KaTeX, which we integrated into our frontend via react-markdown to beautifully render complex formulas.

Challenges We Ran Into

As a team of beginners, this project pushed us far outside our comfort zone. We actually had to pivot our entire project idea after the first half of the hackathon when we realized our initial concept was technically infeasible with our limited time and experience. This sudden switch put immense pressure on us to rapidly prototype and execute the new idea, Synaptica.

One of our biggest technical challenges was managing the application's state. The mind map is a deeply nested, recursive data structure, and handling asynchronous updates (like fetching new nodes from the API) without bugs was a major hurdle. We also ran into performance considerations, ensuring the UI remained smooth and responsive even as the mind map grew larger.

Designing the UI for the tree itself—specifically drawing the connecting lines between nodes in a way that was both visually clear and dynamically adaptable—proved to be a complex CSS and logic puzzle. Finally, prompt engineering was a challenge; it took several iterations to craft prompts that would consistently return high-quality, accurate, and well-structured data from the Gemini API.

Accomplishments That We're Proud Of

We are incredibly proud of creating a fully functional and polished application within the tight constraints of a hackathon. The seamless integration of the AI to create a real-time, exploratory experience is a huge accomplishment for us. We're particularly proud of the recursive node expansion, which works flawlessly and forms the core of the user experience.

Getting the KaTeX math rendering to work perfectly within the dynamically generated Markdown content was another significant win that adds a level of professionalism and utility to the tool. Above all, we're proud of the final UI—it's clean, intuitive, and genuinely fun to use, which was our primary goal from the start.

What We Learned

This project was a massive learning experience. We dove deep into advanced React concepts, particularly state management for complex, nested objects and handling asynchronous operations gracefully. We gained invaluable hands-on experience with a powerful, cutting-edge AI model, learning how to leverage features like JSON mode to build reliable applications. We also learned a great deal about UI/UX design, especially around visualizing hierarchical data in an effective and aesthetically pleasing way.

What's Next for Synaptica

  • State Persistence: Save and load mind maps to local storage or a backend database.
  • Node Customization: Allow users to edit node names, add personal notes, and change colors.
  • Export Functionality: Export the mind map as an image (PNG, SVG) or a text document.
  • Collaborative Mode: Real-time collaboration on a single mind map using websockets.

Built With

Share this project:

Updates