C++ Learning Hub

An interactive, Codedex-style learning platform for C++ programming built with Next.js and React.

Features

• 📚 37 Examples organized into 7 learning categories
• 👣 Step-by-Step Walkthroughs with detailed explanations for each line of code
• 💡 Concept Learning with explanations of key programming concepts
• 🎨 Syntax Highlighting for easy code readability
• 📱 Responsive Design that works on all devices
• ⚡ Fast Performance with static site generation
• 🎯 Difficulty Levels to guide learners through content progressively

Categories

1. Hello World 👋 - Learn the basics of printing output
2. Variables 📦 - Understand data types and declarations
3. Conditionals 🔀 - Control program flow with if/else
4. Loops 🔄 - Repeat code with for and while loops
5. Vectors 📚 - Work with dynamic arrays
6. Functions ⚙️ - Organize code with reusable functions
7. Classes & Objects 🏗️ - Learn object-oriented programming

Tech Stack

• Framework: Next.js 15+
• Language: TypeScript
• Styling: Tailwind CSS
• Code Highlighting: Highlight.js
• Deployment: GitHub Pages (Static Export)

Setup & Installation

Prerequisites

• Node.js 18+ and npm

Installation

# Clone the repository
cd cpp-learning-hub

# Install dependencies
npm install

# Run development server
npm run dev

The site will be available at http://localhost:3000/cpp-learning-hub

Building for Deployment

Build for GitHub Pages

npm run build

This creates a static export in the /out directory that can be deployed to GitHub Pages.

Deploy to GitHub Pages

1. Push the repository to GitHub
2. Go to Settings → Pages
3. Set the source to "GitHub Actions"
4. Deploy using the provided workflow

Project Structure

cpp-learning-hub/
├── app/                      # Next.js app directory
│   ├── layout.tsx           # Root layout
│   ├── page.tsx             # Home page
│   ├── globals.css          # Global styles
│   ├── category/            # Category listing pages
│   │   └── [id]/page.tsx    # Dynamic category pages
│   └── example/             # Example detail pages
│       └── [id]/page.tsx    # Dynamic example pages
├── components/              # Reusable React components
│   ├── Header.tsx
│   ├── CategoryCard.tsx
│   ├── ExampleCard.tsx
│   ├── CodeHighlight.tsx    # Syntax highlighting
│   ├── StepWalkthrough.tsx  # Step-by-step guide
│   └── ConceptExplainer.tsx # Concept explanations
├── public/
│   ├── data/                # Generated JSON data
│   │   ├── categories.json
│   │   └── examples.json
├── scripts/
│   └── parse-examples.js    # Script to parse C++ examples
└── package.json

How It Works

1. Example Parsing

The scripts/parse-examples.js script reads C++ files from the cpp-101-main directory and extracts:

• Code content
• Metadata (title, description, difficulty)
• Step-by-step explanations
• Related concepts

2. Data Structure

Each example contains:

{
  id: string;
  title: string;
  description: string;
  code: string;
  concepts: string[];
  difficulty: 'Beginner' | 'Intermediate' | 'Advanced';
  steps: Array<{ line: number; explanation: string }>;
}

3. Interactive Learning

Users can:

• Browse examples by category
• View syntax-highlighted code
• Follow step-by-step walkthroughs
• Learn programming concepts
• Understand code line-by-line

Extending the Platform

Adding Explanations

Edit scripts/parse-examples.js and add to the EXPLANATIONS object:

const EXPLANATIONS = {
  'your-file.cpp': {
    title: 'Your Title',
    description: 'Your description',
    concepts: ['Concept1', 'Concept2'],
    difficulty: 'Beginner',
    steps: [
      { line: 5, explanation: 'Explanation of line 5' },
      // More steps...
    ]
  }
};

Then run: npm run parse

Adding Concepts

Edit components/ConceptExplainer.tsx and add to CONCEPT_EXPLANATIONS:

const CONCEPT_EXPLANATIONS = {
  'Your Concept': {
    description: 'What this concept means',
    example: 'int x = 5; // example code'
  }
};

Styling Customization

Edit tailwind.config.js and app/globals.css to customize colors and appearance.

Performance Tips

• Images are automatically optimized
• Code is split into separate chunks
• CSS is minified in production
• Static files are cached efficiently

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Troubleshooting

Port already in use

npm run dev -- -p 3001

Clear Next.js cache

rm -rf .next
npm run dev

Rebuild data

node scripts/parse-examples.js
npm run dev

Contributing

Contributions are welcome! Please:

1. Add detailed explanations for examples
2. Improve existing walkthroughs
3. Fix typos or clarify concepts
4. Add new examples to the cpp-101 directory

License

Licensed under the MIT License - see LICENSE file for details.

Credits

• Examples from Codedex's cpp-101
• Built with Next.js
• Styled with Tailwind CSS
• Code highlighting with Highlight.js

Support

For issues and questions:

• Open an issue on GitHub
• Check the Codedex community
• Visit the C++ Learning Hub documentation

---

Happy Learning! 🚀