add beginner's guide

docs/BEGINNERS_GUIDE.md

@@ -0,0 +1,95 @@
+
+# Beginner's Guide to Contributing to Musicblocks-v4
+
+
+## Introduction
+
+Musicblocks-v4 is a _Visual Programming Language_ and collection of
+_manipulative tools_ for exploring musical and mathematical concepts
+in an integrative and fun way.
+
+
+
+## System Overview:
+
+#### Tech Stack:
+- **Client-side Web Application**:
+    - **Written in TypeScript**: *TypeScript is a superset of JavaScript that adds static typing. TypeScript offers all of JavaScript’s features, and an additional layer on top of these: TypeScript’s type system.*
+    - **UI Components with React**: *React is used to render the user interface components.React is a declarative, efficient, and flexible JavaScript library for building user interfaces*
+    - **Flexibility in UI Libraries/Frameworks**: *The project is designed to work independently with any JavaScript UI library/framework or even the JS DOM API directly.*
+- **Bundling and Tooling**:
+
+    - **Vite**: *Vite is utilized as the bundler for the project. It helps with fast development by leveraging native ES module imports.*
+    - **SCSS**: *SCSS (Sass) is used for styling, providing a more structured approach to writing CSS.*
+
+#### Development Environment:
+
+  - **Node.js**: *The project requires Node.js as the runtime environment to execute JavaScript on the server side.*
+
+
+#### Tooling:
+- **ESLint**: *ESLint is a tool for code linting, ensuring code quality and consistency in adherence to defined coding standards.*
+ - **Docker**:* Docker is used for containerization, creating a consistent and isolated environment for development and deployment.*
+
+#### Testing and Quality Assurance:
+ - **Jest**: *Jest is employed for JavaScript testing, covering unit tests for code.*
+ - **Cypress**: *Cypress facilitates end-to-end testing, simulating user behavior to ensure application functionality.*
+
+#### Contributing and Development Process:
+
+- **GitHub Project Management**:
+
+    - The project leverages GitHub for task management via its Projects tab.
+    - Discussions tab is used for planning and tracking progress.
+
+- **Parallel Development Repository**:
+
+    - Development of the programming framework occurs in the musicblocks-v4-lib repository.
+    - The 'develop' branch and related feature branches serve as sources for updates.
+    - Issues tab in both repositories is used to track tasks and issues.
+
+
+## Resources to get started
+
+- **TypeScript** :
+    - [documentation](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html) : Access the official TypeScript documentation for in-depth information and guidance on using TypeScript effectively.
+    - [video tutotials](https://www.youtube.com/watch?v=30LWjhZzg50) : Explore video tutorials available online to learn TypeScript concepts visually and practically.
+
+- **React** : 
+    - [documentation](https://react.dev/learn/typescript): Dive into React's official documentation to understand its core concepts and how to build applications with React.
+    - [video tutotials](https://www.youtube.com/watch?v=FJDVKeh7RJI):Explore a variety of video tutorials covering React development for practical insights and learning.
+
+- **Docker**
+    - [documentation](https://docs.docker.com/):Refer to Docker's official documentation for comprehensive guides on using Docker for containerization and deployment.
+    - [video tutorial](https://www.youtube.com/watch?v=RqTEHSBrYFw):Access video tutorials that offer step-by-step guidance on Docker usage and best practices.
+- **Jest** 
+    - [documentation](https://jestjs.io/docs/getting-started): Check Jest's official documentation for comprehensive guides on writing tests, assertions, and configuring Jest for testing.
+    - [video tutorial](https://www.youtube.com/watch?v=ajiAl5UNzBU):Explore video tutorials that provide practical examples and tips for using Jest effectively in test suites.
+- **Cypress**
+    - [documentation](https://docs.cypress.io/guides/overview/why-cypress): Explore Cypress's official documentation for detailed information on setting up end-to-end tests and writing assertions.
+
+## Tips for Effective Contributions:
+- **Understand the Project**:
+    - Explore Documentation: Familiarize yourself with project documentation, including README files, contributing guidelines, and coding standards.
+
+    -  Review Existing Code: Study the existing codebase, understanding its structure and architecture. This helps in aligning your contributions with the project's overall design. 
+- **Follow Contribution Guidelines**:
+    - Adhere to Coding Standards: Ensure your code meets formatting, naming conventions, and project-specific best practices.
+   - Contribute Purposefully: Focus on existing issues or feature requests aligned with the project roadmap.
+-  **Write Clean and Readable Code**:
+    - Modular and Maintainable: Break down your code into logical and reusable components to enhance readability and maintainability.
+    - Use Descriptive Naming: Use meaningful and descriptive names for variables, functions, and classes to convey their purpose.
+- **Test Your Contributions**:
+    - Test Your Code: Write tests to validate your changes and ensure they don't introduce new bugs. Ensure both unit and integration tests are covered if applicable.
+    - Check for Edge Cases: Consider edge cases and handle them appropriately in your contributions.
+
+Join and communicate with other members on our community.
+we communicate on element.
+[click here ](https://app.element.io/#/room/#musicblocksdev:matrix.org)
+
+
+
+
+
+## Acknowledgment:
+At Musicblocks-v4, we highly value and appreciate every contribution, no matter the size. Your dedication and effort contribute significantly to the success and improvement of this project.