JS Playground

A modern, feature-rich JavaScript playground built with Next.js and Monaco Editor. This project aims to provide a robust environment for testing, learning, and experimenting with JavaScript code.

🚀 Features

• Monaco Editor Integration: Professional code editing with syntax highlighting and autocompletion
• Real-time Code Execution: Execute JavaScript code instantly
• Console Output: Full console emulation (log, error, warn, info)
• Customizable Layout: Switch between horizontal and vertical layouts
• Theme Support: Light and dark themes available
• Persistent Storage: Your code and settings are automatically saved
• TypeScript Support: Full TypeScript type checking and IntelliSense

🛠️ Tech Stack

• Next.js 14
• TypeScript
• Monaco Editor
• Zustand
• Tailwind CSS
• shadcn/ui

📦 Installation

• Clone the repository:

git clone https://github.com/linder3hs/js-playground.git
cd js-playground

• Install dependencies:

yarn install

• Run the development server:

yarn dev

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

🤝 Contributing

We welcome contributions from the community! Here's how you can help:

Contributing Guidelines

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

Code Style

• Use TypeScript for type safety
• Follow the existing coding style
• Write clear commit messages
• Add appropriate comments and documentation
• Update tests when necessary

Project Structure

js-playground/
├── src/
│   ├── app/                   # Next.js app directory
│   ├── components/            # React components
│   │   ├── editor/           # Editor-related components
│   │   ├── console/          # Console output components
│   │   ├── layout/           # Layout components
│   │   └── ui/               # shadcn/ui components
│   ├── hooks/                # Custom React hooks
│   ├── lib/                  # Utilities and helpers
│   │   ├── types/           # TypeScript types
│   │   └── utils/           # Utility functions
│   └── store/               # Zustand store
└── public/                  # Static files

Roadmap and Future Features

• Multiple file support
• NPM package integration
• Custom themes
• Sharing capabilities
• Integrated terminal
• File system integration
• Project templates
• Code formatting options

🐛 Bug Reports and Feature Requests

If you find a bug or would like to request a new feature, please create an issue on GitHub. When creating an issue, please include:

• A clear and descriptive title
• A detailed description of the bug or feature
• Steps to reproduce (for bugs)
• Expected behavior
• Current behavior
• Screenshots (if applicable)
• Any relevant code snippets

📄 License

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

🙏 Acknowledgments

• Monaco Editor team
• shadcn/ui components
• All contributors who help improve this project

📫 Contact

Project Link: https://github.com/linder3hs/js-playground

---

Made with ❤️ by contributors worldwide