diff --git a/CONTRIBUTION.md b/CONTRIBUTION.md index 69be63a..8506725 100644 --- a/CONTRIBUTION.md +++ b/CONTRIBUTION.md @@ -13,11 +13,10 @@ First things first, fork this repository to your own GitHub account! ### 2. Clone the Forked Repo Locally Now that you’ve forked the repo, clone it to your local machine. -- **Using Command Line**: -```bash - git clone https://github.com/YOUR_USERNAME/weave-game.git -``` -- **Using GitHub Desktop**: +- **Using Command Line**: + `git clone https://github.com/YOUR_USERNAME/weave-game.git` + +- **Using GitHub Desktop**: - Open GitHub Desktop. - Click on "File" > "Clone Repository." - Select your forked repository and click "Clone." @@ -26,25 +25,26 @@ Now that you’ve forked the repo, clone it to your local machine. Creating a separate branch is a best practice! This keeps our work organized. - **Using Command Line**: -```bash - git checkout -b feature-name -``` + `git checkout -b feature-name` + **Example**: -```bash - git checkout -b add-landing-page -``` -- **Using GitHub Desktop**: + `git checkout -b add-landing-page` + +- **Using GitHub Desktop**: - Go to the "Current Branch" menu and select "New Branch." - Name your branch (e.g., `add-landing-page`). ### 4. Add a Component -For front-end contributions, use the `.jsx` format for creating React components/pages. New components should go in the `src/app/components` folder. Use PascalCase for naming files and folders. +For front-end contributions, use the `.jsx` format when creating React components/pages. Even though you might be working with basic HTML and JavaScript locally in your own development environment (like editing an `index.html` file), **all pull requests to this repository must use JSX**. + +- **Locally**: Feel free to experiment with frontend code using simple HTML, CSS, and JavaScript. +- **For Pull Requests**: Ensure your work is submitted in JSX format and follows the structure below. Use PascalCase for naming files and folders. **Example file name**: -LandingPage.jsx +`LandingPage.jsx` **Folder structure**: -src/app/components/LandingPage/LandingPage.jsx +`src/app/components/LandingPage/LandingPage.jsx` πŸ“š [Learn more about JSX here](https://reactjs.org/docs/introducing-jsx.html). @@ -57,56 +57,74 @@ We use Tailwind CSS for styling. You can add classes to your JSX components like ``` ### 6. Commit Your Changes -After making your changes, stage and commit them. +After making your changes, you need to stage and commit them. -- **Using Command Line**: - ```bash - git add . -``` -```bash - git commit -m "Add Landing Page component" -``` +- **Using Command Line**: + - Stage your changes: + ```bash + git add . + ``` + - Commit them with a descriptive message: + ```bash + git commit -m "Add Landing Page component" + ``` + +- **Using GitHub Desktop**: + - Click on the "Changes" tab in the left sidebar. + - Add a descriptive summary of your changes and click "Commit to [branch name]." -- **Using GitHub Desktop**: - - Click on "Changes" in the left sidebar. - - Add a summary of your changes and click "Commit to [branch name]." ### 7. Push Your Changes -Push your changes to your forked repository: +Now, push your changes to your forked repository. - **Using Command Line**: -```bash + - Push your changes: + ```bash git push origin feature-name -``` -- **Using GitHub Desktop**: - - Click on "Push origin" in the top right corner. + ``` + +- **Using GitHub Desktop**: + - Click on the "Push origin" button in the top-right corner of the app. + ### 8. Create a Pull Request (PR) -Submit a Pull Request from your branch. Provide a clear description of your changes! +Once your changes are pushed to your forked repo, it's time to create a Pull Request (PR) to merge your changes into the main project. -πŸ”— Not sure how? [Check this tutorial on how to create a pull request](https://docs.github.com/en/pull-requests). +1. Head over to GitHub, open the repository you forked, and you should see an option to "Compare & pull request" next to your branch. +2. Provide a clear description of the changes you made. -## πŸ”„ Naming Convention -- Use **PascalCase** for files and folders. -- Example: LandingPage.jsx +πŸ”— Need help? [Follow this guide to create a Pull Request](https://docs.github.com/en/pull-requests). + +--- + +### πŸ”„ Naming Convention +- Files and folders should follow **PascalCase**. +- Example: `LandingPage.jsx` - Keep components modular and reusable. -- Place components in the `src/app/components` folder. +- Place all components in the `src/app/components` folder. -## 🎨 Styling -- All styling should use **Tailwind CSS**. -- Follow the design system. Refer to existing components for consistency. +### 🎨 Styling +- Use **Tailwind CSS** for all styling purposes. +- Ensure that you follow the project's design system. Refer to existing components to maintain consistency. -## πŸ› οΈ Tech Stack +### πŸ› οΈ Tech Stack - **React** (.jsx format) - **Tailwind CSS** - **Next.js** - **Firebase** - **Auth.js** -## 🀝 Contributing Etiquette -- Be kind and respectful in your contributions. -- Ensure your code is clean and well-commented. -- Test your components before submitting. -- Collaborate with other members to avoid duplicate work. +### 🀝 Contributing Etiquette +- Be kind, respectful, and professional when contributing and interacting with others. +- Make sure your code is clean, readable, and well-commented. +- Test your components thoroughly before submitting them. +- Collaborate with other contributors to avoid overlapping work. + +--- + +### πŸ“’ Important Note: Code in JSX Format for Pull Requests +For this project, while it's perfectly fine to test your components in any environment or framework that you're comfortable with, **all pull requests must be in the `.jsx` format** as outlined in this guide. Make sure your code follows the structure and practices laid out here before submitting any pull requests. + +--- -That’s it! πŸŽ‰ Now you’re all set to contribute to the **Weave Game Project**! We can’t wait to see what you create. πŸš€ Happy coding! 😎 +That's it! πŸŽ‰ You’re all set to contribute to the **Weave Game Project**! We can’t wait to see what you build. πŸš€ Happy coding! 😎