LearnHub - A Community-First Learning Platform

This is a submission for the DEV Weekend Challenge: Community

The Community

LearnHub was built for learning communities - the study groups, coding circles, book clubs, bootcamp cohorts, and open-source learning teams that power collaborative education.

These communities face real coordination challenges:

• 📚 Resource Chaos: Great materials get lost in Slack/Discord messages
• 🔍 No Discovery: Hard to find quality resources shared by peers
• 📊 No Visibility: Nobody knows what's been shared, who contributed, or how valuable materials are
• ⏰ No Structure: Difficult to coordinate learning progression or paths

LearnHub solves these problems by creating a centralized hub where learning communities can organize, discover, and collaborate around shared resources.

What I Built

LearnHub is a modern, community-first learning platform with:

📚 Core Features

✨ Resource Library - Central repository for course materials, links, documents, videos, and code

• Add resources with rich metadata (type, tags, difficulty, time estimate)
• Pin important resources to highlight them
• Full-text search with multi-criteria filtering
• Share resources in multiple formats (Plain Text, Markdown, JSON)

⭐ Resource Ratings - Community-driven quality assessment

• Rate resources 1-5 stars with optional reviews
• See average ratings and member feedback
• Build trust through peer validation
• Identify high-value materials at a glance

🎯 Learning Paths - Structured learning sequences

• Create ordered paths through resources
• Set difficulty levels and time estimates
• Visualize learning progression
• Share curated learning sequences with groups

👤 User Profiles - Showcase member contributions

• Public profiles with member stats
• Track resources contributed, average ratings, groups joined
• Edit profile with custom bio and avatar
• See all member contributions at a glance

🌙 Dark Mode - Beautiful theme support

• Toggle between light and dark modes
• Persistent theme preference
• System preference detection
• Seamless across all pages

🏠 Group Management

• Browse and search learning groups by topic
• Create new groups instantly
• Join/leave groups with one click
• View group members and resources

🎨 Design Excellence

• Clean, modern UI with Tailwind CSS
• Responsive design (mobile-first)
• Smooth animations and transitions
• Accessibility-first (WCAG AA+)
• Dark mode support
• Compact, focused layout

---

Demo

Live Demo: LearnHub on Cloudflare Pages

Quick Demo Flow:

1. Homepage - See platform overview with stats
2. Browse Groups - Explore learning communities by topic
3. Join a Group - Click any group to join instantly
4. Explore Resources - View, search, and filter group resources
5. Add Resources - Share a new resource with your group
6. Rate Resources - Give feedback with ratings and reviews
7. View Profile - See your contributions and stats
8. Create Learning Path - Build a structured learning sequence
9. Toggle Dark Mode - Try light/dark theme switching

Key Pages:

• / - Homepage with featured groups and stats
• /groups - Browse all learning groups
• /groups/[id] - Group detail page with resource library
• /paths - Learning paths browsing and creation
• /profile - User profile with contributions
• /about - About LearnHub

---

Code

GitHub Repository: Maneesh-Relanto/DevTo-CommunityChallenge-LearnHub

LearnHub/
├── client/
│   ├── pages/
│   │   ├── Index.tsx              # Homepage
│   │   ├── GroupsDirectory.tsx    # Browse groups
│   │   ├── GroupDetail.tsx        # Group & resources
│   │   ├── LearningPaths.tsx      # Learning paths
│   │   ├── UserProfile.tsx        # User profiles
│   │   └── About.tsx              # About page
│   ├── components/
│   │   ├── groups/                # Group components
│   │   ├── resources/             # Resource components
│   │   ├── paths/                 # Learning path components
│   │   ├── user/                  # User/profile components
│   │   └── ui/                    # UI primitives
│   ├── context/
│   │   ├── UserContext.tsx        # User state management
│   │   ├── GroupContext.tsx       # Groups state management
│   │   ├── ResourceContext.tsx    # Resources state management
│   │   ├── PathContext.tsx        # Learning paths state
│   │   └── ThemeContext.tsx       # Dark mode state
│   ├── types/
│   │   └── index.ts               # TypeScript interfaces
│   └── App.tsx                    # Main app component
├── package.json
├── vite.config.ts
├── tsconfig.json
└── README.md

Key Stats:

