{"id":24884188,"url":"https://github.com/kelixirr/reactdevs","last_synced_at":"2025-10-16T03:30:31.429Z","repository":{"id":269810442,"uuid":"908318912","full_name":"kelixirr/ReactDevs","owner":"kelixirr","description":"ReactDevs is a beginner friendly open source react project where they can contribute one or more component of their choice and learn react basic, git and github basics, and learn to collaborate on a project","archived":false,"fork":false,"pushed_at":"2025-01-31T14:54:48.000Z","size":100,"stargazers_count":8,"open_issues_count":2,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-31T15:38:26.596Z","etag":null,"topics":["javascript","react","react-beginner-project","react-beginner-projects","reactjs","vitejs"],"latest_commit_sha":null,"homepage":"https://reactdevs.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kelixirr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-25T18:09:37.000Z","updated_at":"2025-01-31T14:54:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"b29acf14-c25d-4350-bd1f-33dba4438cf3","html_url":"https://github.com/kelixirr/ReactDevs","commit_stats":null,"previous_names":["kelixirr/reactdevs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelixirr%2FReactDevs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelixirr%2FReactDevs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelixirr%2FReactDevs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kelixirr%2FReactDevs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kelixirr","download_url":"https://codeload.github.com/kelixirr/ReactDevs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236670809,"owners_count":19186515,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","react","react-beginner-project","react-beginner-projects","reactjs","vitejs"],"created_at":"2025-02-01T14:19:42.783Z","updated_at":"2025-10-16T03:30:31.145Z","avatar_url":"https://github.com/kelixirr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Contribute to the ReactDevs - A Playground for react learners\n\nWelcome to the **ReactDevs** project! This repository allows beginners to contribute one or more React components of their choice. This guide will walk you through every step of the process to ensure you can easily contribute to the project. Follow these steps carefully to add your own component, including a small credit section that links to your name and GitHub profile.\n\n### Why Be Part Of This Project?\n- **Git**: Learn version control and collaboration using Git.\n- **GitHub**: Gain experience with GitHub for managing and contributing to open-source projects. Earn Github badges.\n- **Collaboration**: Work together with developers of all skill levels to build something meaningful.\n- **Project Building**: Contribute to a real-world project, gaining hands-on experience.\n- **Learn to Contribute to Open Source**: Understand the process of contributing to open-source projects.\n- **Learn from Others**: Discover new techniques and approaches from fellow contributors.\n- **Practice React Skills**: Hone your React skills by building components and working with others.\n- **Networking**: Connect with other developers and expand your professional network.\n- **Build a Portfolio**: Showcase your contributions in your personal portfolio to attract future opportunities.\n\n---\n\n## **1. Prerequisites**\n\nBefore you begin contributing to the project, you'll need a few things installed on your local machine:\n\n- **Node.js**: This project uses Node.js for running JavaScript code. You can download and install it from [here](https://nodejs.org/).\n- **Git**: Git is necessary for version control and contributing to the project. Install it from [here](https://git-scm.com/).\n- **Text Editor (VS Code recommended)**: You'll need a code editor to edit the project's files. [Visual Studio Code](https://code.visualstudio.com/) is highly recommended.\n- **GitHub Account**: You need a GitHub account to fork and submit pull requests to the project. If you don’t have one, create one at [GitHub](https://github.com/).\n\n---\n\n### Rules - Don't Forget The Rules\n1. Star the repository so that more people can discover it and join. \n2. Create a folder name based on your github username for the component as explained below.Use unqiue component names. \n3. Code on your own. Make it unique. You can contribute multiple components.\n4. Don't touch or change anything that is already there without discussing. Raise an issue here on GitHub first.\n5. Use the colors and root variables defined in the index.css file to maintain the design consistency. Don't add any color on your own. \n6. Use rem for font-size, borders etc. You are free to adjust sizes except for border radius.\n7. Help others and engage with project community. Don't forget to invite more people to this project.\n8. Don't hesistate to ask if you are stuck somewhere.\n\n## **2. Fork the Repository**\n\n### **Step 1: Fork the Repository**\n- Go to the [ReactDevs repository](https://github.com/kelixirr/ReactDevs) on GitHub.\n- In the top-right corner of the page, click the **Fork** button. This creates a personal copy of the repository under your GitHub account.\n\n### **Step 2: Clone the Forked Repository**\nOnce you’ve forked the repository, you need to clone it to your local machine so you can start working on it.\n\n- On your forked repository page, click the **Code** button and copy the URL (either HTTPS or SSH).\n- Open your terminal or command prompt and run the following command to clone the repository:\n\n  ```bash\n  git clone \u003cyour-forked-repo-url\u003e\n  ```\n\n  This will create a copy of the repository on your machine.\n\n### **Step 3: Navigate to the Project Folder**\nOnce you have cloned the repository, navigate to the project directory:\n\n```bash\ncd \u003cyour-cloned-repo-name\u003e\n```\n\n---\n\n## **3. Set Up the Project Locally**\n\nNow that you have the repository on your local machine, it's time to set it up.\n\n### **Step 1: Install Dependencies**\n\nThis project uses `npm` (Node Package Manager) to manage dependencies. To install all the necessary packages and libraries, run:\n\n```bash\nnpm install\n```\n\nThis will read the `package.json` file and install all the dependencies specified.\n\n### **Step 2: Start the Development Server**\n\nTo see the project in action, you need to start the development server. Run the following command:\n\n```bash\nnpm run dev\n```\n\nThis will launch the project in your default web browser (usually at `http://localhost:5173/` since we are using Vite).\n\n---\n\n## **4. Creating Your Own Component**\n\n### **Step 1: Create a Folder for Your Component**\n\nInside the `src/components` folder, create a new folder using your name(use a unique name or your github username) as the folder name. This will help us identify your component and give you credit. For example, if your github username is `johndoe`, create a folder called `johndoe`.\n\n```bash\nsrc/components/johndoe/\n```\n\n### **Step 2: Create the Component File**\n\nInside your folder, create a new file for your component, named something descriptive. For example, if you want to contribute a `Button` component, create a file called `Button.jsx`.\n\n```bash\nsrc/components/johndoe/Button.jsx\n```\n\nIn this file, create your React component as you normally would. Here's an example `Button.jsx`:\n\n```javascript\n// Create a simple button component\nexport default function Button() {\n  return \u003cbutton className = {styles.btn} \u003eClick Me\u003c/button\u003e;\n}\n```\nDon't forget to use Button.module.css and styles.classname approach. This is important because we want to keep the design consistent.\n\n### **Step 3: Add Your Credit**\n\nAt the bottom of your component file, add the author component with your name and GitHub link. This is important so everyone knows who contributed the component. A component name Author is alreay created for you all you have to do is do this:\n\nExample:\n\n```javascript\n// Add this component with your name and github link. Place this component at the very end.\n\u003cAuthor name=\"Your Name\" githubLink=\"Your GitHub Link\" /\u003e\n```\n\nThis ensures you get credit for your work!\n\n### **Step 4: Style Your Component (Optional)**\n\nIf your component requires custom styling, you can create a separate CSS file or use inline styles.\n\nFor example, if you want to add styles for the button:\n\n1. Create a new CSS file inside your component folder:\n\n   ```bash\n   src/components/jane-doe/Button.module.css\n   ```\n\n2. Add the following CSS code in `Button.module.css`:\n\n   ```css\n   .btn {\n   padding: var(--spacing-sm) var(--spacing-md);\n   border: none;\n   border-radius: var(--border-radius-md);\n   cursor: pointer;\n   background-color: var(--primary-color);\n   }\n\n   ```\n\n3. Then, import the CSS file into your `Button.jsx` file:\n\n   ```javascript\n   import styles from './Button.module.css';\n   ```\n   \nDon't forget to use our global root varibales for consistent styling across the site. We have all the roots variables in Index.css file. \n\n## **5. Testing Your Component**\n\n### **Step 1: Test the Component Locally**\n\nBefore submitting your component, you should test it to make sure it works. Open the main `App.jsx` file (located in `src/App.jsx`) and import your component.\n\nFor example:\n\n```javascript\nimport React from 'react';\nimport Button from './components/johndoe/Button'; // Adjust path to your component\nimport Details from './components/kelixirr/Details';\nimport Hero from './Hero' \n\nfunction App() {\n  return (\n    \u003c\u003e\n      \u003cHero /\u003e\n      \u003cDetails /\u003e\n       {/* Place your component after this for example Button below, and so on. One after another */}\n      \u003cButon /\u003e \n    \u003c/\u003e\n  );\n}\n\nexport default App\n```\n\nRun `npm run dev` to ensure your component is correctly rendered on the page. If it is already running do check for consistent output. \n\n### **Step 2: Check for Errors**\n\nEnsure that there are no console errors in your browser’s developer tools. If there are any errors, fix them before proceeding.\n\n## **6. Commit Your Changes**\n\nOnce you're happy with your component, commit your changes to your local Git repository.\n\n### **Step 1: Stage Your Changes**\n\nIn your terminal, run the following command to stage all the changes you made:\n\n```bash\ngit add .\n```\n\n### **Step 2: Commit Your Changes**\n\nNow, commit your changes with a meaningful message:\n\n```bash\ngit commit -m \"Added Button component by Jane Doe\"\n```\n\n### **Step 3: Push Changes to Your Fork**\n\nPush your changes to your forked repository:\n\n```bash\ngit push origin main\n```\n\n## **7. Create a Pull Request**\n\nNow that your changes are pushed to your forked repository, you need to create a pull request to contribute your component to the main project.\n\n### **Step 1: Go to the Original Repository**\n\nVisit the original repository (not your forked version) on GitHub.\n\n### **Step 2: Create a Pull Request**\n\nClick the **New Pull Request** button.\n\n- In the **Compare** section, make sure you are comparing your branch (usually `main`) with the original `main` branch of the repository.\n- Write a title and description for your pull request explaining what component you added and how it works.\n\nExample:\n```\nTitle: Added Button component by John Doe\n\nDescription: This pull request adds a simple button component to the collection. It includes styling for the button etc.. The component is created by John Doe (GitHub: https://github.com/your username).\n```\n\n### **Step 3: Submit the Pull Request**\n\nClick the **Create Pull Request** button to submit your changes.\n\n## **8. Review and Merge**\n\nOnce you submit your pull request, project maintainers will review it. If everything looks good, they will merge it into the main project.\n\n\n## **9. Congratulations! 🎉**\n\nYou've successfully contributed to the project! Thank you for your time and effort.\n\n## **10. Helpful Links**\n\n- [GitHub Documentation](https://docs.github.com/en/github)\n- [React Documentation](https://reactjs.org/docs/getting-started.html)\n- [Node.js Documentation](https://nodejs.org/en/docs/)\n\n---\n\nFeel free to reach out if you have any questions or need assistance during the process!\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkelixirr%2Freactdevs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkelixirr%2Freactdevs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkelixirr%2Freactdevs/lists"}