A LeetCode-style coding platform with 155+ challenges across 19 categories

Quick Start • Features • Categories • Tech Stack • Contributing

155+ Problems

19 Categories

40+ Test Files

140K+ Lines of Code

---

What is This?

A production-grade learning platform for mastering JavaScript and TypeScript through hands-on coding challenges. Think LeetCode, but focused entirely on JS/TS fundamentals, patterns, and best practices.

Built with the latest technologies and following modern development practices, this platform offers:

• Real coding environment powered by Monaco Editor (the engine behind VS Code)
• Instant feedback with automated test runners and detailed error reporting
• Progress tracking to monitor your learning journey
• Beautiful UI with dark/light themes and responsive design

---

Features

Code Editor Monaco Editor integration (VS Code engine) Syntax highlighting for JS & TS Real-time code validation Auto-completion & IntelliSense Multiple themes support	Test Runner Sandboxed code execution Comprehensive test validation Detailed error reporting Stack traces for debugging Performance timing
Progress System Persistent localStorage progress Streak tracking Filter by difficulty/category Completion statistics Real-time dashboard	Modern UI/UX Responsive design Dark/Light themes System preference detection Smooth animations WCAG 2.1 AA accessible

---

Quick Start

# Clone the repository
git clone https://github.com/davidagustin/coding-tricks-practice.git

# Navigate to project
cd coding-tricks-practice

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 and start coding!

All Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run start	Start production server
npm test	Run all tests
npm run test:watch	Run tests in watch mode
npm run test:coverage	Generate coverage report
npm run lint	Run ESLint
npm run format	Format with Biome

---

Problem Categories

	Category	Topics
📘	JavaScript Basics	Fundamentals, operators, control flow
📦	Array Methods	map, filter, reduce, find, every, some
⏳	Async/Promises	Promises, async/await, error handling
🔷	TypeScript Basics	Types, interfaces, generics
🔶	TypeScript Advanced	Conditional types, mapped types, infer
🧮	Functional Programming	Currying, composition, memoization
✨	ES6+ Features	Destructuring, spread, modules
🏗️	Design Patterns	Factory, singleton, observer, decorator
🗃️	Data Structures	Sets, Maps, WeakMap, WeakSet
🔍	Algorithms	Sorting, searching, recursion
🌐	DOM/Browser	Events, storage, observers
⚡	Performance	Optimization, debounce, throttle
🧪	Testing Patterns	Mocks, stubs, TDD practices
🚨	Error Handling	Try/catch, custom errors
🔤	Regular Expressions	Patterns, lookahead, validation
📝	String Methods	Manipulation, formatting, parsing
🔑	Object Methods	Keys, values, entries, freeze
📅	Date & Time	Formatting, timezones, calculations
🔢	Numbers & Math	Precision, formatting, BigInt

---

Tech Stack

Core Framework

Development Tools

Full Technology Breakdown

Frontend

• Next.js 16 (App Router)
• React 19
• TypeScript 5.9
• Tailwind CSS 4.0

Editor

• Monaco Editor
• Custom syntax highlighting
• IntelliSense integration

Testing

• Jest
• React Testing Library
• 40+ test suites

Quality

• ESLint
• Biome
• Husky pre-commit hooks

Deployment

• Vercel optimized
• Edge-ready
• Global CDN

---

Architecture

coding-tricks-practice/
├── app/                          # Next.js App Router
│   ├── page.tsx                  # Home with stats
│   ├── layout.tsx                # Root layout
│   ├── problems/
│   │   ├── page.tsx              # Problems list
│   │   └── [id]/page.tsx         # Problem detail
│
├── components/                   # React Components
│   ├── CodeEditor.tsx            # Monaco wrapper
│   ├── TestResults.tsx           # Test display
│   ├── ProblemTable.tsx          # Problems list
│   ├── FilterSidebar.tsx         # Filters
│   ├── Navbar.tsx                # Navigation
│   └── ThemeToggle.tsx           # Theme switcher
│
├── lib/                          # Core Logic
│   ├── problems/                 # 155+ problems
│   ├── test-runner.ts            # Sandboxed execution
│   └── constants.ts              # App constants
│
└── __tests__/                    # Test Suites
    ├── app/                      # Page tests
    ├── components/               # Component tests
    └── lib/                      # Library tests

---

Security & Performance

Security Sandboxed code execution Input sanitization (DOMPurify) Function name validation Timeout protection XSS prevention (CSP compliant)

Performance React.memo optimization useCallback/useMemo hooks Dynamic code splitting Lazy-loaded Monaco Editor Efficient filtering algorithms

---

Deployment

Optimized for Vercel with automatic HTTPS, global CDN, and zero-config deployment.

---

Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

License

This project is open source under the MIT License.

---

Built for developers who want to master JavaScript & TypeScript