An interactive coding education platform built with Next.js, featuring 17 progressively challenging JavaScript problems with an in-browser code editor, test cases, and detailed explanations.
- Interactive Code Editor: Built with CodeMirror for a smooth coding experience
- 17 Progressive Problems: From beginner-friendly basics to advanced algorithms
- 13 Easy problems (JavaScript fundamentals)
- 2 Medium problems (algorithms and data structures)
- 2 Hard problems (complex algorithmic challenges)
- Real-time Testing: Run your code against multiple test cases instantly
- Solution Explanations: Detailed explanations with code examples for every problem
- Video Tutorials: YouTube video embeds for visual learners (coming soon for most problems)
- Progress Tracking: Automatically saves your solved problems and code in localStorage
- Responsive Design: Built with Tailwind CSS for a beautiful UI on all devices
- Node.js 18+ installed
- npm, yarn, pnpm, or bun package manager
# Clone the repository
git clone https://github.com/nazimboudeffa/learntocode-nextjs.git
cd learntocode-nextjs
# Install dependencies
npm install
# or
yarn installRun the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 to see the application.
npm run build
npm start- Sum Two Numbers - Basic arithmetic and return statements
- Multiply Two Numbers - Function parameters and multiplication
- Is Even - Conditionals and modulo operator
- First Letter - String indexing and character access
- Sum Array - Array iteration and accumulation
- Max Number - Array methods and Math utilities
- Filter Positive - Array filtering techniques
- Repeat String - String manipulation and loops
- Reverse String - String reversal algorithms
- Count Vowels - String iteration and character checking
- Palindrome - String comparison and manipulation
- FizzBuzz - Classic logic problem with conditionals
- High and Low - Array operations and string parsing
- Two Sum - Hash map usage and array algorithms
- Is Anagram - String manipulation and character frequency
- Merge Intervals - Advanced array manipulation and sorting
- Longest Substring - Sliding window algorithm
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Editor: CodeMirror via @uiw/react-codemirror
- Icons: React Icons
- Toast Notifications: React Hot Toast
src/
├── app/ # Next.js App Router pages
│ ├── page.tsx # Homepage
│ ├── about/ # About page
│ ├── problems/ # Problems list and workspace
│ │ └── [slug]/ # Dynamic problem pages
│ │ └── explanation/ # Solution explanations
├── components/ # React components
│ ├── Navbar.tsx # Navigation bar
│ ├── Problems.tsx # Problems table
│ └── Workspace/ # Code editor components
├── problems/ # Problem definitions
│ ├── list/ # Individual problem files
│ ├── types/ # TypeScript types
│ └── utils/ # Browser-safe assertion utilities
└── hooks/ # Custom React hooks
- Browse Problems: View all problems sorted by difficulty on the problems page
- Select a Problem: Click on any problem to open the interactive workspace
- Write Your Solution: Use the built-in code editor with syntax highlighting
- Run Tests: Execute your code against predefined test cases
- View Explanation: Check the solution explanation page for hints and complete solutions
- Track Progress: Your solved problems are automatically saved
To add a new problem:
- Create a new file in
src/problems/list/:
import { assertDeepStrictEqual } from "@/problems/utils/assert";
import { ProblemElement } from "../types/problem";
const starterCode = `function yourFunction(param) {
// Write your code here
};`;
function handler(fn: Function) {
try {
const result = fn(testInput);
assertDeepStrictEqual(result, expectedOutput);
return true;
} catch (error: any) {
console.log("Handler function error");
throw new Error(error);
}
}
export const yourProblem: ProblemElement = {
id: "your-problem",
slug: "yourproblem",
title: "Your Problem Title",
difficulty: "Easy", // "Easy" | "Medium" | "Hard"
category: "Category Name",
order: 18, // Next available order
// Problem statement as plain text (string or array of paragraphs)
problemStatement: [
"First paragraph explaining the problem.",
"Second paragraph with more details.",
"Third paragraph with example usage."
],
// Test case examples
examples: [
{
id: 1,
inputText: "input1, input2",
outputText: "expectedOutput",
explanation: "Explanation of this test case"
}
],
// Constraints as plain text (string or array)
constraints: "No special constraints.",
// Structured solution (no HTML)
solution: {
approach: "Brief description of the solution approach.",
explanation: "Detailed step-by-step explanation of how the solution works.",
complexity: {
time: "O(n)",
space: "O(1)"
},
code: `function yourFunction(param) {
return result;
}`
},
starterCode,
handlerFunction: handler,
starterFunctionName: "function yourFunction(",
videoId: "youtube-video-id" // Optional
};- Register it in
src/problems/list/index.ts:
import { yourProblem } from "./yourproblem";
export const problems: ProblemMap = {
// ... existing problems
"yourproblem": yourProblem,
};- Your problem will automatically appear in the problems list!
Problems now use plain text instead of HTML for better maintainability:
- problemStatement: Array of strings (paragraphs) or single string
- constraints: String or array of strings
- solution: Structured object with:
approach: Brief solution strategyexplanation: Detailed explanation (string or array)complexity: Object withtimeandspacepropertiescode: Solution code as template literal
Contributions are welcome! Feel free to:
- Add new problems
- Improve existing explanations
- Fix bugs or enhance features
- Add video tutorials
This project is open source and available under the MIT License.
Built with inspiration from coding education platforms like LeetCode and designed to help beginners learn JavaScript fundamentals through hands-on practice.
Made with ❤️ by Nazim Boudeffa