• 📦 Codebase: ~2,500 lines of TypeScript/React
• 🎨 Components: 20+ reusable components
• 🗄️ State Management: 5 Context providers
• ✅ Tests: 92% passing (48/52 unit tests)
• 🚀 Build Size: 796 KB (gzipped: 215 KB)
• ⚡ Performance: No console warnings, optimized renders

---

How I Built It

🛠️ Technology Stack

Frontend Framework

• React 18.3 - Modern UI library with hooks
• TypeScript 5.9 - Type-safe development
• Vite 7 - Lightning-fast build tool
• React Router 6 - Client-side routing (SPA)

Styling & UI

• Tailwind CSS 3.4 - Utility-first styling
• Radix UI - Accessible component primitives
• Lucide React - Beautiful icon library
• Custom CSS animations - Smooth transitions

State Management

• React Context API - Global state management
• Custom hooks - Reusable logic
• localStorage - Client-side persistence

Testing & Quality

• Vitest 3.2 - Fast unit test framework
• React Testing Library - Component testing
• TypeScript Strict Mode - Type safety
• ESLint & Prettier - Code quality

Deployment

• Cloudflare Pages - Static hosting
• GitHub Actions - CI/CD (auto-deploy on push)
• SPA routing configuration - Client-side navigation

🏗️ Architecture Decisions

Component-Driven Development

• Small, focused components with single responsibility
• Reusable UI components in /components/ui
• Feature-specific components grouped by domain
• Props-based configuration for flexibility

State Management Pattern

• Context API for global state (User, Groups, Resources, Paths, Theme)
• Custom hooks for easy consumption (useUser, useGroups, etc.)
• localStorage for persistence across sessions
• Centralized action functions for predictable updates

Type Safety

• Strict TypeScript mode enabled
• Interfaces for all data models
• No any types in codebase
• Type-safe component props

Performance Optimizations

• useMemo for expensive computations (filtering, sorting)
• useCallback for stable function references
• Lazy routing with React.lazy (when needed)
• Optimized re-renders with proper dependency arrays

Testing Strategy

• Unit tests for contexts (data logic)
• Hook tests with React Testing Library
• Component snapshot tests
• Integration tests for workflows

🎯 Key Features Implementation

Resource Ratings

// Rating interface
interface Rating {
  userId: string;
  score: number;  // 1-5
  review?: string;
  createdAt: string;
}

// Methods in ResourceContext
addRating(resourceId, userId, score, review)
getAverageRating(resourceId) -> number

Learning Paths

• Ordered array of resource IDs
• Difficulty level and time estimate
• Creator tracking and timestamps
• Visual step-by-step progression

User Profiles

• Public profile pages
• Contribution statistics
• Editable profile info (name, bio, avatar)
• Member since date tracking

Dark Mode

• ThemeContext for global theme state
• localStorage for persistence
• System preference detection
• Tailwind's dark mode utilities

📊 Data Model

// User
{
  id: string
  displayName: string
  bio?: string
  avatarUrl?: string
  joinedGroups: string[]
  createdAt: string
}

// Group
{
  id: string
  name: string
  description: string
  topic: string
  facilitator: string
  members: string[]
  resourceCount: number
  createdAt: string
}

// Resource
{
  id: string
  groupId: string
  type: 'link' | 'note' | 'document' | 'video' | 'code'
  title: string
  description: string
  tags: string[]
  difficulty: DifficultyLevel
  timeEstimate: TimeEstimate
  ratings: Rating[]
  uploadedBy: string
  isPinned: boolean
  createdAt: string
}

// Learning Path
{
  id: string
  groupId: string
  name: string
  description: string
  resourceIds: string[]
  difficulty: DifficultyLevel
  estimatedDuration: TimeEstimate
  createdBy: string
  createdAt: string
}

🚀 Development Workflow

1. Local Development

   pnpm install
   pnpm dev          # Start dev server with HMR
   pnpm typecheck    # Type checking
   pnpm test         # Run unit tests
   pnpm build:client # Production build

1. Deployment

   • Push to GitHub main branch
   • Cloudflare Pages auto-detects build
   • Vite builds to dist/spa
   • Deployed in ~2 minutes
   • SPA routing via _routes.json

2. Code Quality

   • TypeScript strict mode
   • No console warnings
   • Accessible components
   • Responsive design
   • Clean code principles

---

Thank You

Built with ❤️ for learning communities everywhere.

Live Demo: LearnHub
Repository: GitHub