docs: Add new contributors guide

docs/contributing.md

@@ -33,21 +33,81 @@ The next Community Call will be held on October 24th, 2024 at [5:00 PM CEST](htt
 Please use the [project's issue tracker](https://github.com/headlamp-k8s/headlamp/issues) for filing any bugs you find or features
 you think are useful.
 
+### Guidelines for Submitting an Issue
+
+When submitting an issue, follow these guidelines to help maintainers address it efficiently:
+
+- **Search for Existing Issues:** Use the issue tracker to see if your issue already exists. If it does, consider adding your input to the existing issue instead of opening a new one.
+- **Structure Your Issue Description:**  
+  - **Summary:** Briefly explain the issue.  
+  - **Expected Behavior:** What did you expect to happen?  
+  - **Observed Behavior:** What actually happened?  
+  - **Steps to Reproduce:** List clear steps to reproduce the issue.  
+- **Add Relevant Labels:** Use labels such as `bug`, `desktop` to categorize your issue properly.
+
 ### Security issues
 
 For filing security issues that are sensitive and should not be public, please
 send an email to <security@headlamp.dev> .
 
-## Translations
+## Submitting a Pull Request (PR)
 
-If you want to contribute to the internationalization of Headlamp, please refer to the
-dedicated [i18n docs](./development/).
+Follow these steps when submitting a PR to ensure it meets the project’s standards.
 
-### Complex contributions
+### 1. Run Tests and Format Your Code
+
+Navigate to the `frontend` folder and run the following commands:
+
+- `cd frontend`  
+- `npm run test` – Run the test suite.  
+- `npm run tsc` – Check for TypeScript errors.  
+- `npm run format` – Format your code to match the project’s style.
+
+These steps ensure your code is functional, well-typed, and formatted consistently.
+
+---
+
+### 2. Follow Commit Guidelines
+
+Use **atomic commits** to keep each commit focused on a single change. Follow this structure for your commit messages:
+
+`<scope>: <concise description>`
+
+**Examples:**
+
+- `frontend: Fix home button not navigating home`  
+- `backend: Add new API route for Helm chart details`
+
+For more detailed commit practices, see Kinvolk's [Git contribution guidelines](https://github.com/kinvolk/contribution/tree/master/topics/git.md).
+
+---
+
+### 3. Write a Descriptive PR Description
+
+When opening a PR, make sure to:
+
+- **Summarize your changes** and **why** they are needed.  
+- **Link to the related issue**, if applicable.  
+- **Provide steps to test** the changes.
+
+Example:
+
+**This PR fixes the home button bug where the button did not navigate back to the homepage.**
+
+**Steps to Test:**  
+1. Click on the 'Home' button in the sidebar.  
+2. Verify that it navigates to the main screen.
+
+---
+
+### 4. Use Labels for Organization
+
+Add relevant labels to your PR to help with triaging and prioritization:
+
+Example: 
+- enhancement  
+- documentation  
 
-If you have a complex contribution in mind (meaning changes in the architecture
-or a lot of LOC changed), it is advisable to first file a GitHub issue and
-discuss the implementation with the project's maintainers.
 
 ## Coding style
 
@@ -71,6 +131,17 @@ tested for compliance with the coding style.
 To speed up a review from the project's maintainers, please make sure that
 the CI checks are passing for your PR.
 
+## Complex contributions
+
+If you have a complex contribution in mind (meaning changes in the architecture
+or a lot of LOC changed), it is advisable to first file a GitHub issue and
+discuss the implementation with the project's maintainers.
+
+## Translations
+
+If you want to contribute to the internationalization of Headlamp, please refer to the
+dedicated [i18n docs](./development/).
+
 ## Commit guidelines
 
 For general guidelines on making PRs/commits easier to review, please check

docs/new_contributors_guide.md

@@ -0,0 +1,115 @@
+(Note: placing this here as a placeholder location so that the content can be worked on)
+
+# Guide for First-Time Contributors to Headlamp
+
+Welcome to the Headlamp project! We're excited to have you here. Whether you're submitting a **Pull Request (PR)** or reporting an **Issue**, follow this guide to get started smoothly.
+
+---
+
+## Submitting Your First Pull Request (PR)
+
+Before creating a PR, make sure your code is properly tested and formatted according to our standards.
+
+### 1. Run Tests and Formatting Scripts
+
+Navigate to the `frontend` folder and run the following commands:
+
+- `cd frontend`  
+- `npm run test` – Run the test suite  
+- `npm run tsc` – Check for TypeScript errors  
+- `npm run format` – Format your code  
+
+These scripts ensure your code is functional, well-typed, and consistently formatted before submission.
+
+---
+
+### 2. Follow Atomic Commit Styling
+
+Use **atomic commits** to keep each commit focused on a single change. Follow this structure for your commit messages:
+
+`<scope>: <concise description>`
+
+**Examples:**
+
+- `frontend: Fix home button not navigating home`  
+- `backend: Add new API route for Helm chart details`
+
+---
+
+### 3. Write a Descriptive PR Description
+
+Include the following details in your PR description:
+
+- **Summary** of the changes and **why** they were needed.  
+- **Link to the related issue** (if applicable).  
+- **Steps to test** the changes.
+
+**Example:**
+
+**This PR fixes the home button bug where the button did not navigate back to the homepage.**
+
+**Steps to Test:**  
+1. Click on the 'Home' button in the sidebar.  
+2. Verify that it navigates to the main screen.
+
+---
+
+### 4. Use Labels to Organize PRs
+
+Add relevant labels to your PR to help with triaging and prioritization. Some common labels:  
+
+- bug  
+- enhancement  
+- documentation
+
+---
+
+## Submitting Your First Issue
+
+When creating an issue, follow these guidelines to help us understand and resolve it efficiently.
+
+### 1. Search for Existing Issues
+
+Use the search function in the **Issues** tab to check if your issue already exists. If it does, consider adding a comment to the existing issue instead of creating a new one.
+
+---
+
+### 2. Use a Clear Description
+
+Structure your issue description like this:
+
+**Summary:**  
+The home button is not navigating back to the homepage.
+
+**Expected Behavior:**  
+Clicking the 'Home' button should navigate to the homepage.
+
+**Observed Behavior:**  
+Clicking the 'Home' button does nothing.
+
+**Steps to Reproduce:**  
+1. Launch the app.  
+2. Click on 'Home' in the sidebar.
+
+---
+
+### 3. Add Relevant Labels
+
+Use labels to categorize your issue properly:
+
+- bug  
+- feature request  
+- question  
+- help wanted
+
+This helps maintainers and contributors manage and prioritize issues efficiently.
+
+---
+
+## Need Help?
+
+If you get stuck, feel free to ask questions in the **Discussions** tab or tag a maintainer in your issue or PR. We're here to help!
+
+---
+
+Thank you for contributing to Headlamp! Every contribution, no matter how small, makes a big difference.