Realearn

AI-powered educational platform built with modern web technologies.

Architecture

Realearn is a monorepo using Turborepo with a React-based web application. The architecture emphasizes:

• File-based routing with TanStack Router
• Component-driven development with reusable UI components
• Static data management for learning content
• AI integration for content generation

Tech Stack

Frontend Framework

• React 19 with TypeScript for type safety
• TanStack Router for file-based routing and full type safety
• Vite for fast development and optimized builds

UI & Styling

• Tailwind CSS for utility-first styling
• shadcn/ui for consistent, accessible components
• Framer Motion for smooth animations

Rich Content & Media

• Milkdown rich text editor for journal functionality
• Reveal.js for slide presentations
• D3.js for interactive mindmaps and visualizations

Development & Build

• Bun package manager for fast installs and scripts
• Turborepo for monorepo management and build optimization

Project Structure

realearn/
├── apps/
│   └── web/                    # Main React application
│       ├── public/
│       ├── src/
│       │   ├── components/     # Reusable UI components
│       │   │   ├── ui/         # Base shadcn/ui components
│       │   │   ├── spaces/     # Learning space components
│       │   │   ├── courses/    # Course-related components
│       │   │   └── journals/   # Note-taking components
│       │   ├── routes/         # File-based routes (TanStack Router)
│       │   ├── data/           # Static JSON data for spaces/courses
│       │   ├── hooks/          # Custom React hooks
│       │   ├── lib/            # Utilities and configurations
│       │   └── main.tsx        # Application entry point
│       ├── package.json        # Dependencies and scripts
│       ├── vite.config.ts      # Vite configuration
│       └── tsconfig.json       # TypeScript configuration
├── package.json                # Root dependencies (Turbo, etc.)
└── turbo.json                  # Turborepo configuration

Key Implementation Details

Learning Spaces

• Dynamic imports for space data (@/data/spaces/${id}/metadata.json)
• View switching with sidebar navigation (Content/Quiz/Mindmap/Slides/Video)
• Resizable panels using for layout flexibility
• Progress navigation with subsection tracking

AI Integration

• Prompt input component with model selection
• File upload support with drag-and-drop interface
• Streaming responses for real-time AI generation
• Modal-based creation flow with animated transitions

Journals & Note-Taking

• Milkdown editor integration with markdown support
• Folder structure with collapsible navigation
• File management (create/edit/delete operations)
• Resizable split-view for sidebar and editor

Data Management

• Static JSON files for learning content (spaces, quizzes, mindmaps)
• Dynamic loading based on route parameters
• Type-safe data structures with TypeScript interfaces

Development Setup

Prerequisites

• Bun (recommended) or npm/yarn

Installation & Running

# Install dependencies
bun install

# Start development server
bun dev

# Build for production
bun build

# Type checking
bun check-types

Component Architecture

UI Components (src/components/ui/)

• shadcn/ui components: Button, Dialog, Tabs, etc.
• Custom components: VideoPlayer, Mindmap, Slides, etc.
• Layout components: Resizable panels, navigation

Feature Components

• Spaces: ViewSwitcher, ContentView, QuizView, etc.
• Courses: CourseCard grid layout
• Journals: Folder structure, rich text editor

Route Structure

• File-based routing with TanStack Router
• Dynamic routes for spaces (/spaces/$id)
• Nested layouts and component composition