CraftC is a complete, free learning platform for C and C++. It takes you from absolute beginner to job-ready through structured lessons, runnable code examples, visual roadmaps, real-world projects, interview preparation, and quick-reference cheatsheets — all in a fast, modern, responsive interface with light/dark themes.
- Overview
- Features
- Tech Stack
- Getting Started
- Project Structure
- Key Pages
- Data Model
- Theme System
- Contributing
- License
CraftC is not just another tutorial site. It is a full learning platform built around a clear philosophy:
Every learner should always know what to learn next, why it matters, and how to apply it.
The curriculum is organised into structured lessons that follow a consistent format — introduction, theory, syntax, code example, expected output, explanation, notes, tips, and practice exercises. Each lesson is part of a larger roadmap with visual phases, so you never lose sight of the big picture.
| Resource | Count | Details |
|---|---|---|
| Lessons | 40+ | Across C and C++ curricula, grouped by category |
| Projects | 12 | Guided C and C++ project briefs with requirements, milestones, sample I/O, architecture and quality checks |
| DSA Topics | 13 | Foundation-to-advanced explanations, complexity notes and C++17 examples |
| DSA Problems | 11 | Progressive problems with approaches, reference solutions and complexity analysis |
| Interview Questions | 42 | Categorized by C, C++, DSA, and General |
| Roadmaps | 3 | Phase-by-phase roadmaps for C, C++, and DSA |
| Cheatsheets | 2 | Quick syntax reference for C and C++ |
| Downloads & References | 6 tools + 6 references | Editors, compilers, development tools, and official language documentation |
Every lesson follows a consistent, repeatable structure:
- Introduction — what the concept is and why it matters
- Theory — the underlying mechanics
- Syntax — the formal grammar
- Example — runnable code with a copy button
- Output — what the code prints
- Explanation — line-by-line walkthrough
- Notes & Tips — gotchas and best practices
- Common Mistakes — what beginners get wrong
- Interview Questions — what employers ask about this topic
- Practice / Assignment — exercises to reinforce learning
- Summary — key takeaways
Code blocks are rendered with Shiki using the GitHub Dark theme, with language badges, copy-to-clipboard buttons, and proper monospace formatting. The highlighter is lazy-loaded so it never blocks initial page render.
A command-palette-style search modal (Ctrl+K / Cmd+K) lets you instantly search across all lessons, projects, interview questions, roadmaps, and cheatsheets. Results are grouped by category with icons and keyboard navigation.
Three complete roadmaps (C, C++ and DSA) break the learning journey into phases with topics and estimated durations — from Foundations through Projects & Interview Prep.
12 real-world projects ranging from a beginner Calculator to an advanced HTTP Server and Snake Game. Each project lists its language, difficulty, topics covered, and estimated build time.
42 interview questions across C, C++, DSA and General programming, each with a concise answer. Filterable by category and difficulty.
Two quick-reference cheatsheets (C and C++) covering the most common syntax patterns — from Hello World to smart pointers and lambdas.
A persistent theme toggle with smooth transitions. The entire color system is built on CSS custom properties, so theme switching is instant and flash-free.
Fully responsive from mobile to desktop with an 8px spacing system, fluid typography, and adaptive layouts throughout.
- Lazy-loaded routes — each page is code-split and loaded on demand
- Lazy-loaded syntax highlighter — Shiki loads only when a code block is first rendered
- CSS-based theming — no JavaScript theme runtime; all colors are CSS variables
| Technology | Version | Purpose |
|---|---|---|
| React | 19 | UI framework |
| TypeScript | 6 | Type safety |
| Vite | 8 | Build tool & dev server |
| Tailwind CSS | 4 | Styling (CSS-based config, no tailwind.config.js) |
| React Router | 7 | Client-side routing |
| Framer Motion | 13 | Animations & micro-interactions |
| Shiki | 4 | Syntax highlighting |
| Lucide React | — | Icon library |
| Supabase | — | Backend (auth, database, edge functions) |
- Node.js 18+ and npm
- A modern browser
# Clone the repository
git clone https://github.com/ashutoshpalhare/craftc.git
cd craftc
# Install dependencies
npm install
# Start the development server
npm run devThe dev server runs at http://localhost:5173.
The production site is published at https://ashutoshpalhare.github.io/craftc/. Crawler discovery files are available at /robots.txt and /sitemap.xml.
# Type-check and build
npm run build
# Preview the production build locally
npm run previewThe built files are output to dist/.
craftc/
├── public/ # Static assets, robots.txt and sitemap.xml
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── CodeBlock.tsx # Shiki-powered syntax-highlighted code block
│ │ ├── Footer.tsx # Site footer with social links
│ │ ├── LessonSectionRender.tsx # Renders individual lesson sections
│ │ ├── Navbar.tsx # Top navigation with theme toggle & search
│ │ ├── SearchModal.tsx # Command-palette global search (Ctrl+K)
│ │ ├── ThemeToggle.tsx # Dark/light theme switcher
│ │ └── ui.tsx # Shared primitives (Card, Badge, SectionHeading, etc.)
│ ├── data/ # All content data (curriculum, projects, etc.)
│ │ ├── cCurriculum.ts # Full C programming curriculum
│ │ ├── cppCurriculum.ts # Full C++ programming curriculum
│ │ ├── roadmaps.ts # Learning roadmaps for C, C++ and DSA
│ │ ├── dsa.ts # DSA topics and solved problems
│ │ ├── projects.ts # Project library (12 projects)
│ │ ├── interviewQuestions.ts # Interview Q&A bank
│ │ ├── cheatsheets.ts # Syntax cheatsheets for C and C++
│ │ └── downloads.ts # Dev tool download links
│ ├── hooks/
│ │ └── useTheme.ts # Theme management hook
│ ├── layouts/
│ │ ├── MainLayout.tsx # Standard site layout (navbar + footer)
│ │ └── LearnLayout.tsx # LMS layout with course sidebar
│ ├── pages/
│ │ ├── HomePage.tsx # Landing page with all sections
│ │ ├── CoursePage.tsx # Course overview (/learn/:courseId)
│ │ ├── LessonPage.tsx # Individual lesson view
│ │ ├── RoadmapsPage.tsx # Visual roadmaps
│ │ ├── ProjectsPage.tsx # Project library
│ │ ├── InterviewPrepPage.tsx # Interview questions
│ │ ├── CheatsheetsPage.tsx # Quick reference
│ │ ├── DownloadsPage.tsx # Dev tools
│ │ ├── AboutPage.tsx # About the project
│ │ └── NotFoundPage.tsx # 404
│ ├── types/
│ │ └── index.ts # TypeScript interfaces for all data models
│ ├── utils/
│ │ └── curriculum.ts # Curriculum helper functions
│ ├── App.tsx # Root component with routing
│ ├── main.tsx # Entry point
│ └── index.css # Tailwind import + theme variables
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md
| Route | Page | Description |
|---|---|---|
/ |
Home | Hero, features, learning path, roadmap preview, projects showcase, interview teaser, FAQ, and CTA |
/learn/:courseId |
Course | Course overview with a sidebar listing all categories and lessons |
/learn/:courseId/:lessonSlug |
Lesson | Full lesson with all structured sections and syntax-highlighted code |
/roadmaps |
Roadmaps | Phase-by-phase visual roadmaps for C, C++ and DSA |
/projects |
Projects | Filterable project briefs with requirements, milestones, sample I/O, architecture and quality checks |
/interview-prep |
Interview Prep | Filterable interview questions with answers |
/cheatsheets |
Cheatsheets | Quick syntax reference tables for C and C++ |
/downloads |
Downloads | Links to editors, compilers, and development tools |
/about |
About | About the project and its mission |
All content is stored as typed TypeScript data files in src/data/. The core types are defined in src/types/index.ts:
interface Curriculum {
id: string;
title: string;
subtitle: string;
language: 'c' | 'cpp';
categories: LessonCategory[];
}
interface LessonCategory {
id: string;
title: string;
icon: string;
lessons: Lesson[];
}
interface Lesson {
id: string;
title: string;
slug: string;
description: string;
duration: string;
difficulty: 'beginner' | 'intermediate' | 'advanced';
sections: LessonSection[];
}
interface LessonSection {
type: 'introduction' | 'theory' | 'syntax' | 'example' | 'output'
| 'explanation' | 'notes' | 'tips' | 'bestPractices'
| 'commonMistakes' | 'realWorld' | 'interviewQuestions'
| 'practice' | 'assignment' | 'summary';
title: string;
content?: string;
code?: { filename?: string; language: string; code: string; output?: string };
items?: string[];
questions?: { q: string; a: string }[];
}This structure makes it straightforward to add new lessons — just append a new Lesson object to the appropriate category in the curriculum data file.
CraftC uses Tailwind CSS v4 with a CSS-based configuration. There is no tailwind.config.js — the theme is defined entirely through CSS custom properties in src/index.css:
@theme {
--color-primary: #...;
--color-accent: #...;
--color-surface: #...;
/* ...full color ramp: primary, secondary, accent, success, warning, error, neutrals */
}Dark/light themes are toggled by switching the data-theme attribute on <html>, with all colors referencing CSS variables like var(--color-primary). The user's preference is persisted in localStorage and respects the system preference on first visit.
Contributions are welcome. Here are some ways to help:
- Add lessons — append new
Lessonobjects to the curriculum data files - Add projects — add entries to
src/data/projects.ts - Add interview questions — add entries to
src/data/interviewQuestions.ts - Improve cheatsheets — add syntax entries to
src/data/cheatsheets.ts - Fix bugs or improve UX — open an issue or submit a pull request
- Follow the existing code style and conventions
- Ensure
npm run buildpasses before submitting - Keep lesson sections consistent with the established structure
- Test on both light and dark themes
This project is open source and available under the MIT License.
CraftC — Built for serious learners. Free forever.