An interactive canvas where concepts connect, resources attach, and knowledge gaps become visible. Built with Clean Architecture, React Flow, and Supabase — designed to replace the fragmented mess of Google Drive tabs, scattered PDFs, and disconnected bookmarks.
Students juggle Google Drive folders, PDF downloads, browser bookmarks, and note-taking apps — all disconnected from each other. There's no way to see how concepts relate, no single place to attach resources to the topics they belong to, and no visibility into what you actually understand versus what you've only skimmed.
The result: time wasted searching for materials, difficulty building mental models of a subject, and no structured way to collaborate or ask questions in context.
StudyMap gives learners a zoomable, interactive canvas where they map courses as hierarchical concept trees. Each concept node is a container: attach resources, write learning objectives, ask questions, and see the full structure of what you're learning at a glance.
Zoom-based navigation across a hierarchical concept tree. See the big picture or dive into details.
Attach files, links, PDFs, and videos directly to concepts. Everything lives where it belongs.
Ask questions tied to specific concepts. Community voting surfaces the most valuable answers.
The codebase is structured in concentric layers where dependencies always point inward. Business logic knows nothing about React or Supabase — making the system testable, flexible, and built to evolve.
Business entities and repository interfaces. Framework-agnostic core that defines what a Concept, Resource, and Question look like.
Use cases and business logic. Operations like creating a concept, attaching a resource, or voting on a question live here.
Supabase implementations and factories. Concrete adapters that fulfill repository interfaces against the real database.
React components, pages, and hooks. The UI layer that consumes use cases and renders the interactive canvas experience.
src/
├── domain/ # Entities & repository interfaces
├── application/ # Use cases (business operations)
├── infrastructure/ # Supabase adapters & factories
├── presentation/ # React components, pages, hooks
└── shared/ # Common utilities & typesAuthentication-gated app means no SEO benefit from SSR. Vite's instant HMR enables faster iteration on the interactive canvas experience.
Out-of-the-box zoom/pan, performant with large node counts, and a React-native API — superior to a custom D3.js implementation for this use case.
Consolidates auth, PostgreSQL, real-time, and file storage in one platform — eliminating weeks of backend work to prioritize product differentiation.
Decouples business logic from framework code. Supabase could be swapped for Firebase without touching a single use case or component.
StudyMap is a solo portfolio project being built in the open. The architecture is in place, the canvas is functional, and content features are being added phase by phase.