HelpFlow - Component Library for Student Workshop

A Next.js component library built for teaching Object-Oriented Programming (OOP) concepts through practical web development.

🎯 Workshop Overview

This project is designed for a student workshop where participants will:

1. Learn OOP concepts (encapsulation, inheritance, polymorphism, composition)
2. Build features for a school help platform called "HelpFlow"
3. Code with AI assistance to understand modern development workflows

Students will use these pre-built components as building blocks to create their own features.

🚀 Quick Start Guide

Prerequisites

• Node.js 18+ installed
• Basic understanding of HTML/CSS
• Text editor (VS Code recommended)

Installation

1. Navigate to the project:

   cd helpflow-app

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser: Navigate to http://localhost:3000

You should see the HelpFlow Component Library showcase page!

📦 Available Components

UI Components (/components/ui)

Button

Reusable button with multiple variants and sizes.

import { Button } from '@/components/ui/Button';

<Button variant="primary">Click me</Button>
<Button variant="secondary" size="large">Large Button</Button>
<Button variant="accent" disabled>Disabled</Button>

Variants: primary (black), secondary (white), accent (yellow) Sizes: small, medium, large

Tag

Subject and category labels.

import { Tag } from '@/components/ui/Tag';

<Tag label="MATEMATIKA" />
<Tag label="9.A" variant="outlined" />
<Tag label="CLICK ME" onClick={() => alert('Clicked!')} />

Card

Container for content with consistent styling.

import { Card } from '@/components/ui/Card';

<Card variant="outlined" padding="large">
  <h3>Card Title</h3>
  <p>Card content goes here...</p>
</Card>

Input

Form inputs and search bars.

import { Input } from '@/components/ui/Input';

<Input
  type="search"
  placeholder="Search..."
  value={value}
  onChange={setValue}
  fullWidth
/>

<Input
  type="textarea"
  rows={4}
  placeholder="Enter details..."
/>

Layout Components (/components/layout)

Header

Main navigation with logo, search, and actions.

import { Header } from '@/components/layout/Header';

<Header
  onSearch={(query) => console.log(query)}
  onProgressClick={() => {/* handle */}}
  onNewQuestionClick={() => {/* handle */}}
  onProfileClick={() => {/* handle */}}
/>

Sidebar

Filter panels and info widgets.

import { Sidebar } from '@/components/layout/Sidebar';

<Sidebar
  classFilters={classFilterItems}
  subjectFilters={subjectFilterItems}
  onClassFilterClick={(id) => {/* handle */}}
  onSubjectFilterClick={(id) => {/* handle */}}
/>

Feature Components (/components/features)

QuestionCard

Complete question card with voting, tags, and actions.

import { QuestionCard } from '@/components/features/QuestionCard';

<QuestionCard
  tags={[
    { label: 'FIZIKA' },
    { label: '10.B', variant: 'outlined' }
  ]}
  timeAgo="2 PERCE"
  title="Question title here..."
  votes={42}
  answerCount={8}
  onVote={() => {/* handle voting */}}
  onAnswer={() => {/* handle answer */}}
  onShare={() => {/* handle share */}}
/>

FilterList

Clickable filter lists for subjects, classes, etc.

import { FilterList } from '@/components/features/FilterList';

<FilterList
  title="TANTÁRGYAK"
  items={[
    { id: 'math', label: 'MATEMATIKA', count: 24 },
    { id: 'physics', label: 'FIZIKA', count: 18, active: true }
  ]}
  onFilterClick={(id) => {/* handle filter */}}
/>

Modal

Dialog overlay for forms and confirmations.

import { Modal } from '@/components/features/Modal';

<Modal
  isOpen={isOpen}
  title="ÚJ KÉRDÉS"
  onClose={() => setIsOpen(false)}
  onSubmit={handleSubmit}
>
  <p>Modal content here...</p>
</Modal>

🎨 Design System

Colors

• Primary (Black): #000000 - Main buttons, text, borders
• Secondary (White): #FFFFFF - Backgrounds, secondary buttons
• Accent (Yellow): #FFD600 - Call-to-action buttons, highlights

Design Principles

• Sharp corners - No border radius for a bold, modern look
• Thick borders - 3px black borders throughout
• High contrast - Black and white with yellow accents
• Bold typography - Strong, readable fonts

📚 Learning OOP Concepts

Encapsulation

Components hide their internal implementation:

// You don't need to know HOW Button renders, just HOW to use it
<Button variant="primary">Click</Button>

Composition

Build complex UIs from simple components:

<Card>
  <Tag label="MATH" />
  <h3>Question Title</h3>
  <Button>Answer</Button>
</Card>

Polymorphism

Same component, different behaviors:

<Button variant="primary">Primary</Button>
<Button variant="accent">Accent</Button>

Interfaces (TypeScript)

Type-safe component contracts:

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'accent';
  onClick?: () => void;
  // ...
}

🛠️ Workshop Tasks

Students can practice by:

1. Creating a new question page - Use QuestionCard, Input, and Modal
2. Building a profile page - Compose Cards and Buttons
3. Adding a leaderboard - Use FilterList and Card components
4. Creating custom variants - Extend existing components
5. Building new components - Apply learned OOP principles

📝 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Run production build
• npm run lint - Run ESLint

🔧 Project Structure

helpflow-app/
├── app/
│   ├── page.tsx          # Component showcase page
│   ├── layout.tsx        # Root layout
│   └── globals.css       # Global styles
├── components/
│   ├── ui/               # Basic UI components
│   │   ├── Button/
│   │   ├── Card/
│   │   ├── Tag/
│   │   └── Input/
│   ├── layout/           # Layout components
│   │   ├── Header/
│   │   └── Sidebar/
│   └── features/         # Feature components
│       ├── QuestionCard/
│       ├── FilterList/
│       └── Modal/
├── public/               # Static assets
└── tailwind.config.ts    # Tailwind configuration

🎓 For Instructors

Teaching Tips

1. Start with simple components (Button, Tag) to explain props and composition
2. Move to complex components (QuestionCard) to show how composition works
3. Have students modify component variants to understand polymorphism
4. Guide them through creating a new feature using existing components
5. Encourage AI-assisted coding with clear, specific prompts

Example Workshop Flow

1. Hour 1: Intro to OOP + explore component library
2. Hour 2: Build a simple feature with guidance
3. Hour 3: Independent feature building with AI help
4. Hour 4: Present and discuss creations

🤝 Contributing

This is a workshop project! Students should feel free to:

• Add new component variants
• Create new components following existing patterns
• Extend functionality with new features
• Improve styling and accessibility

📄 License

This project is created for educational purposes.

🆘 Need Help?

• Check component examples on the showcase page
• Read component source code with detailed comments
• Ask your instructor or use AI assistance
• Experiment and learn by doing!

---

Happy Coding! 🚀