Knowledge Nexus

Inspiration

In traditional learning, information is often fragmented—spread across textbooks, lecture notes, and scattered digital resources. We wanted to change that. Inspired by the power of visual learning, we set out to build Knowledge Nexus, a platform that transforms course material into structured knowledge maps, helping students see the bigger picture instead of just memorizing facts.

What it does

Knowledge Nexus is an interactive knowledge mapping tool that allows students to:

Upload their syllabus or lecture materials
Visualize key concepts as an interactive graph
Add engagement metrics like ratings & notes for deeper insight
Navigate their learning in a structured, intuitive way

How we built it

Frontend: React.js with a sleek UI inspired by Studio Ghibli design principles

Graph Visualization: Integrated react force graph for dynamic, real-time node mapping
Storage: Utilized localStorage to store user generated engagement data
State Management: Used React’s useState to toggle panels and control UI interactions
Styling: Modern dark-themed UI with Rubik & Poppins fonts for a clean aesthetic

Challenges we ran into

Data Structuring – Parsing and converting syllabus data into meaningful graph structures

Balancing Minimalism & Usability – Finding the right balance between aesthetic appeal & functionality
Interactive UI Design – Ensuring smooth sidebar toggles, real-time engagement tracking, and fluid transitions

What we learned

The power of visualization of knowledge is easier to retain when concepts are mapped out

Minimal UI ≠ Minimal Effort—sometimes the simplest interfaces take the most thought
Iterate, Iterate, Iterate—we experimented with different layouts before settling on an optimal UX

What's next for Knowledge Nexus

Collaborative features so students can build and refine maps together as well as personalized recommendations based on learning progress will help us on our goal to revolutionize digital learning.