mirayatech / NinjaPen

👾 An CodePen clone built with React and TypeScript.

🖊️ NinjaPen - CodePen Clone

NinjaPen is my own version of CodePen, built for coders who want a straightforward and efficient way to write and test HTML, CSS, and JavaScript. Using React and TypeScript, I made sure NinjaPen is easy to use and gets the job done. The app is not responsive.

🚀 Key Features

• Live Preview: See your code changes in real time.
• Custom Editors: Separate editors for HTML, CSS, and JavaScript with clear syntax and numbering.
• Auto-Save: Your code is saved in local storage, so you won't lose your work.
• Flexible Layout: Easily expand or collapse code sections as you work.

📦 Built With

• CSS
• React.js
• TypeScript
• CodeMirror

💡 Improvement

• More Languages: Support more coding languages and frameworks.
• Themes: Let users pick their own color themes, including dark mode.
• Collaborate: Add a way for multiple people to work on the same code.
• More Editor Tools: Add features like auto-complete and error checking.

🎬 Video

Screen.Recording.2024-01-14.at.11.08.09.mov