PlaygroundJS

PlaygroundJS is a collection of interactive games and tools developed to explore and test various web development concepts using Next.js and React.js. The project aims to create fun, innovative, and engaging apps that help enhance web development skills while entertaining users. Each app is an isolated piece of functionality that showcases different ideas, techniques, and experiments in a modular fashion.

Table of Contents

1. Introduction
2. Features
3. Apps
   • Drawing Master
4. Other App Ideas
5. Technologies Used
6. Contributing
7. License

Features

• Modular design with a collection of games and tools, all in one place.
• Built using Next.js for server-side rendering and fast, scalable web apps.
• Easily extendable to add new apps or modify existing ones.
• Interactive experiences that engage users in drawing, manipulating shapes, and gameplay.
• Responsive design for a seamless experience across different devices.

Apps

Drawing Master

Drawing Master is an advanced drawing tool within PlaygroundJS that allows users to:

• Draw freehand pencil strokes.
• Create and manipulate geometric shapes.
• Select, resize, and replace objects on the canvas.
• Undo and redo actions, giving users complete control over their designs.

Key Features of Drawing Master:

• Pencil Tool: Freely draw on the canvas with customizable stroke width and colors.
• Shape Tool: Add various shapes such as rectangles, circles, and lines to your canvas.
• Selection Tool: Select objects on the canvas, allowing for easy repositioning and resizing.
• Resize & Replace: Change the size of shapes and even replace them with new ones.
• Undo/Redo: Reverse or redo your last actions.
• Layered Canvas System: Manage and control multiple layers for more complex drawings.
• Color Maps: Utilize a secondary canvas to detect strokes on cursor position.

Other App Ideas

Here are some other apps included in PlaygroundJS:

• Typing Master: A playful, engaging game designed to enhance users' typing speed and accuracy through interactive challenges and progress tracking. ...and many more to come!

Technologies Used

PlaygroundJS utilizes the following technologies:

• Next.js: A React framework for building web applications with server-side rendering.
• React.js: For building reusable UI components and managing state.
• Canvas API: For drawing graphics in the Drawing Master app.
• Tailwind CSS: For styling the components and ensuring a responsive design.

Contributing

PlaygroundJS is designed for developers and learners who want to explore interactive front-end development. Contributions are welcome! If you would like to contribute to PlaygroundJS or improve the Drawing Master tool, feel free to submit a pull request. Here's how you can get started:

1. Fork the repository.

2. Create a new branch for your feature or bug fix:

   git checkout -b feature/your-feature-name

3. Commit your changes and push to the branch:

   git push origin feature/your-feature-name

4. Open a pull request, and your changes will be reviewed.

License

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