An interactive learning platform for mastering TypeScript through hands-on exercises, real-world examples, and interactive quizzes. Visit typescripttutor.arwindpianist.store to start learning!

• Interactive Lessons: Learn TypeScript through carefully structured lessons
• Code Editor: Practice TypeScript directly in your browser with Monaco Editor
• Progress Tracking: Save your progress locally and track your learning journey
• Multiple Choice Quizzes: Test your knowledge with interactive quizzes
• Responsive Design: Learn on any device - mobile, tablet, or desktop
• Dark Mode: Comfortable viewing experience in any lighting condition
• Search Functionality: Quickly find lessons and topics
• Structured Learning Path: Follow a carefully designed curriculum

• Next.js 15: React framework for production
• TypeScript: For type-safe code
• React 19: UI library
• Tailwind CSS: Utility-first CSS framework
• next-themes: Dark mode support

• Radix UI: Accessible UI components
• Lucide Icons: Beautiful icons
• Monaco Editor: Code editor integration
• React Markdown: Markdown rendering
• Tailwind Merge: Utility for merging Tailwind classes
• Class Variance Authority: For component variants

• React Hook Form: Form management
• Zod: Schema validation
• @hookform/resolvers: Form validation resolvers

• Jest: Testing framework
• React Testing Library: Component testing
• ts-jest: TypeScript support for Jest

typescript-tutor/
├── app/                    # Next.js app directory
│   ├── lesson/            # Lesson pages
│   ├── roadmap/           # Learning roadmap
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Homepage
├── components/            # React components
│   ├── ui/               # UI components
│   ├── navigation.tsx    # Navigation bar
│   └── quiz-block.tsx    # Quiz component
├── lib/                  # Utility functions
│   ├── lessons.ts        # Lesson data
│   ├── progress.ts       # Progress tracking
│   └── types.ts          # TypeScript types
├── public/              # Static assets
└── styles/             # Global styles

• Node.js 18 or later
• npm or yarn

1. Clone the repository:

git clone https://github.com/yourusername/typescript-tutor.git
cd typescript-tutor

2. Install dependencies:

npm install
# or
yarn install

3. Run the development server:

npm run dev
# or
yarn dev

4. Open http://localhost:3000 in your browser.

• npm run dev: Start development server
• npm run build: Build for production
• npm run start: Start production server
• npm run lint: Run ESLint
• npm run test: Run tests
• npm run type-check: Check TypeScript types
• npm run format: Format code with Prettier

The curriculum is structured into three main difficulty levels:

• Introduction to TypeScript
• Basic Types
• Interfaces and Type Aliases
• Functions and Parameters

• Advanced Types
• Generics
• Type Guards
• Utility Types

• Decorators
• Advanced Generics
• Type System Internals
• Performance Optimization

Your progress is automatically saved in your browser's local storage. This includes:

• Completed lessons
• Quiz scores
• Exercise completions

1. Add lesson data to lib/lessons.ts
2. Follow the existing lesson structure
3. Include exercises and quizzes

• Global styles are in app/globals.css
• Component styles use Tailwind CSS
• Dark mode styles are handled by next-themes

Contributions are welcome! Please feel free to submit a Pull Request.

This project is licensed under the MIT License - see the LICENSE file for details.

• Next.js
• Tailwind CSS
• Radix UI
• Monaco Editor
• Vercel for hosting

For support, please open an issue in the GitHub repository or contact us at [email protected].