https://taliin-atlas-3n568151m-nero404.vercel.app/
TaliinAtlas is an AI-powered learning map platform that turns confusing topics, notes, and learning goals into interactive visual knowledge maps.
Instead of giving users another long explanation, it helps them understand:
what to learn first, what depends on what, and how their progress grows.
TaliinAtlas helps learners turn messy information into a structured learning path.
A user can enter a topic, goal, or confusing subject.
The app then creates a visual map of concepts, dependencies, lessons, examples, quizzes, and progress.
The goal is to make learning feel less overwhelming and more visual.
Many students do not struggle because they lack information.
They struggle because information is:
- unstructured
- overwhelming
- hard to prioritize
- disconnected from progress
- difficult to turn into a clear learning plan
I built TaliinAtlas because I wanted to create a learning tool that helps students see the structure behind a topic.
Instead of asking, “What should I study next?”, the user can see a map and follow a clear path.
| Problem | TaliinAtlas Solution |
|---|---|
| I do not know where to start | Shows the first concepts to learn |
| I do not know what depends on what | Builds a dependency-based learning map |
| I feel overwhelmed | Breaks a topic into smaller nodes |
| I want to track progress | Uses unlock/progress states |
| Normal notes feel boring | Turns learning into an interactive visual system |
| Feature | Description |
|---|---|
| Visual learning map | Displays topics as connected nodes |
| Concept dependency graph | Shows how ideas connect to each other |
| Learning path | Helps users know what to learn first |
| Node detail panels | Provides lessons, examples, and quiz-style content |
| Progress system | Tracks completed and unlocked concepts |
| Fog of knowledge | Represents unknown or locked concepts visually |
| Local save | Stores learning maps locally |
| AI-style generation | Converts messy input into structured learning maps |
| Smooth UI | Uses animation and clean visual layout |
If the screenshots do not exist yet, create
public/screenshots/and add your images there.
- The user enters a topic, note, or learning goal.
- TaliinAtlas analyzes the topic and breaks it into smaller concepts.
- Concepts are turned into nodes.
- Dependencies are created between nodes.
- The user explores the visual learning map.
- Each node can include lesson content, examples, or quiz-style tasks.
- Progress is saved locally as the user learns.
| Area | Tools |
|---|---|
| Framework | Next.js |
| Language | TypeScript |
| Styling | Tailwind CSS |
| Graph UI | React Flow |
| Animation | Framer Motion |
| Validation | Zod |
| State / Storage | Local state, localStorage |
| Product Type | AI-ready education platform |
npm install
npm run dev
Open the local development URL:
http://localhost:3000
Build for production:
npm run build npm start Project Structure src/ app/ Next.js app routes components/ UI and learning map components lib/ generation, storage, and utility logic types/ TypeScript types data/ sample learning map data public/ screenshots/ project screenshots What I Learned
While building TaliinAtlas, I learned more about turning a product idea into an interactive user experience.
The hardest parts were:
designing a visual learning flow thinking about concept dependencies making the UI feel understandable turning messy topics into structured nodes balancing AI-style generation with user control designing progress and unlock states
This project helped me understand that good AI tools should not only generate text. They should help users think, organize, and make progress.
Future Improvements Real AI model integration Better topic decomposition User accounts and cloud sync More advanced quiz generation Better progress analytics Public shareable learning maps Mobile layout improvements More visual themes Export learning maps as PDF or image