ReactJS Piano 🎹

A simple and interactive piano application built with ReactJS. This piano works with both mouse clicks and keyboard keydown events, providing a fun and engaging way to play musical notes.

Features

• Interactive Keys: Play notes by clicking on the piano keys or by pressing the corresponding keys on your keyboard.
• Responsive Design: Optimized for different screen sizes, ensuring a seamless experience on both desktop and mobile devices.
• Lightweight and Fast: Built using Vite for quick development and fast build times.
• Customizable: Easily modify the app’s appearance and behavior by tweaking the React components and CSS.

Video Tutorial

🎥 Watch the video tutorial on YouTube
Learn how to set up and customize the ReactJS Piano application from scratch. The video tutorial will be available soon!

Setup

Follow these steps to get the project up and running on your local machine:

1. Clone the repository:

   git clone https://github.com/kouroshneyestani/reactjs-piano.git

2. Navigate to the project directory:

   cd reactjs-piano

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

Technologies Used

• React - A JavaScript library for building user interfaces.
• Vite - A fast build tool and development server.
• ESLint - A tool for identifying and fixing linting errors in code.
• Tailwind CSS - A utility-first CSS framework for styling.

TODO List

• Add Sound Customization: Allow users to choose different sound sets (e.g., electric piano, organ).
• Add Recording Feature: Enable users to record and play back their performances.
• Write Tests: Add unit and integration tests for components.
• Enhance Accessibility: Ensure the app is accessible to users with disabilities.
• Optimize Performance: Analyze and optimize the app’s performance for better efficiency.
• Improve Documentation: Expand the documentation with examples and detailed usage instructions.
• Implement Dark Mode: Add a dark mode feature for users who prefer a different visual style.

Contributing

We welcome contributions from the community! Here’s how you can contribute:

1. Fork the repository to your GitHub account.
2. Clone your forked repository to your local machine:

   git clone https://github.com/your-username/reactjs-piano.git

3. Create a new branch for your feature or fix:

   git checkout -b your-feature-branch

4. Make your changes and commit them with a descriptive message:

   git add .
   git commit -m "Add a descriptive commit message"

5. Push your changes to your forked repository:

   git push origin your-feature-branch

6. Open a pull request on the main repository and describe the changes you’ve made.

License

This project is licensed under the MIT License.

Contact

If you have any questions or suggestions, feel free to reach out:

• Author: Kourosh Neyestani
• Email: [email protected]

Acknowledgements

• React - The JavaScript library for building user interfaces.
• Vite - A fast build tool and development server.
• Tailwind CSS - A utility-first CSS framework for styling.