ToTSX

ToTSX is a modern, web-based code learning platform designed to help developers transition from JavaScript React to TypeScript React (TSX). This platform offers an interactive playground, structured lessons, and a clean, developer-friendly UI to make the learning experience seamless and engaging.

Features

• Interactive Lessons: Step-by-step tutorials to learn TypeScript with React.
• In-Browser Code Editor: A live code editor with TSX support for immediate feedback.
• Playground: Experiment with TypeScript and React concepts freely.
• Progress Tracking: Visualize your learning journey with stats and milestones.
• Dark Mode UI: Sleek, developer-centric design with a dark theme.

Tech Stack

Frontend

• Next.js
• TailwindCSS for styling
• Monaco Editor or Sandpack for code editor
• Framer Motion for animations

Backend

• Node.js with Express
• MongoDB for database
• Firebase for authentication

Prerequisites

• Node.js (v22)
• MongoDB
• npm or yarn