Maneesh Thakur

Posted on Mar 1

LearnHub - A Community-First Learning Platform

#devchallenge #weekendchallenge #showdev #opensource

DEV Weekend Challenge: Community

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:

Homepage - See platform overview with stats
Browse Groups - Explore learning communities by topic
Join a Group - Click any group to join instantly
Explore Resources - View, search, and filter group resources
Add Resources - Share a new resource with your group
Rate Resources - Give feedback with ratings and reviews
View Profile - See your contributions and stats
Create Learning Path - Build a structured learning sequence
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

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

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
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

DEV Community