├── .github └── ISSUE_TEMPLATE │ ├── bug-report.yml │ └── feature-req.yml ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── babel.config.js ├── docs ├── How-To-Guides │ ├── _category_.json │ ├── how-to-become-a-maintainer.md │ ├── how-to-create-play.md │ └── how-to-style-play.md ├── apis-hook.md ├── contribution-guide.md ├── database-schema.md ├── img │ └── banner.png ├── intro.md ├── local-development.md └── troubleshooting-guide.md ├── docusaurus.config.js ├── i18n ├── bn │ ├── code.json │ ├── docusaurus-plugin-content-docs │ │ ├── current.json │ │ └── current │ │ │ ├── How-To-Guides │ │ │ ├── _category_.json │ │ │ ├── how-to-become-a-maintainer.md │ │ │ ├── how-to-create-play.md │ │ │ └── how-to-style-play.md │ │ │ ├── apis-hook.md │ │ │ ├── contribution-guide.md │ │ │ ├── database-schema.md │ │ │ ├── img │ │ │ └── banner.png │ │ │ ├── intro.md │ │ │ ├── local-development.md │ │ │ └── troubleshooting-guide.md │ └── docusaurus-theme-classic │ │ ├── footer.json │ │ └── navbar.json └── en │ ├── code.json │ ├── docusaurus-plugin-content-docs │ └── current.json │ └── docusaurus-theme-classic │ ├── footer.json │ └── navbar.json ├── package.json ├── sidebars.js ├── src ├── components │ └── Features │ │ ├── index.jsx │ │ └── styles.module.css ├── css │ └── custom.css └── pages │ └── index.module.css └── static ├── .nojekyll └── img ├── banner.png ├── create.svg ├── docusaurus.png ├── favicon.ico ├── learn.svg ├── logo.png └── social.svg /.github/ISSUE_TEMPLATE/bug-report.yml: -------------------------------------------------------------------------------- 1 | name: "\U0001F41B [Bug report]:" 2 | description: Create a report to help us improve 3 | title: "\U0001F41B [Bug report]: " 4 | labels: ['bug'] 5 | assignees: [''] 6 | body: 7 | - type: markdown 8 | attributes: 9 | value: | 10 | Thanks for taking the time to fill out this bug report! 11 | 12 | - type: textarea 13 | id: what-happened 14 | attributes: 15 | label: Descrcibe the bug? 16 | description: Tell us what you see! 17 | validations: 18 | required: true 19 | - type: textarea 20 | id: reproduce-step 21 | attributes: 22 | label: Steps to reproduce the bug? 23 | description: Steps to reproduce the behavior.. 24 | placeholder: | 25 | 1. Go to '...' 26 | 2. Click on '....' 27 | 3. Scroll down to '....' 28 | 4. See error 29 | validations: 30 | required: true 31 | 32 | - type: textarea 33 | id: expected-behavior 34 | attributes: 35 | label: Expected behavior 36 | description: A clear and concise description of what you expected to happen. 37 | validations: 38 | required: true 39 | 40 | - type: textarea 41 | id: desktop-details 42 | attributes: 43 | label: Desktop (Please provide your system information) 44 | description: | 45 | examples: 46 | - **OS**: [e.g. iOS] 47 | - **Browser** [e.g. chrome, safari] 48 | - **Version** [e.g. 22] 49 | validations: 50 | required: true 51 | 52 | - type: textarea 53 | id: mobile-browser 54 | attributes: 55 | label: Mobile (Please provide your device information) 56 | description: | 57 | examples: 58 | - **Device**: [e.g. iPhone6] 59 | - **OS**: [e.g. iOS8.1] 60 | - **Browser** [e.g. stock browser, safari] 61 | - **Version** [e.g. 22] 62 | - type: textarea 63 | id: screenshot 64 | attributes: 65 | label: Screenshot / Screenshare 66 | description: If applicable, add screenshots to help explain your problem. 67 | 68 | - type: textarea 69 | id: additional-context 70 | attributes: 71 | label: Relevant log output 72 | description: Add any other context about the problem here. 73 | render: shell 74 | 75 | - type: checkboxes 76 | id: terms 77 | attributes: 78 | label: Code of Conduct 79 | description: By submitting this issue, you agree to follow our [Code of Conduct](https://github.com/reactplay/react-play/blob/main/CODE_OF_CONDUCT.md) 80 | options: 81 | - label: I agree to follow this project's Code of Conduct 82 | required: true 83 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature-req.yml: -------------------------------------------------------------------------------- 1 | name: "✨ [Feature request]:" 2 | description: Suggest an idea for this project 3 | title: "✨ [Feature request]: " 4 | labels: [] 5 | assignees: [""] 6 | body: 7 | - type: markdown 8 | attributes: 9 | value: | 10 | Thanks for taking the time for issuing a feature request! 11 | - type: textarea 12 | id: feature-reason 13 | attributes: 14 | label: Is your feature request related to a problem? Please describe. 15 | description: A clear and concise description of what the problem is. 16 | placeholder: I'm always frustrated when [...] 17 | validations: 18 | required: true 19 | 20 | - type: textarea 21 | id: solution 22 | attributes: 23 | label: Describe the solution you'd like. 24 | description: A clear and concise description of what you want to happen. 25 | validations: 26 | required: true 27 | 28 | - type: textarea 29 | id: alternatives 30 | attributes: 31 | label: Describe alternatives you've considered. 32 | description: A clear and concise description of any alternative solutions or features you've considered. 33 | validations: 34 | required: true 35 | 36 | - type: textarea 37 | id: screenshot 38 | attributes: 39 | label: Screenshot / Screenshare 40 | description: Please add screenshot or screenshare if that helps to describe the feature. 41 | 42 | - type: textarea 43 | id: additional-context 44 | attributes: 45 | label: Additional context 46 | description: Add other additional context about the feature. 47 | 48 | - type: checkboxes 49 | id: terms 50 | attributes: 51 | label: Code of Conduct 52 | description: By submitting this issue, you agree to follow our [Code of Conduct](https://github.com/reactplay/react-play/blob/main/CODE_OF_CONDUCT.md) 53 | options: 54 | - label: I agree to follow this project's Code of Conduct 55 | required: true 56 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | *.env 18 | package-lock.json 19 | 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | yarn.lock 24 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | ioreactplay@gmail.com. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | When contributing to this repository, please first discuss the change you wish to make via [issue](https://github.com/reactplay/docs/issues), 4 | [email](mailto:ioreactplay@gmail.com), or any other method with the owners of this repository before making a change. 5 | 6 | Please note we have a [Code of Conduct](https://github.com/reactplay/docs/blob/main/CODE_OF_CONDUCT.md), please follow it in all your interactions with the project. 7 | 8 | ## Pull Request Process 9 | 10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a 11 | build. 12 | 2. Update the README.md with details of changes to the interface, this includes new environment 13 | variables, exposed ports, useful file locations and container parameters. 14 | 3. Increase the version numbers in any examples files and the README.md to the new version that this 15 | Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/). 16 | 4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you 17 | do not have permission to do that, you may request the second reviewer to merge it for you. 18 | 19 | ## Code of Conduct 20 | 21 | ### Our Pledge 22 | 23 | In the interest of fostering an open and welcoming environment, we as 24 | contributors and maintainers pledge to making participation in our project and 25 | our community a harassment-free experience for everyone, regardless of age, body 26 | size, disability, ethnicity, gender identity and expression, level of experience, 27 | nationality, personal appearance, race, religion, or sexual identity and 28 | orientation. 29 | 30 | ### Our Standards 31 | 32 | Examples of behavior that contributes to creating a positive environment 33 | include: 34 | 35 | - Using welcoming and inclusive language 36 | - Being respectful of differing viewpoints and experiences 37 | - Gracefully accepting constructive criticism 38 | - Focusing on what is best for the community 39 | - Showing empathy towards other community members 40 | 41 | Examples of unacceptable behavior by participants include: 42 | 43 | - The use of sexualized language or imagery and unwelcome sexual attention or 44 | advances 45 | - Trolling, insulting/derogatory comments, and personal or political attacks 46 | - Public or private harassment 47 | - Publishing others' private information, such as a physical or electronic 48 | address, without explicit permission 49 | - Other conduct which could reasonably be considered inappropriate in a 50 | professional setting 51 | 52 | ### Our Responsibilities 53 | 54 | Project maintainers are responsible for clarifying the standards of acceptable 55 | behavior and are expected to take appropriate and fair corrective action in 56 | response to any instances of unacceptable behavior. 57 | 58 | Project maintainers have the right and responsibility to remove, edit, or 59 | reject comments, commits, code, wiki edits, issues, and other contributions 60 | that are not aligned to this Code of Conduct, or to ban temporarily or 61 | permanently any contributor for other behaviors that they deem inappropriate, 62 | threatening, offensive, or harmful. 63 | 64 | ### Scope 65 | 66 | This Code of Conduct applies both within project spaces and in public spaces 67 | when an individual is representing the project or its community. Examples of 68 | representing a project or community include using an official project e-mail 69 | address, posting via an official social media account, or acting as an appointed 70 | representative at an online or offline event. Representation of a project may be 71 | further defined and clarified by project maintainers. 72 | 73 | ### Enforcement 74 | 75 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 76 | reported by contacting the project team at [ioreactplay@gmail.com](mailto:ioreactplay@gmail.com). All 77 | complaints will be reviewed and investigated and will result in a response that 78 | is deemed necessary and appropriate to the circumstances. The project team is 79 | obligated to maintain confidentiality with regard to the reporter of an incident. 80 | Further details of specific enforcement policies may be posted separately. 81 | 82 | Project maintainers who do not follow or enforce the Code of Conduct in good 83 | faith may face temporary or permanent repercussions as determined by other 84 | members of the project's leadership. 85 | 86 | ### Attribution 87 | 88 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 89 | available at [http://contributor-covenant.org/version/1/4][version] 90 | 91 | [homepage]: http://contributor-covenant.org 92 | [version]: http://contributor-covenant.org/version/1/4/ 93 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 ReactPlayIO 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ReactPlay Docs 2 | Official documentation for ReactPlay. 3 | 4 | Check ReactPlay [Official Repository](https://github.com/reactplay/react-play) for more information. 5 | 6 | ## What is ReactPlay 7 | ![ReactPlay](https://raw.githubusercontent.com/reactplay/react-play/main/src/images/og-image.png) 8 | `react-play` is an open-source web app that helps you learn ReactJS faster with a hands-on practice model. It is a collection of ReactJS projects you can use to learn ReactJS. 9 | 10 | Is that all? Nope. You can also create your projects and share them with the world. The best part is that the ReactJS experts will review your project code before it gets part of the ReactPlay app. Isn't that a pure WIN-WIN? 11 | 12 | This repository serves a documentation for ReactPlay. It includes information on how to perform various activities on the platform. 13 | 14 | ## 🤩 How to contribute to this repo? 15 | 16 | You can contribute to this repo in several ways: 17 | 1. Write documentation for the various parts of ReactPlay 18 | 2. Suggest changes to the existing docs 19 | 3. Improve the documentation website 20 | 21 | To contribute, you must set up this repository on your local machine. Here is a brief guide on setting up the repo on your local machine: 22 | 23 | > Please read [CONTRIBUTING](https://github.com/reactplay/docs/blob/main/CONTRIBUTING.md) for details on our [CODE OF CONDUCT](https://github.com/reactplay/docs/blob/main/CODE_OF_CONDUCT.md), and the process for submitting pull requests to us. 24 | 25 | **💡 New to Open Source? Follow [this guide](https://opensource.guide/how-to-contribute/) to jumpstart your Open Source journey 🚀** 26 | 27 | ### 🍴 Fork and Clone the Repo 28 | First, you need to fork this repo. You can do this by clicking the `Fork` button on the top right corner of the repo. If you are new to forking, please watch this [YouTube Guide](https://www.youtube.com/watch?v=h8suY-Osn8Q) to get started. 29 | 30 | Once forked, click the bright green `<> Code` button and copy the URL. 31 | 32 | Now on your local machine, open the destination directory in the terminal and execute the following command: 33 | 34 | ```bash 35 | git clone 36 | ``` 37 | 38 | Here the `URL_LINK` is the same link you coped in the previous step. 39 | 40 | 41 | Please change the directory after cloning the repository using the ```cd ``` command. 42 | 43 | ### ⬆ Set Upstream 44 | We recommend setting an upstream repo to make pulling and fetching easier. Execute the following command in the terminal: 45 | 46 | ```bash 47 | git remote add upstream https://github.com/reactplay/docs 48 | ``` 49 | 50 | Check if the upstream has been added by executing the following command: 51 | 52 | ```bash 53 | git remote -v 54 | ``` 55 | 56 | ### 🌴 Create a branch 57 | Ideally, you must create a separate branch for each issue you are working on. Here is how to create a new branch locally. 58 | 59 | ```bash 60 | git checkout -b 61 | ``` 62 | 63 | Keep the branch name clear and straightforward. The `-b` command switches the current branch to the newly created branch. 64 | 65 | You are ready to start working on the issue! 66 | 67 | ### 👨‍💻 Make changes 68 | You need to install dependencies before you start working on the website. Make sure you are in the same directory as your repo's `package.json` and execute either of the following commands: 69 | 70 | ```bash 71 | yarn install 72 | ``` 73 | 74 | We recommend using Yarn. But feel free to use NPM as well: 75 | ``` 76 | npm install 77 | ``` 78 | 79 | To start a local development server, enter the following command: 80 | 81 | ```bash 82 | yarn start 83 | ```` 84 | 85 | Or, for NPM: 86 | ```bash 87 | npm run start 88 | ``` 89 | 90 | The local development server will start on localhost:3000 91 | 92 | ### 🔒 Commit and Push 93 | You can save your changes by committing them. Committing once you have made significant changes to the repo is recommended. Execute the following commands: 94 | 95 | ```bash 96 | git add . 97 | git commit -m "" 98 | git push -u origin 99 | ``` 100 | The `message` should be a descriptive text defining your changes since the last commit. 101 | The `branch-name` is the branch name you created before working on this issue. 102 | 103 | You can create multiple commits before pushing the code. 104 | 105 | 106 | ### 🙌 Pull Request 107 | When you have resolved the issue, its time to make a pull request. 108 | Open the forked repo from GitHub web and go to `Pull Requests` tab. Then click the bright green `New Pull Request` button. 109 | 110 | Select the _base_ and _compare_ branches carefully. Base is the branch you are merging your changes with whereas Compare is the branch you made your changes to. 111 | ![image](https://user-images.githubusercontent.com/53049546/222949792-0d9c1739-3692-4753-8880-2bb1837a43ac.png) 112 | 113 | Click `Create Pull Request` and wait until we review and merge it. 114 | 115 | Until it gets merged, browse [ReactPlay](https://reactplay.io/) and [contribute](https://github.com/reactplay/react-play) to it. 116 | 117 | 118 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')], 3 | }; 4 | -------------------------------------------------------------------------------- /docs/How-To-Guides/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "How To Guides", 3 | "position": 6, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "These guides will teach you how to do things in ReactPlay." 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /docs/How-To-Guides/how-to-become-a-maintainer.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # How to Become a ReactPlay Open Source Project Maintainer 6 | 7 | [ReactPlay](https://reactplay.io/) is an open-source community that welcomes volunteers to become maintainers. If you are interested in becoming a maintainer, here are the criteria and requirements you need to meet. 8 | 9 | ## About the Role 10 | 11 | - It is a volunteer effort. 🙋‍♂️ 12 | - You must have a love for open source and people. 💛 13 | - You may have to give 4-5 hours a week. ⏳ 14 | 15 | ## Criteria 16 | 17 | - Be a Contributor first. Make sure you have contributed to at least 2 issues to understand the ReactPlay ecosystem, processes, and accepting criteria for any contributions. 18 | - Make a short write-up explaining why do you want to take up this role? This write-up should be no more than 150 words. 19 | - [Schedule a meeting](https://zcal.co/tapasadhikary/15min) with our existing project maintainer for 15 mins to discuss your points. 20 | 21 | Don't forget to read out everything that is listed here: https://opensource.guide/best-practices/ 22 | 23 | ## Please Note 24 | 25 | 1. You do not need prior experience in maintaining an Open Source project to be a maintainer of ReactPlay. 26 | 1. We welcome everyone who is interested in becoming a maintainer, and if we are not able to get you started immediately, it doesn't mean we are rejecting you. 27 | 1. If there is a gap that you need to bridge and come back, we will communicate that to you. 28 | 1. We are looking for maintainers who are committed to the project for the long term. 29 | 30 | ## Existing roles 31 | 32 | - Community Manager 33 | - Social & Events 34 | - Maintainers 35 | - Content 36 | - Dev Enablement 37 | -------------------------------------------------------------------------------- /docs/How-To-Guides/how-to-create-play.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # How to Create a Play 6 | 7 | Welcome developers! We are as excited as you are to know that you are going to create a new play. It is super easy to get started. 8 | 9 | > **Note:** The steps below assumes that you have forked and cloned the [react-play](https://github.com/reactplay/react-play) repository. Also, you have installed the dependencies using the `npm install` or `yarn install` command. If you are new to forking, please watch this [YouTube Guide](https://www.youtube.com/watch?v=h8suY-Osn8Q) to get started. 10 | 11 | - Run the application using 12 | 13 | ```bash 14 | yarn start 15 | 16 | or 17 | 18 | npm run start 19 | ``` 20 | 21 | If you face dependency issues, then try running this command: 22 | 23 | ```bash 24 | npm install --legacy-peer-deps 25 | ``` 26 | 27 | You might check the [README](https://github.com/reactplay/react-play#readme) file for more details. 28 | 29 | - You should be able to access the application on http://localhost:3000 30 | - Click on `Create` button. 31 | 32 |

33 | create-play 34 |

35 | 36 | - The application will try to authenticate you 37 | - If you are NOT already logged in with [`NHost`](https://nhost.io), you will be prompted to give permission 38 | - Log in with your GitHub account 39 | - Fill the information and submit. 40 | 41 |

42 | create-play-fill-form 43 |

44 | 45 | Parameter details 46 | 47 | | Field | Mandatory? | Description | 48 | | --------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 49 | | Name | YES | Every play should have a name that is relatable to the play's idea. | 50 | | Description | YES | It is a description of the play for users to understand it better. The maximum number of allowed characters is 1024. | 51 | | Issue | YES | Every play should be mapped with an issue. Select it here. | 52 | | Language | YES | Let the application know your choice of script. It supports both JavaScript and TypeScript. You can pick either of it. | 53 | | Style | NO | Let the application know your choice of style. It supports both css and scss. You can pick either of it. | 54 | | Level | YES | You will be asked to select one of the three levels, Beginner, Intermediate, or Advanced. Please select a level for the play. A level indicates the possible complexity of developing the play using React. | 55 | | Github Username | YES | Provide your GitHub user name to mark you as the creator of the play. | 56 | | Tags | NO | Please provide comma-separated list of tags. Example: JSX, Hooks | 57 | | Cover Image URL | NO | A cover image is used to show your play with a thumbnail in the play list page. Please provide a link to a cover image that is publicly accessible using a URL, example: https://res.cloudinary.com/reactplay/image/upload/v1649060528/demos/id-card_pdvyvz.png. Alternatively, you can have a cover.png file in the root of your play folder. If you don't have a cover image, the app will use the default cover image. | 58 | | Blog URL | NO | If you have written an article about this play, please provide the link to your blog article page. | 59 | | Video | NO | If you have created a video tutorial about this play, please provide the link to your YouTube video. | 60 | 61 | - On successfull submission, you will be redirected to a page where it will prompt you with the `play_id` 62 | 63 |

64 | command 65 |

66 | 67 | - Stop your application 68 | - Navigate to the root of the reactplay 69 | - Run following command 70 | 71 | ```bash 72 | npx create-react-play -c 73 | ``` 74 | 75 | **Note:** If the play folder `/src/plays/` remain empty after running above command that means you might be in some older version of the package. Use `@latest` in that case. 76 | 77 | ```bash 78 | npx create-react-play@latest -c 79 | ``` 80 | 81 |

82 | copy-command 83 |

84 | 85 | - Start the application 86 | 87 | ```bash 88 | yarn start 89 | 90 | or 91 | 92 | npm run start 93 | ``` 94 | 95 | - You should now see your play added to the [play list](http://localhost:3000/plays) page. 96 |

97 | play 98 |

99 | 100 | - You can click on the play thumbnail to see the details of the play. 101 |

102 | play-details 103 |

104 | 105 | - And you will notice a directory created for your play under `./src/plays/` 106 |

107 | code 108 |

109 | 110 | - Continue developing your play. Happy coding. 111 | 112 | ## 👀 Submitting a Play for Review 113 | 114 | After you done with coding for your `Play`, you can submit it for review. Submitting a `Play` for review is a two step process. 115 | 116 | - Create a Pull Request on the [react-play](https://github.com/reactplay/react-play) repository with your changes. 117 | - Dedicate some time in a week to take care of the review comments. 118 | 119 | Once the Pull Request is approved and merged, we will notify you and add you as a `Contributor` to the [react-play](https://github.com/reactplay/react-play) project. 120 | 121 | ## ✋ Need Help? 122 | 123 | You can reach out to us at [ReactPlay Twitter Handle | @ReactPlayIO](https://twitter.com/ReactPlayIO) with a DM. Additionally, feel free to join our [Discord community](https://discord.gg/vrTxWUP8Am) for discussions. 124 | -------------------------------------------------------------------------------- /docs/How-To-Guides/how-to-style-play.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # How to Add Styling to Your Play 6 | 7 | Styling is an essential part of any play, and it's crucial to follow best practices to ensure that your code is maintainable and scalable. Here are some **Dos and Don'ts** to keep in mind when adding styling to your play: 8 | 9 | ## Do's 10 | 11 | - Use class names that start with the play name and are in the kebab case. This naming convention helps to keep your code organized and easy to read. 12 | For example, if your play name is `"my-play"`, your class name should be `my-play__my-class`. 13 | 14 | - Use CSS libraries that provide additional features such as [scoped styles](https://developer.mozilla.org/en-US/docs/Web/CSS/:scope) and automatic [vendor prefixing](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix). 15 | 16 | - `Tailwind CSS` support has been enabled in ReactPlay. You can use this CSS library in your play. 17 | 18 | - Use CSS modules to style your components. CSS modules allow you to write modular and reusable CSS code that is scoped to a specific component. 19 | For example, you can create a CSS module for your component like this: 20 | 21 | ```css 22 | .my-play__my-class { 23 | color: red; 24 | } 25 | ``` 26 | 27 | And then import it into your component like this: 28 | 29 | ```jsx 30 | import styles from "./MyComponent.module.css"; 31 | 32 | function MyComponent() { 33 | return
Hello World
; 34 | } 35 | ``` 36 | 37 | - Use `styled-components` to create reusable and composable components. `styled-components` allow you to write CSS code that is scoped to a specific component and can be reused across your project. 38 | 39 | ## Don'ts 40 | 41 | - Do not use inline styles unless necessary. Inline styles can make your code harder to read and maintain, and they can also negatively impact performance. Instead, use CSS classes to style your components. This approach helps to keep your code organized and makes it easier to maintain. 42 | For example, instead of using inline styles like this: 43 | 44 | ```jsx 45 | function MyComponent() { 46 | return
Hello World
; 47 | } 48 | ``` 49 | 50 | You can create a CSS class and apply it to your component like this: 51 | 52 | ```css 53 | .my-play__my-class { 54 | color: red; 55 | } 56 | ``` 57 | 58 | ```jsx 59 | function MyComponent() { 60 | return
Hello World
; 61 | } 62 | ``` 63 | 64 | - Do not use global styles. Global styles can cause naming conflicts and make it harder to maintain your code. Instead, use CSS modules or `styled-components` to create modular and reusable CSS code. 65 | For example, you can create a CSS module for your component like this: 66 | 67 | ```css 68 | .my-play__my-class { 69 | color: red; 70 | } 71 | ``` 72 | 73 | And then import it into your component like this: 74 | 75 | ```jsx 76 | import styles from "./MyComponent.module.css"; 77 | 78 | function MyComponent() { 79 | return
Hello World
; 80 | } 81 | ``` 82 | 83 | - Do not override the styles using `!important` CSS property. They override all the other declarations and make the CSS code difficult to maintain and debug. Instead, you can use other options to override styles such as using the source order rule, the inherited property rule, or the specificity rule. 84 | 85 | By following these dos and don'ts, you can ensure that your play is well-styled, maintainable, and scalable. Remember to choose the approach that works best for your project and to keep your code organized and easy to read. 86 | 87 | ## ✋ Need Help? 88 | 89 | You can reach out to us at [ReactPlay Twitter Handle | @ReactPlayIO](https://twitter.com/ReactPlayIO) with a DM. Additionally, feel free to join our [Discord community](https://discord.gg/vrTxWUP8Am) for discussions. 90 | -------------------------------------------------------------------------------- /docs/apis-hook.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # APIs hook 6 | 7 | In ReactPlay, we work with APIs by using our custom-made react hooks. They are as follows: 8 | 9 | 1. [useCacheResponse](#usecacheresponse) 10 | 1. [useContributors](#usecontributors) 11 | 1. [useFeaturedPlays](#usefeaturedplays) 12 | 1. [useFetch](#usefetch) 13 | 1. [useGetPlays](#usegetplays) 14 | 1. [useGitHub](#usegithub) 15 | 1. [useLikePlays](#uselikeplays) 16 | 1. [useLocalStorage](#uselocalstorage) 17 | 18 | In this section, we will discuss each of them in detail. 19 | 20 | ## useCacheResponse 21 | 22 | As the name suggests, this hook can be used to create a temporary cache for any kind of data in our codebase (not on the browser). 23 | 24 | **Input Parameters:** 25 | 26 | - None 27 | 28 | **Returned Value** - Array 29 | 30 | - Getter function to fetch the `cached value` based on the `key` 31 | - Setter function to create/update the `value` against the `key` 32 | 33 | **Example** 34 | 35 | ```jsx 36 | const [getCacheResponse, setCacheResponse] = useCacheResponse(); 37 | const response = axios(API_URL); 38 | setCacheResponse(FILTER_DATA_RESPONSE, response); 39 | // .... 40 | const isCachedResponse = getCacheResponse(FILTER_DATA_RESPONSE); 41 | ``` 42 | 43 | In the above example, we are setting the `FILTER_DATA_RESPONSE` value based on the API response. This value is now stored as a cached response. We can then use `getCacheResponse` to access this cached value by passing the same key of `FILTER_DATA_RESPONSE` 44 | 45 | ## useContributors 46 | 47 | This custom hook helps in retrieving the information about [ReactPlay's](https://github.com/reactplay/react-play) contributors. 48 | 49 | **Input Parameters:** 50 | 51 | - `sorted`: a boolean value 52 | If `true` is passed, the result would be a sorted list of contributors based on the number of contributions (highest to lowest). 53 | 54 | **Returned Value** - Object 55 | 56 | - An `isLoading` state represents a loader while the data is fetched. 57 | - The `error` object contains details about any error that occurred while trying to fetch the data. 58 | - The `data` object contains the list of contributors' information 59 | 60 | **Example** 61 | 62 | ```jsx 63 | const { data, error, isLoading } = useContributors(true); 64 | 65 | return ( 66 |
    67 | {isLoading &&
  • Loading...
    • } 68 | {error &&
  • Error: {error.message}
    • } 69 | {data && 70 | data.map((contributor) => ( 71 |
  • 76 | {contributor.login} 77 |
    • 78 | ))} 79 |
80 | ); 81 | ``` 82 | 83 | ## useFeaturedPlays 84 | 85 | Invoking `useFeaturedPlays` hook would internally run a GraphQL query to retrieve the list of featured plays. 86 | 87 | **Input Parameters:** 88 | 89 | - None 90 | 91 | **Returned Value** - Array 92 | 93 | - A `loading` state that represents a loader while the data is fetched. 94 | - The `error` object contains details about any error that occurred while trying to fetch the data. 95 | - The `data` object contains the list of featured plays as an array. 96 | 97 | **Example** 98 | 99 | ```jsx 100 | const [loading, error, data] = useFeaturedPlays(); 101 | const success = !loading && !error && data.length; 102 | 103 | return ( 104 |
    105 | {loading &&

    Loading...

    } 106 | {error &&

    {error?.message ?? "Something went wrong"}

    } 107 | {success && 108 | data?.map((play, index) => )} 109 |
110 | ); 111 | ``` 112 | 113 | ## useFetch 114 | 115 | `useFetch` is a custom hook that creates a wrapper around the [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) call. Although we use GraphQL to fetch data on react play, this hook would be useful while making REST API calls that are required while creating custom plays. 116 | 117 | **Input Parameters:** 118 | 119 | - `url`: Endpoint URL of the API 120 | - `options`: An object to provide API options 121 | 122 | **Returned Value** - Object 123 | 124 | - A `loading` state that represents a loader while the data is fetched. 125 | - The `error` object contains details about any error that occurred while trying to fetch the data. 126 | - The `data` object contains the response from the API 127 | 128 | **Example** 129 | 130 | ```jsx 131 | const { data, loading, error } = useFetch(API_BASE_URL); 132 | 133 | return ( 134 |
135 | {loading &&

Loading...

} 136 | {error &&

{error?.message ?? "Something went wrong"}

} 137 | {data &&

{data.content}

} 138 |
139 | ); 140 | ``` 141 | 142 | ## useGetPlays 143 | 144 | Invoking `useGetPlays` hook would internally run a GraphQL query to retrieve the list of all the plays. This custom hook considers any filters that are applied through `Filter Play` options as well as any value provided in the search bar. 145 | 146 | **Input Parameters:** 147 | 148 | - None 149 | 150 | **Returned Value** - Array 151 | 152 | - A `loading` state that represents a loader while the data is fetched. 153 | - The `error` object contains details about any error that occurred while trying to fetch the data. 154 | - The `plays` object contains the list of plays as an array. 155 | 156 | **Example** 157 | 158 | ```jsx 159 | const [loading, error, plays] = useGetPlays(); 160 | 161 | if (loading) { 162 | return ; 163 | } 164 | 165 | if (plays?.length === 0 || error) { 166 | return ( 167 |
168 | 169 |

Play not found

170 |

171 | Please change your search or adjust filters to find plays. 172 |

173 |
174 | ); 175 | } 176 | ``` 177 | 178 | ## useGitHub 179 | 180 | `useGitHub` fetches the GitHub API to obtain information about a given user. 181 | 182 | **Input Parameters:** 183 | 184 | - `username`: GitHub username 185 | 186 | **Returned Value** - object 187 | 188 | - An `isLoading` state represents a loader while the data is fetched. 189 | - The `error` object contains details about any error that occurred while trying to fetch the data. 190 | - The `data` object contains the user's GitHub information. 191 | 192 | **Example** 193 | 194 | ```jsx 195 | const { data, error, isLoading } = useGitHub(`username`); 196 | 197 | return ( 198 |
199 | {isLoading &&

Loading...

} 200 | {error &&

{error?.message ?? "Something went wrong"}

} 201 | {data &&

{data.login}

} 202 |
203 | ); 204 | ``` 205 | 206 | ## useLikePlays 207 | 208 | This custom hook creates an abstraction around the `likePlay` and `unlikePlay` functions. 209 | 210 | **Input Parameters:** 211 | 212 | - None 213 | 214 | **Returned Value** - Object 215 | 216 | - `likePlay` function which takes a `playObject` that has been `liked` 217 | - `unlikePlay` function which takes a `playObject` that has been `unliked` 218 | 219 | **Example** 220 | 221 | ```jsx 222 | const { likePlay, unLikePlay } = useLikePlays(); 223 | // ... code processing 224 | await likePlay({ play_id: play.id, user_id: userId }); 225 | // ... some more processing 226 | await unLikePlay({ ...mutationObj, liked: !likeObj.liked }); 227 | ``` 228 | 229 | ## useLocalStorage 230 | 231 | This hook acts as an abstraction function for getting and setting [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) values. 232 | 233 | **Input Parameters:** 234 | 235 | - `key` 236 | - `initialValue` 237 | 238 | **Returned Value** - Array 239 | 240 | - `storedValue` against the provided `key` 241 | - `setValue` is a function to update the `storedValue` data on localStorage 242 | 243 | **Example** 244 | 245 | ```jsx 246 | const [localStoreExpenses, setLocalStoreExpenses] = useLocalStorage( 247 | "et-expenses", 248 | [] 249 | ); 250 | // accessing the stored value 251 | const expense = localStoreExpenses[localStoreExpenses.length - 1]; 252 | // storing new values against the same key `et-expenses` 253 | setLocalStoreExpenses([...localStoreExpenses, data]); 254 | ``` 255 | -------------------------------------------------------------------------------- /docs/contribution-guide.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Contribution Guide 6 | 7 | [ReactPlay Docs](https://docs.reactplay.io/) is our official documentation for ReactPlay. As the name suggests, it includes documentation of various aspects and features of ReactPlay. 8 | 9 | If you've come so far, _you_ already consider yourself a part of _ReactPlay_. And guess what, we have accepted you too. We are family!! 🎉. Henceforth we grow together. 10 | 11 | :::tip 12 | New to open-source? Follow [this guide](https://opensource.guide/how-to-contribute/) to jumpstart your Open Source journey 🚀 13 | ::: 14 | 15 | ## Getting Started 16 | 17 | As a first step we recommend reading our contribution and code-of-conduct guides. The majority of our work resides in [react-play](https://github.com/reactplay/react-play) and [docs](https://github.com/reactplay/docs) repository. Kindly read the [CONTRIBUTING.md](https://github.com/reactplay/docs/blob/main/CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](https://github.com/reactplay/docs/blob/main/CODE_OF_CONDUCT.md) files from the respective repositories to get acquainted with our requirements. 18 | 19 | ## Nature of Contribution 20 | 21 | We at ReactPlay are eagerly looking for contributions from both `code` and `no-code` domains. So, irrespective of your level of technical knowledge, you will have plenty of areas where you can contribute. 22 | 23 | We also love `typo` issues. If you find a typo somewhere, get in touch us and create a PR with the correction. 24 | 25 | ## Areas of Contribution 26 | 27 | - If you are a student and want to grow your experience as a developer and also score `OSS contribution` points you can [Create Plays](https://docs.reactplay.io/How-To-Guides/how-to-create-play). 28 | - If you are a regular user and think some feature might be beneficial you can [request a feature](https://github.com/reactplay/react-play/issues/new?assignees=&labels=&template=feature-request.yml&title=%E2%9C%A8+%5BFeature+request%5D%3A+). 29 | - Found a bug. Great! Go ahead and open a [bug report](https://github.com/reactplay/react-play/issues/new?assignees=&labels=bug&template=bug-report.yml&title=%F0%9F%90%9B+%5BBug+report%5D%3A+) 30 | - You could also improve the [docs](https://github.com/reactplay/docs) which would help us immensely. 31 | - You could give us feedback, suggestions and help us improve our UX. 32 | - Have an interest in interacting with the public? You are welcome to manage our social media handles like [Twitter](https://twitter.com/ReactPlayIO), [LinkedIn](https://www.linkedin.com/company/reactplay/), and [Facebook](https://web.facebook.com/groups/reactplay). 33 | - Have a flair for writing, you could publish articles on our [blog](https://blog.reactplay.io/). 34 | - You could also be our advocate and help us in arranging events, sponsors and support. 35 | 36 | You as a contributor could just about do anything mentioned above or any combination of the things above. We love our contributors and do our best to accommodate what you bring to the table. 37 | 38 | :::tip 39 | If you are a beginner look for the good first issue label in the issues page. 40 | ::: 41 | 42 | ## Recognition 43 | 44 | ReactPlay organizes [various events](https://hustles.reactplay.io/) where you could participate and win awards and recognition for your contribution in the ReactPlay organization. 45 | -------------------------------------------------------------------------------- /docs/database-schema.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Database Schema 6 | 7 | This page will discuss - About the ReactPlay database schema 8 | -------------------------------------------------------------------------------- /docs/img/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reactplay/docs/d4608aea13175877b78248f65578095f53eac9e6/docs/img/banner.png -------------------------------------------------------------------------------- /docs/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: / 3 | sidebar_position: 1 4 | --- 5 | 6 | # What is ReactPlay? 7 | 8 | ![banner](./img/banner.png) 9 | 10 | **ReactPlay** is an OpenSource platform to **create, learn and share** ReactJS projects with the developer community. Here we emphasize learning by creation. Hence create before *learn*ing. 11 | 12 | **Create** → You as a learner have the complete freedom to create any project. Have an idea and want to convert that to reality, go ahead. Want to recreate something you saw on the internet, you are welcome to do so. Or you can simply browse the [plays](https://reactplay.io/plays) submitted by our fabulous developer community and take inspiration. 13 | 14 | **Learn** → To create a project you need to learn a host of technologies. That’s obvious. But, does the learning stop there in **ReactPlay**? Not really. Here, once you submit your project, the code goes through a serious [code review](https://en.wikipedia.org/wiki/Code_review) by experienced developers. In the review process, there is a constant back and forth with the experienced devs where you learn [industry best practices](https://github.com/reactplay/react-play/wiki/ReactPlay-Code-Review-Checklist), performance, etc… _In short, you learn to “Think in React”_. 15 | 16 | **Share** → Once the code review is successful, your play is accepted and you are now a part of the **ReactPlay** community. Yay!! 🥳 This also counts as an open-source contribution and your work will now be available on the ReactPlay platform for others to explore. You continue to learn if and when someone starts learning from your project and asks you questions about how you achieved certain things. Or requests a new feature and in many other ways. 17 | 18 | ## The _Play_ in ReactPlay 19 | 20 | We’ve heard the word play come up a lot of times. What is this play? If you’ve guessed it, congratulations! Play is the project that you submit in ReactPlay. 21 | 22 | ## 🔥 Getting started 23 | 24 | Already have an idea about a project you would like to create. Don’t wait. Get started right away. Go to [ReactPlay.io](https://reactplay.io/) > `+Create`. Follow the instructions given on the page that opens up. 25 | -------------------------------------------------------------------------------- /docs/local-development.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # Local Development 6 | 7 | You may want to set up the `react-play` repo for the following reasons: 8 | 9 | - Please check the [Contribution Guide](https://github.com/reactplay/react-play/blob/main/CONTRIBUTING.md) to get started with contributing to the `react-play` repo in general. 10 | 11 | - You want to create a new play (A play is a React project) or want to edit an existing play as a contributor. Please check the [Create a Play Guide](./How-To-Guides/how-to-create-play.md) for more details. 12 | 13 | Here is a quick overview of the `react-play` repo setup: 14 | 15 | ## Fork and Clone the Repo 16 | 17 | First, you need to fork the `react-play` repo. You can do this by clicking the `Fork` button on the top right corner of the repo. If you are new to forking, please watch this [YouTube Guide](https://www.youtube.com/watch?v=h8suY-Osn8Q) to get started. 18 | 19 | 20 | 21 | Once forked, you can clone the repo by clicking the `Clone or Download` button on the top right corner of the forked repo. 22 | 23 | Please change the directory after cloning the repository using the `cd ` command. 24 | 25 | ## Install Dependencies 26 | 27 | Next, install the dependencies by running the following command in the `react-play` repo: 28 | 29 | ```bash 30 | npm install 31 | 32 | or 33 | 34 | yarn install 35 | ``` 36 | 37 |
38 | If you don't have yarn installed on your PC, follow the steps below to install it. 39 | 40 | **Windows** 41 | 42 | 1. open your command prompt as administrator. 43 | 2. write `corepack enable` and hit enter. 44 | 3. then `npm install --global yarn` 45 | 46 | **Linux** 47 | 48 | 1. open the terminal and hit `npm install --global yarn` 49 | 50 | **MacOS** 51 | 52 | 1. open the terminal and hit `npm install --global yarn` 53 | or 54 | `brew install yarn` 55 | 56 | **Or Download Package** 57 | 58 | If you are unable to install yarn following the above-mentioned process, then you can simply download the package and install it. Visit the official website of Yarn; there you can just expand the "Alternative" section and it will ask for the version to download for Windows, Linux, or Mac. 59 | `https://classic.yarnpkg.com/en/docs/install#windows-stable` 60 | 61 |
62 | 63 | > **Note**: `ReactPlay` runs on React 18. However, some of our dependencies are yet to upgrade to version 18. So please use the following command when you face difficulties installing the dependencies. 64 | 65 | ```bash 66 | npm install --legacy-peer-deps 67 | ``` 68 | 69 | ## Create a `.env` file at the root of your project folder with the following content, 70 | 71 | ```bash 72 | REACT_APP_PLAY_API_URL=https://api.github.com/repos/reactplay 73 | REACT_APP_NHOST_BACKEND_URL=https://rgkjmwftqtbpayoyolwh.nhost.run/ 74 | REACT_APP_NHOST_VERSION=v1 75 | REACT_APP_NHOST_ENDPOINT=graphql 76 | ``` 77 | 78 | ## Start the Development Mode 79 | 80 | Use the following command to start the app in development mode: 81 | 82 | ```bash 83 | npm start 84 | 85 | or 86 | 87 | yarn start 88 | ``` 89 | 90 | **Note**: The `start` script automatically invokes "linters" process. Should you need to run the app without `lint` use `start:nolint` instead. 91 | However, make sure that you run `start` the script at least once before committing your code. Code with linter error may not be reviewed. 92 | 93 | It runs the app in development mode. Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 94 | 95 | The page will reload when you make changes. You may also see any lint errors in the console. 96 | 97 | ## Format and lint the code 98 | 99 | Use the following command to format and lint the code: 100 | 101 | **Format the code** 102 | 103 | ```bash 104 | yarn run format 105 | 106 | or 107 | 108 | npm run format 109 | ``` 110 | 111 | **Lint the code to check the linting issue** 112 | 113 | ```bash 114 | yarn run lint 115 | 116 | or 117 | 118 | npm run lint 119 | ``` 120 | 121 | **To fix the linting issue** 122 | 123 | ```bash 124 | yarn run lint:fix 125 | 126 | or 127 | 128 | npm run lint:fix 129 | ``` 130 | 131 | ## Build the App for Production 132 | 133 | Use the following command to build the app for production: 134 | 135 | ```bash 136 | yarn build 137 | 138 | or 139 | 140 | npm build 141 | ``` 142 | 143 | It builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes. 144 | 145 | ## Test App Locally (E2E with Cypress) 146 | 147 | Use the following command to run cypress locally: 148 | 149 | ```bash 150 | yarn cypress:open 151 | 152 | or 153 | 154 | npm cypress:open 155 | ``` 156 | 157 | It will open the cypress dashboard, through which you need to select `E2E Testing`. 158 | Once you are done with the selection you will get the option to choose your preferred browser in which you want to run the test.! 159 | Once you select the browser you need to click on `Start E2E Testing in .` The chosen browser will pop up you can see a list of cypress tests, click on the test to start testing.! 160 | -------------------------------------------------------------------------------- /docs/troubleshooting-guide.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 7 3 | --- 4 | 5 | # Troubleshooting Guide 6 | 7 | Facing a problem? Check out our Troubleshooting Guide. 8 | -------------------------------------------------------------------------------- /docusaurus.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Note: type annotations allow type checking and IDEs autocompletion 3 | 4 | const lightCodeTheme = require('prism-react-renderer/themes/github'); 5 | const darkCodeTheme = require('prism-react-renderer/themes/dracula'); 6 | 7 | const TITLE = 'Home'; 8 | const TAGLINE = 9 | 'An OpenSource platform for React developers to learn, create and share ReactJS Projects.'; 10 | const ORG_NAME = 'reactplay'; 11 | const REPO_NAME = 'docs'; 12 | const MAIN_SITE_URL = 'https://reactplay.io/'; 13 | const WEB_URL = 'https://docs.reactplay.io/'; 14 | const BLOG_URL = 'https://blog.reactplay.io/'; 15 | const GITHUB_URL = 'https://github.com/reactplay/docs/'; 16 | const DISCORD_URL = 'https://discord.gg/vrTxWUP8Am'; 17 | const TWITTER_URL = 'https://twitter.com/reactplayio'; 18 | const LINKEDIN_URL = 'https://www.linkedin.com/company/reactplay/'; 19 | const COPYRIGHT = `Copyright © ${new Date().getFullYear()} ${TITLE}. Built with Docusaurus.`; 20 | 21 | /** @type {import('@docusaurus/types').Config} */ 22 | const config = { 23 | 24 | title: TITLE, 25 | tagline: TAGLINE, 26 | url: WEB_URL, 27 | baseUrl: '/', 28 | onBrokenLinks: 'log', 29 | onBrokenMarkdownLinks: 'warn', 30 | favicon: 'img/favicon.ico', 31 | 32 | organizationName: ORG_NAME, // Usually your GitHub org/user name. 33 | projectName: REPO_NAME, // Usually your repo name. 34 | 35 | presets: [ 36 | [ 37 | '@docusaurus/preset-classic', 38 | 39 | { 40 | docs: { 41 | routeBasePath: '/', 42 | sidebarPath: require.resolve('./sidebars.js'), 43 | }, 44 | blog: false, 45 | theme: { 46 | customCss: require.resolve('./src/css/custom.css'), 47 | }, 48 | }, 49 | ], 50 | ], 51 | 52 | i18n: { 53 | defaultLocale: 'en', 54 | locales: ['en', 'bn'], 55 | localeConfigs: { 56 | en: { 57 | htmlLang: 'en-GB', 58 | }, 59 | bn: { 60 | htmlLang: 'bn', 61 | direction: 'ltr', 62 | }, 63 | }, 64 | }, 65 | 66 | themeConfig: 67 | /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ 68 | ({ 69 | navbar: { 70 | title: TITLE, 71 | logo: { 72 | alt: `${TITLE} Logo`, 73 | src: 'img/logo.png', 74 | }, 75 | items: [ 76 | { 77 | type: 'doc', 78 | docId: 'intro', 79 | position: 'left', 80 | label: 'Guides', 81 | className: 'beta-badge', 82 | }, 83 | { 84 | href: BLOG_URL, 85 | label: 'Blog', 86 | position: 'left', 87 | }, 88 | { 89 | href: MAIN_SITE_URL, 90 | label: 'ReactPlay', 91 | position: 'left', 92 | }, 93 | { 94 | href: GITHUB_URL, 95 | label: 'GitHub', 96 | position: 'right', 97 | }, 98 | { 99 | type: 'localeDropdown', 100 | position: 'left', 101 | }, 102 | ], 103 | }, 104 | footer: { 105 | style: 'dark', 106 | links: [ 107 | { 108 | title: 'Docs', 109 | items: [ 110 | { 111 | label: 'Guides', 112 | to: '/', 113 | }, 114 | ], 115 | }, 116 | { 117 | title: 'Community', 118 | items: [ 119 | { 120 | label: 'Discord', 121 | href: DISCORD_URL, 122 | }, 123 | { 124 | label: 'Twitter', 125 | href: TWITTER_URL, 126 | }, 127 | { 128 | label: 'LinkedIn', 129 | href: LINKEDIN_URL, 130 | }, 131 | ], 132 | }, 133 | { 134 | title: 'More', 135 | items: [ 136 | { 137 | label: 'Blog', 138 | href: BLOG_URL, 139 | }, 140 | { 141 | label: 'GitHub', 142 | href: GITHUB_URL, 143 | }, 144 | ], 145 | }, 146 | ], 147 | copyright: COPYRIGHT, 148 | }, 149 | prism: { 150 | theme: lightCodeTheme, 151 | darkTheme: darkCodeTheme, 152 | }, 153 | colorMode: { 154 | defaultMode: 'light', 155 | 156 | respectPrefersColorScheme: true, 157 | }, 158 | }), 159 | scripts: [ 160 | { 161 | src: 'https://analytics.reactplay.io/script.js', 162 | async: true, 163 | 'data-website-id': 'b385383c-0fb2-437f-84a8-2a98daf05fde', 164 | }, 165 | ], 166 | }; 167 | 168 | module.exports = config; 169 | -------------------------------------------------------------------------------- /i18n/bn/code.json: -------------------------------------------------------------------------------- 1 | { 2 | "theme.ErrorPageContent.title": { 3 | "message": "This page crashed.", 4 | "description": "The title of the fallback page when the page crashed" 5 | }, 6 | "theme.NotFound.title": { 7 | "message": "পেজটি খুঁজে পাওয়া যায়নি", 8 | "description": "The title of the 404 page" 9 | }, 10 | "theme.NotFound.p1": { 11 | "message": "আপনি যা খুঁজছিলেন তা আমরা খুঁজে পাইনি।", 12 | "description": "The first paragraph of the 404 page" 13 | }, 14 | "theme.NotFound.p2": { 15 | "message": "দয়া করে সাইটের মালিকের সাথে যোগাযোগ করুন যা আপনাকে মূল URL এর সাথে যুক্ত করেছে এবং তাদের লিঙ্কটি ভাঙ্গা রয়েছে তা তাদের জানান।", 16 | "description": "The 2nd paragraph of the 404 page" 17 | }, 18 | "theme.admonition.note": { 19 | "message": "note", 20 | "description": "The default label used for the Note admonition (:::note)" 21 | }, 22 | "theme.admonition.tip": { 23 | "message": "tip", 24 | "description": "The default label used for the Tip admonition (:::tip)" 25 | }, 26 | "theme.admonition.danger": { 27 | "message": "danger", 28 | "description": "The default label used for the Danger admonition (:::danger)" 29 | }, 30 | "theme.admonition.info": { 31 | "message": "info", 32 | "description": "The default label used for the Info admonition (:::info)" 33 | }, 34 | "theme.admonition.caution": { 35 | "message": "caution", 36 | "description": "The default label used for the Caution admonition (:::caution)" 37 | }, 38 | "theme.BackToTopButton.buttonAriaLabel": { 39 | "message": "Scroll back to top", 40 | "description": "The ARIA label for the back to top button" 41 | }, 42 | "theme.blog.archive.title": { 43 | "message": "Archive", 44 | "description": "The page & hero title of the blog archive page" 45 | }, 46 | "theme.blog.archive.description": { 47 | "message": "Archive", 48 | "description": "The page & hero description of the blog archive page" 49 | }, 50 | "theme.blog.paginator.navAriaLabel": { 51 | "message": "ব্লগ তালিকা পেজ নেভিগেশন", 52 | "description": "The ARIA label for the blog pagination" 53 | }, 54 | "theme.blog.paginator.newerEntries": { 55 | "message": "নতুন এন্ট্রি", 56 | "description": "The label used to navigate to the newer blog posts page (previous page)" 57 | }, 58 | "theme.blog.paginator.olderEntries": { 59 | "message": "পুরানো এন্ট্রি", 60 | "description": "The label used to navigate to the older blog posts page (next page)" 61 | }, 62 | "theme.blog.post.paginator.navAriaLabel": { 63 | "message": "ব্লগ পোস্ট পেজ নেভিগেশন", 64 | "description": "The ARIA label for the blog posts pagination" 65 | }, 66 | "theme.blog.post.paginator.newerPost": { 67 | "message": "নতুন পোস্ট", 68 | "description": "The blog post button label to navigate to the newer/previous post" 69 | }, 70 | "theme.blog.post.paginator.olderPost": { 71 | "message": "পুরানো পোস্ট", 72 | "description": "The blog post button label to navigate to the older/next post" 73 | }, 74 | "theme.blog.post.plurals": { 75 | "message": "একটি পোস্ট|{count} পোস্টস", 76 | "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" 77 | }, 78 | "theme.blog.tagTitle": { 79 | "message": "{nPosts} সঙ্গে ট্যাগ্গেড \"{tagName}\" ", 80 | "description": "The title of the page for a blog tag" 81 | }, 82 | "theme.tags.tagsPageLink": { 83 | "message": "সমস্ত ট্যাগ্স দেখুন", 84 | "description": "The label of the link targeting the tag list page" 85 | }, 86 | "theme.colorToggle.ariaLabel": { 87 | "message": "Switch between dark and light mode (currently {mode})", 88 | "description": "The ARIA label for the navbar color mode toggle" 89 | }, 90 | "theme.colorToggle.ariaLabel.mode.dark": { 91 | "message": "dark mode", 92 | "description": "The name for the dark color mode" 93 | }, 94 | "theme.colorToggle.ariaLabel.mode.light": { 95 | "message": "light mode", 96 | "description": "The name for the light color mode" 97 | }, 98 | "theme.docs.breadcrumbs.navAriaLabel": { 99 | "message": "Breadcrumbs", 100 | "description": "The ARIA label for the breadcrumbs" 101 | }, 102 | "theme.docs.DocCard.categoryDescription": { 103 | "message": "{count} items", 104 | "description": "The default description for a category card in the generated index about how many items this category includes" 105 | }, 106 | "theme.docs.paginator.navAriaLabel": { 107 | "message": "ডক্স পৃষ্টাগুলির নেভিগেশন", 108 | "description": "The ARIA label for the docs pagination" 109 | }, 110 | "theme.docs.paginator.previous": { 111 | "message": "পূর্ববর্তী", 112 | "description": "The label used to navigate to the previous doc" 113 | }, 114 | "theme.docs.paginator.next": { 115 | "message": "পরবর্তী", 116 | "description": "The label used to navigate to the next doc" 117 | }, 118 | "theme.docs.tagDocListPageTitle.nDocsTagged": { 119 | "message": "One doc tagged|{count} docs tagged", 120 | "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" 121 | }, 122 | "theme.docs.tagDocListPageTitle": { 123 | "message": "{nDocsTagged} with \"{tagName}\"", 124 | "description": "The title of the page for a docs tag" 125 | }, 126 | "theme.docs.versionBadge.label": { 127 | "message": "Version: {versionLabel}" 128 | }, 129 | "theme.docs.versions.unreleasedVersionLabel": { 130 | "message": "এটি {siteTitle} {versionLabel} এর জন্যে অপ্রকাশিত ডকুমেন্টেশন।", 131 | "description": "The label used to tell the user that he's browsing an unreleased doc version" 132 | }, 133 | "theme.docs.versions.unmaintainedVersionLabel": { 134 | "message": "এটি {siteTitle} {versionLabel} এর জন্যে ডকুমেন্টেশন, যা আর সক্রিয়ভাবে রক্ষণাবেক্ষণ করা হয় না।", 135 | "description": "The label used to tell the user that he's browsing an unmaintained doc version" 136 | }, 137 | "theme.docs.versions.latestVersionSuggestionLabel": { 138 | "message": "আপ-টু-ডেট ডকুমেন্টেশনের জন্য, {latestVersionLink} ({versionLabel}) দেখুন।", 139 | "description": "The label used to tell the user to check the latest version" 140 | }, 141 | "theme.docs.versions.latestVersionLinkLabel": { 142 | "message": "লেটেস্ট ভার্সন", 143 | "description": "The label used for the latest version suggestion link label" 144 | }, 145 | "theme.common.editThisPage": { 146 | "message": "এই পেজটি এডিট করুন", 147 | "description": "The link label to edit the current page" 148 | }, 149 | "theme.common.headingLinkTitle": { 150 | "message": "{heading} এর সঙ্গে সরাসরি লিংকড", 151 | "description": "Title for link to heading" 152 | }, 153 | "theme.lastUpdated.atDate": { 154 | "message": " {date} তারিখে", 155 | "description": "The words used to describe on which date a page has been last updated" 156 | }, 157 | "theme.lastUpdated.byUser": { 158 | "message": "{user} দ্বারা", 159 | "description": "The words used to describe by who the page has been last updated" 160 | }, 161 | "theme.lastUpdated.lastUpdatedAtBy": { 162 | "message": "সর্বশেষ সংষ্করণ{atDate}{byUser}", 163 | "description": "The sentence used to display when a page has been last updated, and by who" 164 | }, 165 | "theme.navbar.mobileVersionsDropdown.label": { 166 | "message": "Versions", 167 | "description": "The label for the navbar versions dropdown on mobile view" 168 | }, 169 | "theme.tags.tagsListLabel": { 170 | "message": "ট্যাগ্স:", 171 | "description": "The label alongside a tag list" 172 | }, 173 | "theme.AnnouncementBar.closeButtonAriaLabel": { 174 | "message": "বন্ধ করুন", 175 | "description": "The ARIA label for close button of announcement bar" 176 | }, 177 | "theme.blog.sidebar.navAriaLabel": { 178 | "message": "সাম্প্রতিক ব্লগ পোস্ট নেভিগেশন", 179 | "description": "The ARIA label for recent posts in the blog sidebar" 180 | }, 181 | "theme.CodeBlock.copied": { 182 | "message": "কপিড", 183 | "description": "The copied button label on code blocks" 184 | }, 185 | "theme.CodeBlock.copyButtonAriaLabel": { 186 | "message": "ক্লিপবোর্ডে কোড কপি করুন", 187 | "description": "The ARIA label for copy code blocks button" 188 | }, 189 | "theme.CodeBlock.copy": { 190 | "message": "কপি", 191 | "description": "The copy button label on code blocks" 192 | }, 193 | "theme.CodeBlock.wordWrapToggle": { 194 | "message": "Toggle word wrap", 195 | "description": "The title attribute for toggle word wrapping button of code block lines" 196 | }, 197 | "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": { 198 | "message": "Toggle the collapsible sidebar category '{label}'", 199 | "description": "The ARIA label to toggle the collapsible sidebar category" 200 | }, 201 | "theme.NavBar.navAriaLabel": { 202 | "message": "Main", 203 | "description": "The ARIA label for the main navigation" 204 | }, 205 | "theme.navbar.mobileLanguageDropdown.label": { 206 | "message": "Languages", 207 | "description": "The label for the mobile language switcher dropdown" 208 | }, 209 | "theme.TOCCollapsible.toggleButtonLabel": { 210 | "message": "এই পেজ এ রয়েছে", 211 | "description": "The label used by the button on the collapsible TOC component" 212 | }, 213 | "theme.blog.post.readMore": { 214 | "message": "আরও পড়ুন", 215 | "description": "The label used in blog post item excerpts to link to full blog posts" 216 | }, 217 | "theme.blog.post.readMoreLabel": { 218 | "message": "Read more about {title}", 219 | "description": "The ARIA label for the link to full blog posts from excerpts" 220 | }, 221 | "theme.blog.post.readingTime.plurals": { 222 | "message": "এক মিনিট পড়া|{readingTime} মিনিট পড়া", 223 | "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" 224 | }, 225 | "theme.docs.breadcrumbs.home": { 226 | "message": "Home page", 227 | "description": "The ARIA label for the home page in the breadcrumbs" 228 | }, 229 | "theme.docs.sidebar.collapseButtonTitle": { 230 | "message": "সাইডবারটি সঙ্কুচিত করুন", 231 | "description": "The title attribute for collapse button of doc sidebar" 232 | }, 233 | "theme.docs.sidebar.collapseButtonAriaLabel": { 234 | "message": "সাইডবারটি সঙ্কুচিত করুন", 235 | "description": "The title attribute for collapse button of doc sidebar" 236 | }, 237 | "theme.docs.sidebar.navAriaLabel": { 238 | "message": "Docs sidebar", 239 | "description": "The ARIA label for the sidebar navigation" 240 | }, 241 | "theme.docs.sidebar.closeSidebarButtonAriaLabel": { 242 | "message": "Close navigation bar", 243 | "description": "The ARIA label for close button of mobile sidebar" 244 | }, 245 | "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { 246 | "message": "← মেন মেনুতে যান", 247 | "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)" 248 | }, 249 | "theme.docs.sidebar.toggleSidebarButtonAriaLabel": { 250 | "message": "Toggle navigation bar", 251 | "description": "The ARIA label for hamburger menu button of mobile navigation" 252 | }, 253 | "theme.docs.sidebar.expandButtonTitle": { 254 | "message": "সাইডবারটি প্রসারিত করুন", 255 | "description": "The ARIA label and title attribute for expand button of doc sidebar" 256 | }, 257 | "theme.docs.sidebar.expandButtonAriaLabel": { 258 | "message": "সাইডবারটি প্রসারিত করুন", 259 | "description": "The ARIA label and title attribute for expand button of doc sidebar" 260 | }, 261 | "theme.ErrorPageContent.tryAgain": { 262 | "message": "Try again", 263 | "description": "The label of the button to try again rendering when the React error boundary captures an error" 264 | }, 265 | "theme.common.skipToMainContent": { 266 | "message": "স্কিপ করে মূল কন্টেন্ট এ যান", 267 | "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation" 268 | }, 269 | "theme.tags.tagsPageTitle": { 270 | "message": "ট্যাগ্স", 271 | "description": "The title of the tag list page" 272 | } 273 | } 274 | -------------------------------------------------------------------------------- /i18n/bn/docusaurus-plugin-content-docs/current.json: -------------------------------------------------------------------------------- 1 | { 2 | "version.label": { 3 | "message": "পরবর্তী", 4 | "description": "The label for version current" 5 | }, 6 | "sidebar.tutorialSidebar.category.How To Guides": { 7 | "message": "কিভাবে গাইড করবেন", 8 | "description": "The label for category How To Guides in sidebar tutorialSidebar" 9 | }, 10 | "sidebar.tutorialSidebar.category.How To Guides.link.generated-index.description": { 11 | "message": "এই গাইডগুলি আপনাকে শিখিয়ে দিবে কিভাবে ReactPlay ব্যবহার করতে হয়।", 12 | "description": "The generated-index page description for category How To Guides in sidebar tutorialSidebar" 13 | } 14 | } -------------------------------------------------------------------------------- /i18n/bn/docusaurus-plugin-content-docs/current/How-To-Guides/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "কিভাবে গাইড করবেন", 3 | "position": 6, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "এই গাইডগুলি আপনাকে শিখিয়ে দিবে কিভাবে ReactPlay ব্যবহার করতে হয়।" 7 | } 8 | } -------------------------------------------------------------------------------- /i18n/bn/docusaurus-plugin-content-docs/current/How-To-Guides/how-to-become-a-maintainer.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # কিভাবে ReactPlay ওপেন সোর্স প্রজেক্ট মেইন্টেইনার হয়ে উঠবেন ? 6 | 7 | [ReactPlay](https://reactplay.io/) একটি ওপেন সোর্স কমিউনিটি যা ভলান্টিয়ারদেরকে মেইন্টেইনার হওয়ার স্বাগত জানায়। আপনি যদি মেইন্টেইনার হতে আগ্রহী হন, তবে নিম্নলিখিত ক্রাইটেরিয়া এবং রিকোয়ারমেন্টস পূরণ করতে হবে। 8 | 9 | ## ভূমিকা সম্পর্কে 10 | 11 | - এটি একটি স্বেচ্ছাসেবী প্রচেষ্টা. 🙋‍♂️ 12 | - আপনার অবশ্যই ওপেন সোর্স এবং মানুষের প্রতি ভালবাসা থাকতে হবে। 💛 13 | - আপনাকে সপ্তাহে ৪-৫ ঘন্টা দিতে হতে পারে। ⏳ 14 | 15 | ## ক্রাইটেরিয়া 16 | 17 | - প্রথমে একজন কন্ট্রিবিউটর হন। ReactPlay ইকোসিস্টেম, প্রসেস এবং যেকোনো কন্ট্রিবিউশন গ্রহণের ক্রাইটেরিয়া বোঝার জন্য আপনি কমপক্ষে 2টি বিষয়ে কন্ট্রিবিউশন রেখেছেন তা নিশ্চিত করুন। 18 | - আপনি কেন এই ভূমিকা নিতে চান তা ব্যাখ্যা করে একটি ছোট লেখা তৈরি করুন? এই লেখাটি 150 শব্দের বেশি হওয়া উচিত নয়। 19 | - আপনার পয়েন্ট নিয়ে আলোচনা করার জন্য আমাদের বিদ্যমান প্রজেক্ট মেইন্টেইনারের সাথে 15 মিনিটের জন্য একটি [মিটিং নির্ধারণ করুন](https://zcal.co/tapasadhikary/15min)। 20 | 21 | এখানে তালিকাভুক্ত সমস্ত কিছু পড়তে ভুলবেন না: https://opensource.guide/best-practices/ 22 | 23 | ## দয়া করে নোট করুন 24 | 25 | 1. ReactPlay-এর মেইন্টেইনার হতে আপনার ওপেন সোর্স প্রজেক্ট মেইন্টেইন করার পূর্ব অভিজ্ঞতার প্রয়োজন নেই। 26 | 1. যারা একজন মেইন্টেইনার হতে আগ্রহী তাদের আমরা স্বাগত জানাই, এবং যদি আমরা আপনাকে অবিলম্বে গ্রহন করতে না পারি, তাহলে এর মানে এই নয় যে আমরা আপনাকে প্রত্যাখ্যান করছি। 27 | 1. যদি আপনার কোনো গ্যাপ থাকে যা আপনাকে ওভারকাম করতে এবং ফিরে আসতে হয়, তবে আমরা আপনাকে সেটা জানাবো। 28 | 1. আমরা মেইন্টেইনারদের খুঁজছি যারা দীর্ঘমেয়াদী প্রজেক্টের জন্য প্রতিশ্রুতিবদ্ধ। 29 | 30 | ## বিদ্যমান ভূমিকা 31 | 32 | - Community Manager 33 | - Social & Events 34 | - Maintainers 35 | - Content 36 | - Dev Enablement 37 | -------------------------------------------------------------------------------- /i18n/bn/docusaurus-plugin-content-docs/current/How-To-Guides/how-to-create-play.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # কিভাবে একটি play তৈরি করবেন 6 | 7 | স্বাগতম, ডেভেলপাররা! আমরা এটা জেনে খুবই উৎসাহিত যে আপনি একটি নতুন play তৈরি করতে যাচ্ছেন। এটা শুরু করা খুবই সহজ। 8 | 9 | > **দ্রষ্টব্য:** নীচের ধাপগুলি বিবেচনা করে যে, আপনি আগেই [react-play](https://github.com/reactplay/react-play) রিপোজিটরিটি ফর্ক করে ক্লোন করেছেন এবং `npm install` অথবা `yarn install` কমান্ড ব্যবহার করে ডিপেন্ডেন্সিগুলি ইনস্টল করেছেন। ফর্কিং সম্পর্কে আপনি যদি নতুন হন, তবে শুরু করার জন্য এই [YouTube গাইড](https://www.youtube.com/watch?v=h8suY-Osn8Q) দেখুন। 10 | 11 | - অ্যাপ্লিকেশনটি রান করার জন্য নিম্নলিখিত কমান্ড ব্যবহার করুন 12 | 13 | ```bash 14 | yarn start 15 | 16 | or 17 | 18 | npm run start 19 | ``` 20 | 21 | যদি আপনি ডিপেন্ডেন্সি সম্পর্কিত কোনো সমস্যার সম্মুখীন হন, তবে নিম্নোক্ত কমান্ডটি ব্যবহার করতে পারেন: 22 | 23 | ```bash 24 | npm install --legacy-peer-deps 25 | ``` 26 | 27 | বিস্তারিত জানতে [README](https://github.com/reactplay/react-play#readme) ফাইলটি চেক করতে পারেন। 28 | 29 | - আপনি অ্যাপ্লিকেশনটি http://localhost:3000 এ অ্যাক্সেস করতে পারবেন। 30 | - `Create` বাটনে ক্লিক করুন। 31 | 32 |

33 | create-play 34 |

35 | 36 | - অ্যাপ্লিকেশনটি আপনাকে অনুমোদন করতে চেষ্টা করবে 37 | - আপনি যদি ইতিমধ্যে [`NHost`](https://nhost.io) এ লগ ইন না থাকেন, তবে আপনাকে অনুমতি দিতে বলা হবে 38 | - আপনার গিটহাব অ্যাকাউন্ট দিয়ে লগ ইন করুন 39 | - তথ্য পূরণ করুন এবং জমা দিন। 40 | 41 |

42 | create-play-fill-form 43 |

44 | 45 | প্যারামিটার 46 | 47 | | ফিল্ড | বাধ্যতামূলক? | বিবরণ | 48 | | --------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | 49 | | Name | হ্যাঁ | প্রতিটি `Play` এর একটি নাম থাকা উচিত যা `Play` এর ধারণার সাথে সম্পর্কিত। | 50 | | Description | হ্যাঁ | এখানে `Play`-এর বর্ণনা দেওয়া হয় যাতে ব্যবহারকারীরা এটি আরো ভালোভাবে বুঝতে পারে। সর্বাধিক অনুমোদিত অক্ষরের সংখ্যা ১০২৪ টি। | 51 | | Issue | হ্যাঁ | `Play`-টির সাথে একটি ইস্যু ম্যাপ করতে হবে। এখানে তা নির্বাচন করুন। | 52 | | Language | হ্যাঁ | অ্যাপ্লিকেশনটিকে আপনার পছন্দের ভাষা জানান। এটিতে **JavaScript** এবং **TypeScript** উভয় সাপোর্ট করে। আপনি যেকোনটি সিলেক্ট করতে পারেন। | 53 | | Style | না | অ্যাপ্লিকেশনটিকে আপনার পছন্দের স্টাইল জানান। এটিতে **CSS** এবং **SCSS** উভয় সাপোর্ট করে। আপনি যেকোনটি সিলেক্ট করতে পারেন। | 54 | | Level | না | আপনাকে এখানে তিনটি লেভেল থেকে একটি নির্বাচন করতে হবে, "Beginner", "Intermediate", অথবা "Advanced". অনুগ্রহ করে `Play` এর জন্য একটি লেভেল নির্বাচন করুন। এই লেভেলের মাধ্যমে React ব্যবহার করে একট `Play` ডেভেলপ করার সম্ভাব্য জটিলতা প্রকাশ করা হয়। | 55 | | Github Username | হ্যাঁ | `Play` তৈরি করতে আপনার গিটহাব username দিন যাতে আপনাকে `Play`-এর ক্রিয়েটর হিসাবে চিহ্নিত করা যায়। | 56 | | Tags | না | অনুগ্রহ করে কমা দ্বারা পৃথক করা ট্যাগের তালিকা প্রদান করুন। উদাহরণঃ JSX, Hooks | 57 | | Cover Image URL | না | `play list` পেইজে `Play` টি থাম্বনেলসহ প্রদর্শন করার জন্য কভার ইমেজ ব্যবহার করা হয়। অনুগ্রহ করে কভার ইমেজের জন্য একটি লিংক প্রদান করুন, যা পাবলিকভাবে অ্যাক্সেস যোগ্য একটি URL, উদাহরণঃ https://res.cloudinary.com/reactplay/image/upload/v1649060528/demos/id-card_pdvyvz.png। এছাড়া, আপনি play ফোল্ডারের রুটে cover.png ফাইল রাখতে পারেন। যদি আপনার কাছে কভার ইমেজ না থাকে, তবে অ্যাপ্লিকেশন ডিফল্ট কভার ইমেজ ব্যবহার করবে। | 58 | | Blog URL | না | আপনি যদি এই `Play` সম্পর্কে ব্লগ লিখে থাকেন, তাহলে অনুগ্রহ করে আপনার ব্লগ আর্টিকেল পেইজের লিঙ্ক প্রদান করুন। | 59 | | Video | না | আপনি যদি এই `Play`-টি সম্পর্কে ভিডিও টিউটোরিয়াল তৈরি করে থাকেন, তাহলে অনুগ্রহ করে আপনার Youtube ভিডিওটির লিঙ্ক প্রদান করুন। | 60 | | | 61 | 62 | - সফলভাবে জমা দেওয়ার পরে, আপনাকে একটি পেইজে নিয়ে যাওয়া হবে যেখানে একটি play_id প্রদান করা হবে। 63 | 64 |

65 | command 66 |

67 | 68 | - আপনার অ্যাপ্লিকেশনটি বন্ধ করুন 69 | - Reactplay-এর রুটে নেভিগেট করুন 70 | - নিম্নলিখিত কমান্ড চালান 71 | 72 | ```bash 73 | npx create-react-play -c 74 | ``` 75 | 76 | **দ্রষ্টব্য:** উপরের কমান্ডটি চালানোর পর, যদি play ফোল্ডার /src/plays/ এখনও খালি থাকে, তবে আপনি সম্ভবত পুরানো ভার্সনের প্যাকেজ ব্যবহার করছেন। এই ক্ষেত্রে `@latest` ব্যবহার করুন। 77 | 78 | ```bash 79 | npx create-react-play@latest -c 80 | ``` 81 | 82 |

83 | copy-command 84 |

85 | 86 | - অ্যাপ্লিকেশনটি চালু করুন 87 | 88 | ```bash 89 | yarn start 90 | 91 | or 92 | 93 | npm run start 94 | ``` 95 | 96 | - এখন আপনি দেখতে পাবেন যে আপনার `Play`-টি [play list](http://localhost:3000/plays) পেইজে যুক্ত হয়েছে। 97 |

98 | play 99 |

100 | 101 | - `Play` থাম্বনেল এ ক্লিক করে আপনি `Play`-এর বিস্তারিত দেখতে পারবেন। 102 |

103 | play-details 104 |

105 | 106 | - আপনি দেখতে পাবেন যে আপনার `Play`-এর জন্য একটি ডিরেক্টরি তৈরি করা হয়েছে `./src/plays/` পাথে। 107 |

108 | code 109 |

110 | 111 | - আপনার `Play`-টি ডেভেলপ করতে থাকুন। হ্যাপি কোডিং! 112 | 113 | ## 👀 রিভিউর জন্য একটি play জমা দেওয়া 114 | 115 | আপনি যখন আপনার `Play`-এর কোডিং সম্পন্ন করবেন, তখন রিভিউর জন্য এটি জমা দিতে পারবেন। রিভিউর জন্য `Play` জমা দেওয়া প্রক্রিয়া দুটি ধাপে সম্পন্ন করতে হয়। 116 | 117 | - আপনার পরিবর্তনগুলি নিয়ে [react-play](https://github.com/reactplay/react-play) রিপোজিটরিতে একটি Pull Request তৈরি করুন। 118 | - রিভিউর মন্তব্যগুলির কার্যক্রম পরিচালনা করার জন্য সাপ্তাহিক ভিত্তিতে কিছু সময় প্রদান করুন। 119 | 120 | Pull Request গৃহীত এবং merged হলে, আমরা আপনাকে জানাবো এবং [react-play](https://github.com/reactplay/react-play) প্রজেক্টে আপনাকে একজন `Contributor` হিসাবে যুক্ত করবো। 121 | 122 | ## ✋ সাহায্য প্রয়োজন?? 123 | 124 | আপনি আমাদের সাথে [ReactPlay Twitter Handle | @ReactPlayIO](https://twitter.com/ReactPlayIO).-তে 125 | সরাসরি মেসেজ দিয়ে যোগাযোগ করতে পারেন। এছাড়াও, আলোচনার জন্য আমাদের [Discord community](https://discord.gg/vrTxWUP8Am) কমিউনিটিতে যোগদান করতে আপনাকে স্বাগতম। 126 | -------------------------------------------------------------------------------- /i18n/bn/docusaurus-plugin-content-docs/current/How-To-Guides/how-to-style-play.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # কিভাবে আপনার Play-তে স্টাইল যোগ করবেন ? 6 | 7 | স্টাইল একটি Play-এর গুরুত্বপূর্ণ অংশ এবং আপনার কোডটি সংরক্ষণযোগ্য এবং স্কেলেবল হতে হলে বেস্ট প্র্যাকটিসসমূহ অনুসরণ করা গুরুত্বপূর্ণ। এখানে কিছু **করবেন এবং করবেন না** সূচনা দেওয়া হলো, আপনি যখন আপনার Play-তে স্টাইল যোগ করবেন, তখন এগুলো মনে রাখতে হবে: 8 | 9 | ## করবেন 10 | 11 | - Play-এর নাম দিয়ে শুরু হওয়া এবং kebab-case এ থাকা ক্লাস নেম ব্যবহার করুন। এই নেমিং কনভেনশন আপনার কোডটি সংগঠিত রাখতে এবং সহজে পড়তে সাহায্য করবে। 12 | উদাহরণস্বরূপ, যদি আপনার Play-এর নাম হয় 'my-play', তাহলে আপনার ক্লাস নাম হতে হবে 'my-play\_\_my-class' 13 | 14 | - [scoped styles](https://developer.mozilla.org/en-US/docs/Web/CSS/:scope) এবং automatic [vendor prefixing](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) সহ অতিরিক্ত বৈশিষ্ট্য প্রদান করে এমন CSS লাইব্রেরি ব্যবহার করুন। 15 | 16 | - ReactPlay তে `Tailwind CSS` সাপোর্ট যুক্ত রয়েছে। আপনি আপনার Play-তে এই CSS লাইব্রেরি ব্যবহার করতে পারেন। 17 | 18 | - আপনার কম্পোনেন্টসমূহ স্টাইল করতে CSS মডিউল ব্যবহার করুন। CSS মডিউল আপনাকে মডিউল এবং পুনঃব্যবহার যোগ্য CSS কোড লেখতে সাহায্য করে, যা একটি নির্দিষ্ট কম্পোনেন্টের স্কোপের মধ্যে হয়। 19 | উদাহরণস্বরূপ, আপনি আপনার কম্পোনেন্টের জন্য একটি CSS মডিউল তৈরি করতে পারেন এই ভাবে: 20 | 21 | ```css 22 | .my-play__my-class { 23 | color: red; 24 | } 25 | ``` 26 | 27 | এবং তারপর এটি আপনার কম্পোনেন্টে এভাবে ইম্পোর্ট করুন: 28 | 29 | ```jsx 30 | import styles from "./MyComponent.module.css"; 31 | 32 | function MyComponent() { 33 | return
Hello World
; 34 | } 35 | ``` 36 | 37 | - `styled-components` ব্যবহার করে পুনর্ব্যবহারযোগ্য এবং যোগদানযোগ্য কম্পোনেন্ট তৈরি করুন। `styled-components` আপনাকে এমন একটি CSS কোড লিখতে দেয় যা একটি নির্দিষ্ট কম্পোনেন্টের স্কোপের মধ্যে হয় এবং আপনার প্রজেক্টের সাথে পুনর্ব্যবহার করা যায়। 38 | 39 | ## করবেন না 40 | 41 | - প্রয়োজন না হলে ইনলাইন স্টাইল ব্যবহার করবেন না। ইনলাইন স্টাইল আপনার কোডটি পড়া এবং সংরক্ষণ করা কঠিন করতে পারে, এবং সে সাথে পারফরম্যান্সে নেতিবাচক প্রভাব ফেলতে পারে। তাই, আপনার কম্পোনেন্টসমূহ স্টাইল করতে CSS ক্লাস ব্যবহার করুন। এই পদ্ধতি আপনার কোডটি সংগঠিত রাখতে সাহায্য করে এবং সংরক্ষণ করা সহজ করে। 42 | উদাহরণস্বরূপ, এই ভাবে ইনলাইন স্টাইল ব্যবহার না করে: 43 | 44 | ```jsx 45 | function MyComponent() { 46 | return
Hello World
; 47 | } 48 | ``` 49 | 50 | আপনি একটি CSS ক্লাস তৈরি করতে পারেন এবং তা আপনার কম্পোনেন্টে এই ভাবে প্রয়োগ করতে পারেন: 51 | 52 | ```css 53 | .my-play__my-class { 54 | color: red; 55 | } 56 | ``` 57 | 58 | ```jsx 59 | function MyComponent() { 60 | return
Hello World
; 61 | } 62 | ``` 63 | 64 | - গ্লোবাল স্টাইল ব্যবহার করবেন না। গ্লোবাল স্টাইল নেমিং সংঘর্ষ সৃষ্টি করতে পারে এবং আপনার কোডটি সংরক্ষণ করা কঠিন করতে পারে। তাই, মডিউল এবং পুনর্ব্যবহারযোগ্য CSS কোড তৈরি করতে CSS মডিউল বা 'styled-components' ব্যবহার করুন। 65 | উদাহরণস্বরূপ, আপনি আপনার কম্পোনেন্টের জন্য একটি CSS মডিউল তৈরি করতে পারেন এই ভাবে: 66 | 67 | ```css 68 | .my-play__my-class { 69 | color: red; 70 | } 71 | ``` 72 | 73 | এবং তারপর এটি আপনার কম্পোনেন্টে এভাবে ইম্পোর্ট করুন: 74 | 75 | ```jsx 76 | import styles from "./MyComponent.module.css"; 77 | 78 | function MyComponent() { 79 | return
Hello World
; 80 | } 81 | ``` 82 | 83 | - `!important` CSS প্রপার্টি ব্যবহার করে স্টাইল ওভাররাইড করবেন না। এটি অন্যান্য সমস্ত ডিক্লারেশন ওভাররাইড করে এবং css কোড সংরক্ষণ এবং ডিবাগ করা কঠিন করে। বরং, আপনি অন্য বিকল্প ব্যবহার করতে পারেন যেমন সোর্স অর্ডার নিয়ম, ইনহেরিটেড প্রপার্টি নিয়ম, বা স্পেসিফিসিটি নিয়ম। 84 | 85 | এই **করবেন এবং করবেন না** নিয়মগুলি অনুসরণ করে, আপনি নিশ্চিত করতে পারেন যে আপনার প্লে সুন্দরভাবে স্টাইল করা, সংরক্ষণযোগ্য, এবং স্কেলযোগ্য। আপনার প্রজেক্টের জন্য সর্বোত্তম কাজ করে এমন পদ্ধতি বেছে নিতে এবং আপনার কোডকে সংগঠিত এবং রিডেবল রাখতে মনে রাখবেন। 86 | 87 | ## ✋ সাহায্য প্রয়োজন? 88 | 89 | আপনি আমাদের সাথে [ReactPlay Twitter Handle | @ReactPlayIO](https://twitter.com/ReactPlayIO).-তে 90 | সরাসরি মেসেজ দিয়ে যোগাযোগ করতে পারেন। এছাড়াও, আলোচনার জন্য আমাদের [Discord community](https://discord.gg/vrTxWUP8Am) কমিউনিটিতে যোগদান করতে আপনাকে স্বাগতম। 91 | -------------------------------------------------------------------------------- /i18n/bn/docusaurus-plugin-content-docs/current/apis-hook.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # APIs হুক 6 | 7 | ReactPlay এ, আমরা আমাদের নিজস্ব তৈরি করা রিয়েক্ট হুক ব্যবহার করে API-এর সঙ্গে কাজ করি। নিম্নে তা দেওয়া হলোঃ 8 | 9 | 1. [useCacheResponse](#usecacheresponse) 10 | 1. [useContributors](#usecontributors) 11 | 1. [useFeaturedPlays](#usefeaturedplays) 12 | 1. [useFetch](#usefetch) 13 | 1. [useGetPlays](#usegetplays) 14 | 1. [useGitHub](#usegithub) 15 | 1. [useLikePlays](#uselikeplays) 16 | 1. [useLocalStorage](#uselocalstorage) 17 | 18 | এই সেকশনে আমরা প্রতিটি হুককে বিস্তারিতভাবে আলোচনা করব। 19 | 20 | ## useCacheResponse 21 | 22 | নাম থেকেই অনুমান করা যায়, এই হুকটি ব্যবহার করে কোডবেসে (ব্রাউজারে নয়) যেকোনো ধরণের ডেটা জন্য একটি অস্থায়ী ক্যাশ তৈরি করা যায়। 23 | 24 | **ইনপুট প্যারামিটার:** 25 | 26 | - None 27 | 28 | **রিটার্নকৃত মান** - অ্যারে 29 | 30 | - `key` এর উপর ভিত্তি করে `cached value` ফেচ করার জন্য গেটার ফাংশন 31 | - `key` এর বিপরীতে `value` তৈরি / আপডেট করার জন্য সেটার ফাংশন 32 | 33 | **উদাহরণ** 34 | 35 | ```jsx 36 | const [getCacheResponse, setCacheResponse] = useCacheResponse(); 37 | const response = axios(API_URL); 38 | setCacheResponse(FILTER_DATA_RESPONSE, response); 39 | // .... 40 | const isCachedResponse = getCacheResponse(FILTER_DATA_RESPONSE); 41 | ``` 42 | 43 | উপরের উদাহরণে, আমরা API রেসপন্সের উপরে ভিত্তি করে `FILTER_DATA_RESPONSE` ভ্যালুটি সেট করছি। এই ভ্যালুটি এখন ক্যাশ রেসপন্স হিসাবে সংরক্ষিত হয়েছে। আমরা এখানে `getCacheResponse` ব্যবহার করে `FILTER_DATA_RESPONSE` এর একই key পাস করে এই ক্যাশ ভ্যালুকে অ্যাক্সেস করতে পারি। 44 | 45 | ## useContributors 46 | 47 | এই কাস্টম হুকটি [ReactPlay's](https://github.com/reactplay/react-play) এর কন্ট্রিবিউটরদের তথ্য পেতে সহায়তা করে। 48 | 49 | **ইনপুট প্যারামিটার:** 50 | 51 | - `sorted`: একটি বুলিয়ান মান 52 | যদি `true` পাস করা হয়, ফলাফল হবে কন্ট্রিবিউশনের সংখ্যা অনুযায়ী কন্ট্রিবিউটরদের একটি সাজানো তালিকা (সর্বাধিক থেকে সর্বনিম্ন) 53 | 54 | **রিটার্নকৃত মান** - অবজেক্ট 55 | 56 | - `isLoading` স্টেট ডাটা ফেচ হওয়ার সময় লোডার প্রদর্শন করে। 57 | - `error` অবজেক্টটি ডেটা ফেচ করার সময় সংঘটিত কোনো এরর সম্পর্কে বিস্তারিত তথ্য ধারণ করে। 58 | - `data` অবজেক্টটি কন্ট্রিবিউটরদের তথ্যের তালিকা ধারণ করে। 59 | 60 | **উদাহরণ** 61 | 62 | ```jsx 63 | const { data, error, isLoading } = useContributors(true); 64 | 65 | return ( 66 |
    67 | {isLoading &&
  • Loading...
    • } 68 | {error &&
  • Error: {error.message}
    • } 69 | {data && 70 | data.map((contributor) => ( 71 |
  • 76 | {contributor.login} 77 |
    • 78 | ))} 79 |
80 | ); 81 | ``` 82 | 83 | ## useFeaturedPlays 84 | 85 | `useFeaturedPlays` হুকটি ইনটারনালি একটি GraphQL কুয়েরি চালায় যার মাধ্যমে ফিচার play-সমূহের একটি তালিকা পাওয়া যায়। 86 | 87 | **ইনপুট প্যারামিটার** 88 | 89 | - None 90 | 91 | **রিটার্নকৃত মান** - অ্যারে 92 | 93 | - `isLoading` স্টেট ডাটা ফেচ হওয়ার সময় লোডার প্রদর্শন করে। 94 | - `error` অবজেক্টটি ডেটা ফেচ করার সময় সংঘটিত কোনো এরর সম্পর্কে বিস্তারিত তথ্য ধারণ করে। 95 | - `data` অবজেক্টটি অ্যারে আকারে ফিচার play-সমূহের তালিকা ধারণ করে। 96 | 97 | **উদাহরণ** 98 | 99 | ```jsx 100 | const [loading, error, data] = useFeaturedPlays(); 101 | const success = !loading && !error && data.length; 102 | 103 | return ( 104 |
    105 | {loading &&

    Loading...

    } 106 | {error &&

    {error?.message ?? "Something went wrong"}

    } 107 | {success && 108 | data?.map((play, index) => )} 109 |
110 | ); 111 | ``` 112 | 113 | ## useFetch 114 | 115 | `useFetch` হল একটি কাস্টম হুক যা [ফেচ](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) কলের সময় এর চারপাশে একটি রেপার তৈরি করে। যদিও আমরা ReactPlay-তে ডেটা ফেচ করতে গ্রাফকিউএল ব্যবহার করি, কিন্তু কাস্টম প্লে তৈরি করার সময় প্রয়োজনীয় REST API কল করতে `useFetch` হুক ব্যবহারকারীকে সহায়তা করবে। 116 | 117 | **ইনপুট প্যারামিটার:** 118 | 119 | - `url`: API-র এন্ডপয়েন্ট URL। 120 | - `options`:: API অপশনসমূহ প্রদানের জন্য একটি অবজেক্ট। 121 | 122 | **রিটার্নকৃত মান** - অবজেক্ট 123 | 124 | - `isLoading` স্টেট ডাটা ফেচ হওয়ার সময় লোডার প্রদর্শন করে। 125 | - `error` অবজেক্টটি ডেটা ফেচ করার সময় সংঘটিত কোনো এরর সম্পর্কে বিস্তারিত তথ্য ধারণ করে। 126 | - `data` অবজেক্টটি API হতে রেসপন্স ধারণ করে। 127 | 128 | **উদাহরণ** 129 | 130 | ```jsx 131 | const { data, loading, error } = useFetch(API_BASE_URL); 132 | 133 | return ( 134 |
135 | {loading &&

Loading...

} 136 | {error &&

{error?.message ?? "Something went wrong"}

} 137 | {data &&

{data.content}

} 138 |
139 | ); 140 | ``` 141 | 142 | ## useGetPlays 143 | 144 | `useGetPlays` হুকটি ইনটারনালি একটি GraphQL কুয়েরি চালায় যার মাধ্যমে play-সমূহের একটি তালিকা পাওয়া যায়। এই কাস্টম হুকটি `Filter Play` অপশনগুলির মাধ্যমে প্রয়োগ করা ফিল্টারগুলি এবং সার্চ বারে প্রদত্ত যেকোনো মানও বিবেচনা করে। 145 | 146 | **ইনপুট প্যারামিটার:** 147 | 148 | - None 149 | 150 | **রিটার্নকৃত মান** - অ্যারে 151 | 152 | - `isLoading` স্টেট ডাটা ফেচ হওয়ার সময় লোডার প্রদর্শন করে। 153 | - `error` অবজেক্টটি ডেটা ফেচ করার সময় সংঘটিত কোনো এরর সম্পর্কে বিস্তারিত তথ্য ধারণ করে। 154 | - `data` অবজেক্টটি অ্যারে আকারে play-সমূহের তালিকা ধারণ করে। 155 | 156 | **উদাহরণ** 157 | 158 | ```jsx 159 | const [loading, error, plays] = useGetPlays(); 160 | 161 | if (loading) { 162 | return ; 163 | } 164 | 165 | if (plays?.length === 0 || error) { 166 | return ( 167 |
168 | 169 |

Play not found

170 |

171 | Please change your search or adjust filters to find plays. 172 |

173 |
174 | ); 175 | } 176 | ``` 177 | 178 | ## useGitHub 179 | 180 | `useGitHub` হুকটি প্রদত্ত ব্যবহারকারীর সম্পর্কে তথ্য পেতে গিটহাব API-কে ফেচ করে। 181 | 182 | **ইনপুট প্যারামিটার:** 183 | 184 | - `username`: গিটহাব ব্যবহারকারীর নাম 185 | 186 | **রিটার্নকৃত মান** - অবজেক্ট 187 | 188 | অ্যারে 189 | 190 | - `isLoading` স্টেট ডাটা ফেচ হওয়ার সময় লোডার প্রদর্শন করে। 191 | - `error` অবজেক্টটি ডেটা ফেচ করার সময় সংঘটিত কোনো এরর সম্পর্কে বিস্তারিত তথ্য ধারণ করে। 192 | - `data` অবজেক্টটি গিটহাব ব্যবহারকারীর তথ্য ধারণ করে। 193 | 194 | **উদাহরণ** 195 | 196 | ```jsx 197 | const { data, error, isLoading } = useGitHub(`username`); 198 | 199 | return ( 200 |
201 | {loading &&

Loading...

} 202 | {error &&

{error?.message ?? "Something went wrong"}

} 203 | {data &&

{data.login}

} 204 |
205 | ); 206 | ``` 207 | 208 | ## useLikePlays 209 | 210 | এই কাস্টম হুকটি `likePlay` এবং `unlikePlay` ফাংশনগুলির চারপাশে একটি অ্যাবস্ট্র্যাকশন তৈরি করে। 211 | 212 | **ইনপুট প্যারামিটার:** 213 | 214 | - None 215 | 216 | **রিটার্নকৃত মান** - অবজেক্ট 217 | 218 | - `likePlay` ফাংশন একটি `playObject` গ্রহণ করে যা `liked` করা হয়েছে 219 | - `unlikePlay` ফাংশন একটি `playObject` গ্রহণ করে যা `unliked` করা হয়েছে 220 | 221 | **উদাহরণ** 222 | 223 | ```jsx 224 | const { likePlay, unLikePlay } = useLikePlays(); 225 | // ... code processing 226 | await likePlay({ play_id: play.id, user_id: userId }); 227 | // ... some more processing 228 | await unLikePlay({ ...mutationObj, liked: !likeObj.liked }); 229 | ``` 230 | 231 | ## useLocalStorage 232 | 233 | এই হুকটি [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)-এর ভ্যালুগুলি পেতে এবং সেট করতে একটি অ্যাবস্ট্র্যাকশন ফাংশন হিসাবে কাজ করে। 234 | 235 | **ইনপুট প্যারামিটার:** 236 | 237 | - `key` 238 | - `initialValue` 239 | 240 | **রিটার্নকৃত মান** - অ্যারে 241 | 242 | - `storedValue` প্রদত্ত `key` এর বিপরীতে সংরক্ষিত মান 243 | - `setValue` লোকালস্টোরেজে `storedValue` ডেটা আপডেট করার জন্য একটি ফাংশন 244 | 245 | **উদাহরণ** 246 | 247 | ```jsx 248 | const [localStoreExpenses, setLocalStoreExpenses] = useLocalStorage( 249 | "et-expenses", 250 | [] 251 | ); 252 | // accessing the stored value 253 | const expense = localStoreExpenses[localStoreExpenses.length - 1]; 254 | // storing new values against the same key `et-expenses` 255 | setLocalStoreExpenses([...localStoreExpenses, data]); 256 | ``` 257 | -------------------------------------------------------------------------------- /i18n/bn/docusaurus-plugin-content-docs/current/contribution-guide.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # কন্ট্রিবিউশন গাইড 6 | 7 | [ReactPlay Docs](https://docs.reactplay.io/) হলো আমাদের ReactPlay-এর অফিসিয়াল ডকুমেন্টেশন। এর নাম থেকেই বুঝা যায় এতে ReactPlay-এর বিভিন্ন দিক এবং ফিচারসমূহের ডকুমেন্টেশন অন্তর্ভুক্ত রয়েছে। 8 | 9 | আপনি যদি এতদূর এসে থাকেন, তবে আপনি ইতিমধ্যে নিজেকে ReactPlay-এর একটি অংশ হিসেবে বিবেচনা করতে পারেন। এবং মনে করুন, আমরাও আপনাকে গ্রহণ করেছি। আমরা একটি পরিবার!! 🎉 আমরা একসাথে এগিয়ে যাব। 10 | 11 | :::tip 12 | ওপেন সোর্সে নতুন? আপনার ওপেন সোর্স যাত্রা শুরু করতে এই [গাইডটি ](https://opensource.guide/how-to-contribute/) অনুসরণ করুন 🚀 13 | ::: 14 | 15 | ## শুরু করুন 16 | 17 | প্রথম ধাপ হিসাবে আমরা আপনাকে আমাদের কন্ট্রিবিউশন এবং আচরণবিধির গাইডসমূহ পড়ার পরামর্শ দিই। আমাদের কাজের বেশিরভাগই [react-play](https://github.com/reactplay/react-play) এবং [docs](https://github.com/reactplay/docs) রিপোজিটরিতে থাকে। আমাদের প্রয়োজনীয়তা সম্পর্কে জানতে, অনুগ্রহ করে প্রদত্ত রিপোজিটরির `CONTRIBUTING.md` এবং `CODE_OF_CONDUCT.md` ফাইলগুলি পড়ুন। 18 | 19 | ## কন্ট্রিবিউশনের ধরণ 20 | 21 | ReactPlay এ আমরা `code` এবং `no-code` উভই ডোমেইন হতে কন্ট্রিবিউশনের জন্য উৎসাহের সাথে অপেক্ষা করছি। কাজেই আপনি আপনার টেকনিক্যাল জ্ঞানের পরিসরের বাইরেও অনেক ক্ষেত্র পাবেন যেখানে আপনি কন্ট্রিবিউট করতে পারবেন। 22 | 23 | আমরা `typo` সমস্যাও পছন্দ করি। আপনি যদি কোথাও কোনো typo খুঁজে পান, আমাদের সাথে যোগাযোগ করুন এবং সংশোধন সহ একটি Pull Request তৈরি করুন৷ 24 | 25 | ## কন্ট্রিবিউশনের ক্ষেত্র 26 | 27 | - আপনি যদি একজন শিক্ষার্থী হন এবং একজন ডেভেলপার হিসেবে আপনার অভিজ্ঞতা বাড়াতে চান এবং `OSS contribution` পয়েন্ট স্কোর করতে চান তাহলে আপনি [Play তৈরি করতে পারেন।](https://docs.reactplay.io/How-To-Guides/how-to-create-play) 28 | - আপনি যদি একজন নিয়মিত ব্যবহারকারী হন এবং মনে করেন কোনো ফিচার উপযুক্ত হতে পারে, তবে আপনি একটি [ফিচারের অনুরোধ করতে পারেন।](https://github.com/reactplay/react-play/issues/new?assignees=&labels=&template=feature-request.yml&title=%E2%9C%A8+%5BFeature+request%5D%3A+). 29 | - একটি bug পাওয়া গেছে? দারুণ! এগিয়ে যান এবং একটি [bug report](https://github.com/reactplay/react-play/issues/new?assignees=&labels=bug&template=bug-report.yml&title=%F0%9F%90%9B+%5BBug+report%5D%3A+) ওপেন করুন। 30 | - এছাড়াও আপনি [docs](https://github.com/reactplay/docs) উন্নত করতে পারেন যা আমাদের ব্যাপকভাবে সাহায্য করবে।. 31 | - আপনি আমাদেরকে ফিডব্যাক, পরামর্শ দিতে পারেন এবং আমাদের UX উন্নত করতে সহায়তা করতে পারেন। 32 | - আপনি যদি পাবলিকের সাথে ইন্টারঅ্যাকশনে আগ্রহী হন, তাহলে আপনাকে আমাদের [Twitter](https://twitter.com/ReactPlayIO), [LinkedIn](https://www.linkedin.com/company/reactplay/) এবং [Facebook](https://web.facebook.com/groups/reactplay) এর মতো সোশ্যাল মিডিয়া পরিচালনা করার জন্য স্বাগতম। 33 | - যদি লেখার দক্ষতা থাকে, তাহলে আপনি আমাদের [blog](https://blog.reactplay.io/)-এ আর্টিকেল প্রকাশ করতে পারেন। 34 | - আপনি আমাদের প্রতিনিধি হিসাবে থাকতে পারেন এবং আমাদের ইভেন্ট, স্পন্সরগণ এবং সমর্থনে সাহায্য করতে পারেন। 35 | 36 | আপনি কন্ট্রিবিউটর হিসাবে উপরে উল্লিখিত কোনো কাজ বা এই সমস্ত কাজের যেকোনো সংমিশ্রণ করে আপনার পক্ষ থেকে করতে পারেন। আমরা আমাদের কন্ট্রিবিউটরদের ভালবাসি এবং আপনি যা নিয়ে আসছেন তাকে আমরা আমাদের সর্বোচ্চ দিয়ে সম্ভাবনাপূর্ণ করতে চেষ্টা করব। 37 | 38 | :::tip 39 | যদি আপনি একজন বিগিনার হন, তবে issues পেইজে good first issue লেবেলটি দেখুন। 40 | ::: 41 | 42 | ## স্বীকৃতি 43 | 44 | ReactPlay [বিভিন্ন ইভেন্ট](https://hustles.reactplay.io/) আয়োজন করে যেখানে আপনি অংশগ্রহণ করতে পারেন এবং ReactPlay সংগঠনে আপনার অবদানের জন্য পুরস্কার এবং স্বীকৃতি পেতে পারেন। 45 | -------------------------------------------------------------------------------- /i18n/bn/docusaurus-plugin-content-docs/current/database-schema.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # ডাটাবেস স্কিমা 6 | 7 | এই পৃষ্ঠাটি আলোচনা করবে - ReactPlay ডাটাবেস স্কিমা সম্পর্কে 8 | -------------------------------------------------------------------------------- /i18n/bn/docusaurus-plugin-content-docs/current/img/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reactplay/docs/d4608aea13175877b78248f65578095f53eac9e6/i18n/bn/docusaurus-plugin-content-docs/current/img/banner.png -------------------------------------------------------------------------------- /i18n/bn/docusaurus-plugin-content-docs/current/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: / 3 | sidebar_position: 1 4 | --- 5 | 6 | # ReactPlay কি? 7 | 8 | ![banner](./img/banner.png) 9 | 10 | **ReactPlay** হল একটি ওপেনসোর্স প্ল্যাটফর্ম যেখানে ডেভেলপার কমিউনিটিতে রিয়েক্টজেএস প্রজেক্ট **তৈরি, শেখা এবং শেয়ার** করা হয়। এখানে আমরা সৃজনশীলতার মাধ্যমে শেখার উপর জোর দিই। তাই শেখার আগে তৈরি করুন। 11 | 12 | **তৈরি করুন** → আপনি একজন শিক্ষার্থী হিসাবে যেকোনো প্রজেক্ট তৈরি করার পূর্ণ স্বাধীনতা রাখেন। আপনার কাছে কোনো আইডিয়া আছে এবং তা বাস্তবায়ন করতে চান, আপনি সেটি করতে পারেন। আপনি ইন্টারনেটে দেখা কিছু পুনরায় সৃষ্টি করতে চান, সেটি করতে আপনাকে স্বাগতম। অথবা আপনি আমাদের অসাধারণ ডেভেলপার কমিউনিটির সাবমিট করা [plays](https://reactplay.io/plays) ব্রাউজ করে অনুপ্রাণিত হতে পারেন। 13 | 14 | **শিখুন** → একটি প্রজেক্ট তৈরি করতে আপনাকে অনেকগুলো টেকনোলজি শিখতে হবে। এটা সুস্পষ্ট। কিন্তু, **ReactPlay**-এ শেখা কি সেখানেই থেমে যায়? আসলে তা না। এখানে, আপনি আপনার প্রজেক্ট জমা দিলে, কোডটি অভিজ্ঞ ডেভেলপারদের দ্বারা একটি গুরুত্বপূর্ণ [code review](https://en.wikipedia.org/wiki/Code_review) প্রক্রিয়ার মাধ্যমে যায়। এই প্রক্রিয়ায়, অভিজ্ঞ ডেভেলপারদের সঙ্গে নিয়মিত আলোচনা হয় যেখানে আপনি [industry best practices](https://github.com/reactplay/react-play/wiki/ReactPlay-Code-Review-Checklist), পারফরম্যান্স, ইত্যাদি সম্পর্কে শিখতে পারবেন... _সংক্ষেপে বলতে গেলে, আপনি "Think In React" করা শিখবেন।_. 15 | 16 | **শেয়ার করুন** → কোড পর্যবেক্ষণ সফল হওয়ার পরে, আপনার play-টি গ্রহন করা হবে এবং আপনি তখন **ReactPlay** কমিউনিটির অংশ হিসেবে গণ্য হবেন, ইয়ে!! 🥳 এটি একটি ওপেন-সোর্স কন্ট্রিবিউশন হিসাবেও গণ্য করা হবে এবং আপনার কাজটি ReactPlay প্ল্যাটফর্মে অন্যরা গবেষণা করতে পারবে। যখন কেউ আপনার প্রজেক্ট থেকে শিখতে শুরু করবে এবং কিছু জিনিস সম্পর্কে আপনার কাছে প্রশ্ন করবে কিভাবে আপনি ঐ বিষয়টি অর্জন করেছেন তা জিজ্ঞাসা করবে তখন আপনি শিখতে থাকবেন। অথবা নতুন একটি ফিচারের অনুরোধ করবে এবং আরও অন্যান্য উপায়ে। 17 | 18 | ## ReactPlay-তে _Play_ 19 | 20 | আমরা অনেক বার Play শব্দটি শুনেছি। এটি কি? যদি আপনি অনুমান করতে পারেন, তবে অভিনন্দন! Play হলো প্রজেক্ট যা আপনি ReactPlay-te জমা দিবেন। 21 | 22 | ## 🔥 শুরু করুন 23 | 24 | আপনি তৈরি করতে চান এমন একটি প্রজেক্ট সম্পর্কে ইতিমধ্যে আইডিয়া আছে কি? অপেক্ষা করবেন না। এখুনি শুরু করুন। [ReactPlay.io](https://reactplay.io/) > `+Create` এ যান। যে পেজটি খুলবে সেখানে দেওয়া নির্দেশাবলী অনুসরণ করুন। 25 | -------------------------------------------------------------------------------- /i18n/bn/docusaurus-plugin-content-docs/current/local-development.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # লোকাল ডেভেলপমেন্ট 6 | 7 | আপনি নিম্নলিখিত কারণে `react-play` রিপোটি সেটআপ করতে চানঃ 8 | 9 | - `react-play` রিপোতে সাধারণভাবে কন্ট্রিবিউট শুরু করার জন্য অনুগ্রহ করে [কন্ট্রিবিউশন গাইডলাইন ](https://github.com/reactplay/react-play/blob/main/CONTRIBUTING.md) দেখুন। 10 | 11 | - আপনি নতুন একটি `Play` (যা হলো একটি রিয়েক্ট প্রজেক্ট) তৈরি করতে চান অথবা কন্ট্রিবিউটর হিসাবে একটি বিদ্যমান `Play` সংশোধন করতে চান। বিস্তারিত জানতে অনুগ্রহ করে [Play তৈরির গাইড](./How-To-Guides/how-to-create-play.md) দেখুন। 12 | 13 | এখানে `react-play` রিপোটির সেটআপের সংক্ষিপ্ত পর্যালোচনা দেওয়া হলোঃ 14 | 15 | ## রিপোটি ফর্ক করুন এবং ক্লোন করুন। 16 | 17 | প্রথমে, আপনাকে `react-play` রিপোটি ফর্ক করতে হবে। আপনি এটা করতে পারেন রিপোটির উপরের ডান প্রান্তের `Fork` বাটনে ক্লিক করে। যদি আপনি ফর্কিং সম্পর্কে নতুন হন তবে অনুগ্রহ করে শুরু করতে এই [YouTube গাইড](https://www.youtube.com/watch?v=h8suY-Osn8Q) দেখুন। 18 | 19 | 20 | 21 | ফর্ক করার পরে, আপনি ফর্ককৃত রিপোটির উপরে ডান দিকের শীর্ষ কোণে অবস্থিত `Clone or Download` বাটনে ক্লিক করে রিপোটি ক্লোন করতে পারেন। 22 | 23 | রিপোটি ক্লোন করার পরে অনুগ্রহ করে `cd <ফোল্ডার-নাম>` কমান্ড ব্যবহার করে ডিরেক্টরি পরিবর্তন করুন। 24 | 25 | ## ডিপেন্ডেন্সিগুলো ইনস্টল করুন। 26 | 27 | পরবর্তীতে, `react-play` রিপোতে নিম্নোক্ত কমান্ড চালানোর মাধ্যমে ডিপেন্ডেন্সিগুলো ইনস্টল করুনঃ 28 | 29 | ```bash 30 | npm install 31 | 32 | or 33 | 34 | yarn install 35 | ``` 36 | 37 |
38 | আপনার পিসি-তে yarn ইনস্টল করা না থাকলে নিম্নলিখিত ধাপগুলি অনুসরণ করে ইনস্টল করুন। 39 | 40 | **Windows** 41 | 42 | 1. আপনার কমান্ড প্রম্পটকে অ্যাডমিনিস্ট্রেটর হিসাবে খুলুন। 43 | 2. `corepack enable` লিখুন এবং enter চাপুন। 44 | 3. তারপর `npm install --global yarn` লিখুন এবং enter চাপুন। 45 | 46 | **Linux** 47 | 48 | 1. অনুগ্রহ করে টার্মিনাল খুলে `npm install --global yarn` কমান্ডটি চালান। 49 | 50 | **MacOS** 51 | 52 | 1. অনুগ্রহ করে টার্মিনাল খুলে `npm install --global yarn` 53 | অথবা 54 | `brew install yarn` কমান্ডটি চালান। 55 | 56 | **অথবা প্যাকেজ ডাউনলোড করুন** 57 | 58 | উপরে উল্লিখিত প্রক্রিয়া অনুসরণ করে Yarn ইনস্টল করতে না পারলে, আপনি সহজভাবে প্যাকেজটি ডাউনলোড করে ইনস্টল করতে পারেন। Yarn এর অফিসিয়াল ওয়েবসাইটে গিয়ে সেখানে "Alternative" সেকশনটি ভিজিট করুন; সেখানে Windows, Linux বা Mac এর জন্য Yarn ডাউনলোড করার জন্য আপনাকে ভার্সন নির্বাচন করতে বলা হবে।`https://classic.yarnpkg.com/en/docs/install#windows-stable` 59 | 60 |
61 | 62 | > **দ্রষ্টব্য**: `ReactPlay` React 18 এ চালানো হয়। তবে, আমাদের কিছু ডিপেন্ডেন্সি এখনও ভার্সন 18 এ আপগ্রেড করেনি। তাই যদি ডিপেন্ডেন্সি ইনস্টল করতে সমস্যা হয়, তবে নিম্নলিখিত কমান্ড ব্যবহার করুন। 63 | 64 | ```bash 65 | npm install --legacy-peer-deps 66 | ``` 67 | 68 | ## আপনার প্রজেক্ট ফোল্ডারের রুটে একটি .env ফাইল তৈরি করুন এবং নিম্নলিখিত কনটেন্ট লিখুন। 69 | 70 | ```bash 71 | REACT_APP_PLAY_API_URL=https://api.github.com/repos/reactplay 72 | REACT_APP_NHOST_BACKEND_URL=https://rgkjmwftqtbpayoyolwh.nhost.run 73 | REACT_APP_NHOST_VERSION=v1 74 | REACT_APP_NHOST_ENDPOINT=graphql 75 | REACT_APP_PLAY_WEB_SVC=https://api.reactplay.io/.netlify/functions/server 76 | DISABLE_ESLINT_PLUGIN=true 77 | REACT_APP_ACTIVITIES_ON=true 78 | REACT_APP_ACTIVITY_ID=hackrplay 79 | REACT_APP_DADJOKES_URL=https://jokeapi-v2.p.rapidapi.com/joke/ 80 | REACT_APP_DADJOKES_APIKEY='b71df95c75msha446fab91d0e935p1d0262jsn1d938cb85502' 81 | REACT_APP_DADJOKES_APIHOST='jokeapi-v2.p.rapidapi.com' 82 | ``` 83 | 84 | ## ডেভেলপমেন্ট মোড চালু করুন 85 | 86 | ডেভেলপমেন্ট মোডে অ্যাপটি চালানোর জন্য নিম্নলিখিত কমান্ডটি ব্যবহার করুন: 87 | 88 | ```bash 89 | npm start 90 | 91 | or 92 | 93 | yarn start 94 | ``` 95 | 96 | **দ্রষ্টব্য**: `start` স্ক্রিপ্ট স্বয়ংক্রিয়ভাবে "linters" প্রক্রিয়াকে কল করে। আপনি যদি `lint` ছাড়াই অ্যাপটি চালাতে চান তাহলে `start:nolint` ব্যবহার করুন। 97 | তবে নিশ্চিত হয়ে নিন যে আপনি আপনার কোড commit করার আগে কমপক্ষে একবার start স্ক্রিপ্টটি চালাচ্ছেন। linter এররযুক্ত কোড রিভিউ করা হবে না। 98 | 99 | এটি ডেভেলপমেন্ট মোডে অ্যাপটি চালায়। আপনার ব্রাউজারে দেখতে এটি [http://localhost:3000](http://localhost:3000) লিঙ্কে ওপেন করুন। 100 | 101 | আপনি কোডে পরিবর্তন করলে পেজটি রিলোড হবে। আপনি কনসোলে যেকোনো lint এরর দেখতে পারবেন। 102 | 103 | ## কোড ফরম্যাট করুন এবং লিন্ট করুন 104 | 105 | কোড ফরম্যাট এবং লিন্ট করার জন্য নিম্নলিখিত কমান্ড ব্যবহার করুন: 106 | 107 | **কোড ফরম্যাট করুন** 108 | 109 | ```bash 110 | yarn run format 111 | 112 | or 113 | 114 | npm run format 115 | ``` 116 | 117 | **লিন্টিং ইস্যু চেক করতে কোড লিন্ট করুন** 118 | 119 | ```bash 120 | yarn run lint 121 | 122 | or 123 | 124 | npm run lint 125 | ``` 126 | 127 | **লিন্টিং ইস্যুগুলি ঠিক করতে** 128 | 129 | ```bash 130 | yarn run lint:fix 131 | 132 | or 133 | 134 | npm run lint:fix 135 | ``` 136 | 137 | ## প্রোডাকশনের জন্য অ্যাপটি বিল্ড করুন 138 | 139 | প্রোডাকশনের জন্য অ্যাপটি বিল্ড করতে নিম্নলিখিত কমান্ডটি ব্যবহার করুন: 140 | 141 | ```bash 142 | yarn build 143 | 144 | or 145 | 146 | npm build 147 | ``` 148 | 149 | এটি অ্যাপটিকে `build` ফোল্ডারের মাধ্যমে প্রোডাকশনে বিল্ড করে। এটি সঠিকভাবে React কে প্রোডাকশন মোডে বান্ডেল করে এবং বিল্ডটি সেরা পারফরম্যান্সের জন্য অপটিমাইজ করে। বিল্ডটি মিনিফাইড হয় এবং ফাইলনেমে হ্যাশগুলি থাকে। 150 | 151 | ## অ্যাপটি locally টেস্ট করুন (E2E with Cypress) 152 | 153 | নিম্নলিখিত কমান্ড ব্যবহার করে Cypress locally চালান। 154 | 155 | ```bash 156 | yarn cypress:open 157 | 158 | or 159 | 160 | npm cypress:open 161 | ``` 162 | 163 | এটি Cypress ড্যাশবোর্ড খুলবে, যার মাধ্যমে আপনাকে `E2E Testing` সিলেক্ট করতে হবে। 164 | সিলেক্ট করা হলে, টেস্ট করার জন্য আপনার পছন্দসই ব্রাউজার সিলেক্ট করার অপশন পাবেন। ব্রাউজার নির্বাচন করার পর আপনাকে `Start E2E Testing in ` ক্লিক করতে হবে। নির্বাচিত ব্রাউজারটি একটি পপ আপ দেখাবে এবং আপনি Cypress টেস্টগুলির একটি তালিকা দেখতে পাবেন। টেস্ট শুরু করতে test-এ ক্লিক করুন। 165 | -------------------------------------------------------------------------------- /i18n/bn/docusaurus-plugin-content-docs/current/troubleshooting-guide.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 7 3 | --- 4 | 5 | # সমস্যা সমাধানের গাইড 6 | 7 | কোনো সমস্যার সম্মুখীন? আমাদের সমস্যা সমাধানের গাইড দেখুন। 8 | -------------------------------------------------------------------------------- /i18n/bn/docusaurus-theme-classic/footer.json: -------------------------------------------------------------------------------- 1 | { 2 | "link.title.Docs": { 3 | "message": "ডকুমেন্টেশন", 4 | "description": "The title of the footer links column with title=Docs in the footer" 5 | }, 6 | "link.title.Community": { 7 | "message": "কমিউনিটি", 8 | "description": "The title of the footer links column with title=Community in the footer" 9 | }, 10 | "link.title.More": { 11 | "message": "আরও", 12 | "description": "The title of the footer links column with title=More in the footer" 13 | }, 14 | "link.item.label.Guides": { 15 | "message": "গাইড", 16 | "description": "The label of footer link with label=Guides linking to /" 17 | }, 18 | "link.item.label.Discord": { 19 | "message": "ডিসকর্ড", 20 | "description": "The label of footer link with label=Discord linking to https://discord.gg/vrTxWUP8Am" 21 | }, 22 | "link.item.label.Twitter": { 23 | "message": "টুইটার", 24 | "description": "The label of footer link with label=Twitter linking to https://twitter.com/reactplayio" 25 | }, 26 | "link.item.label.LinkedIn": { 27 | "message": "লিঙ্কডইন", 28 | "description": "The label of footer link with label=LinkedIn linking to https://www.linkedin.com/company/reactplay/" 29 | }, 30 | "link.item.label.Blog": { 31 | "message": "ব্লগ", 32 | "description": "The label of footer link with label=Blog linking to https://blog.reactplay.io/" 33 | }, 34 | "link.item.label.GitHub": { 35 | "message": "গিটহাব", 36 | "description": "The label of footer link with label=GitHub linking to https://github.com/reactplay/docs/" 37 | }, 38 | "copyright": { 39 | "message": "কপিরাইট © ২০২৩ হোম। docusaurus দিয়ে তৈরি করা।", 40 | "description": "The footer copyright" 41 | } 42 | } -------------------------------------------------------------------------------- /i18n/bn/docusaurus-theme-classic/navbar.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": { 3 | "message": "হোম", 4 | "description": "The title in the navbar" 5 | }, 6 | "logo.alt": { 7 | "message": "হোম লোগো", 8 | "description": "The alt text of navbar logo" 9 | }, 10 | "item.label.Guides": { 11 | "message": "গাইডস", 12 | "description": "Navbar item with label Guides" 13 | }, 14 | "item.label.Blog": { 15 | "message": "ব্লগ", 16 | "description": "Navbar item with label Blog" 17 | }, 18 | "item.label.ReactPlay": { 19 | "message": "ReactPlay", 20 | "description": "Navbar item with label ReactPlay" 21 | }, 22 | "item.label.GitHub": { 23 | "message": "গিটহাব", 24 | "description": "Navbar item with label GitHub" 25 | } 26 | } -------------------------------------------------------------------------------- /i18n/en/code.json: -------------------------------------------------------------------------------- 1 | { 2 | "theme.ErrorPageContent.title": { 3 | "message": "This page crashed.", 4 | "description": "The title of the fallback page when the page crashed" 5 | }, 6 | "theme.NotFound.title": { 7 | "message": "Page Not Found", 8 | "description": "The title of the 404 page" 9 | }, 10 | "theme.NotFound.p1": { 11 | "message": "We could not find what you were looking for.", 12 | "description": "The first paragraph of the 404 page" 13 | }, 14 | "theme.NotFound.p2": { 15 | "message": "Please contact the owner of the site that linked you to the original URL and let them know their link is broken.", 16 | "description": "The 2nd paragraph of the 404 page" 17 | }, 18 | "theme.admonition.note": { 19 | "message": "note", 20 | "description": "The default label used for the Note admonition (:::note)" 21 | }, 22 | "theme.admonition.tip": { 23 | "message": "tip", 24 | "description": "The default label used for the Tip admonition (:::tip)" 25 | }, 26 | "theme.admonition.danger": { 27 | "message": "danger", 28 | "description": "The default label used for the Danger admonition (:::danger)" 29 | }, 30 | "theme.admonition.info": { 31 | "message": "info", 32 | "description": "The default label used for the Info admonition (:::info)" 33 | }, 34 | "theme.admonition.caution": { 35 | "message": "caution", 36 | "description": "The default label used for the Caution admonition (:::caution)" 37 | }, 38 | "theme.BackToTopButton.buttonAriaLabel": { 39 | "message": "Scroll back to top", 40 | "description": "The ARIA label for the back to top button" 41 | }, 42 | "theme.blog.archive.title": { 43 | "message": "Archive", 44 | "description": "The page & hero title of the blog archive page" 45 | }, 46 | "theme.blog.archive.description": { 47 | "message": "Archive", 48 | "description": "The page & hero description of the blog archive page" 49 | }, 50 | "theme.blog.paginator.navAriaLabel": { 51 | "message": "Blog list page navigation", 52 | "description": "The ARIA label for the blog pagination" 53 | }, 54 | "theme.blog.paginator.newerEntries": { 55 | "message": "Newer Entries", 56 | "description": "The label used to navigate to the newer blog posts page (previous page)" 57 | }, 58 | "theme.blog.paginator.olderEntries": { 59 | "message": "Older Entries", 60 | "description": "The label used to navigate to the older blog posts page (next page)" 61 | }, 62 | "theme.blog.post.paginator.navAriaLabel": { 63 | "message": "Blog post page navigation", 64 | "description": "The ARIA label for the blog posts pagination" 65 | }, 66 | "theme.blog.post.paginator.newerPost": { 67 | "message": "Newer Post", 68 | "description": "The blog post button label to navigate to the newer/previous post" 69 | }, 70 | "theme.blog.post.paginator.olderPost": { 71 | "message": "Older Post", 72 | "description": "The blog post button label to navigate to the older/next post" 73 | }, 74 | "theme.blog.post.plurals": { 75 | "message": "One post|{count} posts", 76 | "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" 77 | }, 78 | "theme.blog.tagTitle": { 79 | "message": "{nPosts} tagged with \"{tagName}\"", 80 | "description": "The title of the page for a blog tag" 81 | }, 82 | "theme.tags.tagsPageLink": { 83 | "message": "View All Tags", 84 | "description": "The label of the link targeting the tag list page" 85 | }, 86 | "theme.colorToggle.ariaLabel": { 87 | "message": "Switch between dark and light mode (currently {mode})", 88 | "description": "The ARIA label for the navbar color mode toggle" 89 | }, 90 | "theme.colorToggle.ariaLabel.mode.dark": { 91 | "message": "dark mode", 92 | "description": "The name for the dark color mode" 93 | }, 94 | "theme.colorToggle.ariaLabel.mode.light": { 95 | "message": "light mode", 96 | "description": "The name for the light color mode" 97 | }, 98 | "theme.docs.DocCard.categoryDescription": { 99 | "message": "{count} items", 100 | "description": "The default description for a category card in the generated index about how many items this category includes" 101 | }, 102 | "theme.docs.breadcrumbs.navAriaLabel": { 103 | "message": "Breadcrumbs", 104 | "description": "The ARIA label for the breadcrumbs" 105 | }, 106 | "theme.docs.paginator.navAriaLabel": { 107 | "message": "Docs pages navigation", 108 | "description": "The ARIA label for the docs pagination" 109 | }, 110 | "theme.docs.paginator.previous": { 111 | "message": "Previous", 112 | "description": "The label used to navigate to the previous doc" 113 | }, 114 | "theme.docs.paginator.next": { 115 | "message": "Next", 116 | "description": "The label used to navigate to the next doc" 117 | }, 118 | "theme.docs.tagDocListPageTitle.nDocsTagged": { 119 | "message": "One doc tagged|{count} docs tagged", 120 | "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" 121 | }, 122 | "theme.docs.tagDocListPageTitle": { 123 | "message": "{nDocsTagged} with \"{tagName}\"", 124 | "description": "The title of the page for a docs tag" 125 | }, 126 | "theme.docs.versionBadge.label": { 127 | "message": "Version: {versionLabel}" 128 | }, 129 | "theme.docs.versions.unreleasedVersionLabel": { 130 | "message": "This is unreleased documentation for {siteTitle} {versionLabel} version.", 131 | "description": "The label used to tell the user that he's browsing an unreleased doc version" 132 | }, 133 | "theme.docs.versions.unmaintainedVersionLabel": { 134 | "message": "This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.", 135 | "description": "The label used to tell the user that he's browsing an unmaintained doc version" 136 | }, 137 | "theme.docs.versions.latestVersionSuggestionLabel": { 138 | "message": "For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).", 139 | "description": "The label used to tell the user to check the latest version" 140 | }, 141 | "theme.docs.versions.latestVersionLinkLabel": { 142 | "message": "latest version", 143 | "description": "The label used for the latest version suggestion link label" 144 | }, 145 | "theme.common.editThisPage": { 146 | "message": "Edit this page", 147 | "description": "The link label to edit the current page" 148 | }, 149 | "theme.common.headingLinkTitle": { 150 | "message": "Direct link to {heading}", 151 | "description": "Title for link to heading" 152 | }, 153 | "theme.lastUpdated.atDate": { 154 | "message": " on {date}", 155 | "description": "The words used to describe on which date a page has been last updated" 156 | }, 157 | "theme.lastUpdated.byUser": { 158 | "message": " by {user}", 159 | "description": "The words used to describe by who the page has been last updated" 160 | }, 161 | "theme.lastUpdated.lastUpdatedAtBy": { 162 | "message": "Last updated{atDate}{byUser}", 163 | "description": "The sentence used to display when a page has been last updated, and by who" 164 | }, 165 | "theme.navbar.mobileVersionsDropdown.label": { 166 | "message": "Versions", 167 | "description": "The label for the navbar versions dropdown on mobile view" 168 | }, 169 | "theme.tags.tagsListLabel": { 170 | "message": "Tags:", 171 | "description": "The label alongside a tag list" 172 | }, 173 | "theme.AnnouncementBar.closeButtonAriaLabel": { 174 | "message": "Close", 175 | "description": "The ARIA label for close button of announcement bar" 176 | }, 177 | "theme.blog.sidebar.navAriaLabel": { 178 | "message": "Blog recent posts navigation", 179 | "description": "The ARIA label for recent posts in the blog sidebar" 180 | }, 181 | "theme.CodeBlock.copied": { 182 | "message": "Copied", 183 | "description": "The copied button label on code blocks" 184 | }, 185 | "theme.CodeBlock.copyButtonAriaLabel": { 186 | "message": "Copy code to clipboard", 187 | "description": "The ARIA label for copy code blocks button" 188 | }, 189 | "theme.CodeBlock.copy": { 190 | "message": "Copy", 191 | "description": "The copy button label on code blocks" 192 | }, 193 | "theme.CodeBlock.wordWrapToggle": { 194 | "message": "Toggle word wrap", 195 | "description": "The title attribute for toggle word wrapping button of code block lines" 196 | }, 197 | "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": { 198 | "message": "Toggle the collapsible sidebar category '{label}'", 199 | "description": "The ARIA label to toggle the collapsible sidebar category" 200 | }, 201 | "theme.NavBar.navAriaLabel": { 202 | "message": "Main", 203 | "description": "The ARIA label for the main navigation" 204 | }, 205 | "theme.navbar.mobileLanguageDropdown.label": { 206 | "message": "Languages", 207 | "description": "The label for the mobile language switcher dropdown" 208 | }, 209 | "theme.TOCCollapsible.toggleButtonLabel": { 210 | "message": "On this page", 211 | "description": "The label used by the button on the collapsible TOC component" 212 | }, 213 | "theme.blog.post.readMore": { 214 | "message": "Read More", 215 | "description": "The label used in blog post item excerpts to link to full blog posts" 216 | }, 217 | "theme.blog.post.readMoreLabel": { 218 | "message": "Read more about {title}", 219 | "description": "The ARIA label for the link to full blog posts from excerpts" 220 | }, 221 | "theme.blog.post.readingTime.plurals": { 222 | "message": "One min read|{readingTime} min read", 223 | "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" 224 | }, 225 | "theme.docs.breadcrumbs.home": { 226 | "message": "Home page", 227 | "description": "The ARIA label for the home page in the breadcrumbs" 228 | }, 229 | "theme.docs.sidebar.collapseButtonTitle": { 230 | "message": "Collapse sidebar", 231 | "description": "The title attribute for collapse button of doc sidebar" 232 | }, 233 | "theme.docs.sidebar.collapseButtonAriaLabel": { 234 | "message": "Collapse sidebar", 235 | "description": "The title attribute for collapse button of doc sidebar" 236 | }, 237 | "theme.docs.sidebar.closeSidebarButtonAriaLabel": { 238 | "message": "Close navigation bar", 239 | "description": "The ARIA label for close button of mobile sidebar" 240 | }, 241 | "theme.docs.sidebar.navAriaLabel": { 242 | "message": "Docs sidebar", 243 | "description": "The ARIA label for the sidebar navigation" 244 | }, 245 | "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { 246 | "message": "← Back to main menu", 247 | "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)" 248 | }, 249 | "theme.docs.sidebar.toggleSidebarButtonAriaLabel": { 250 | "message": "Toggle navigation bar", 251 | "description": "The ARIA label for hamburger menu button of mobile navigation" 252 | }, 253 | "theme.docs.sidebar.expandButtonTitle": { 254 | "message": "Expand sidebar", 255 | "description": "The ARIA label and title attribute for expand button of doc sidebar" 256 | }, 257 | "theme.docs.sidebar.expandButtonAriaLabel": { 258 | "message": "Expand sidebar", 259 | "description": "The ARIA label and title attribute for expand button of doc sidebar" 260 | }, 261 | "theme.ErrorPageContent.tryAgain": { 262 | "message": "Try again", 263 | "description": "The label of the button to try again rendering when the React error boundary captures an error" 264 | }, 265 | "theme.common.skipToMainContent": { 266 | "message": "Skip to main content", 267 | "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation" 268 | }, 269 | "theme.tags.tagsPageTitle": { 270 | "message": "Tags", 271 | "description": "The title of the tag list page" 272 | } 273 | } 274 | -------------------------------------------------------------------------------- /i18n/en/docusaurus-plugin-content-docs/current.json: -------------------------------------------------------------------------------- 1 | { 2 | "version.label": { 3 | "message": "Next", 4 | "description": "The label for version current" 5 | }, 6 | "sidebar.tutorialSidebar.category.How To Guides": { 7 | "message": "How To Guides", 8 | "description": "The label for category How To Guides in sidebar tutorialSidebar" 9 | }, 10 | "sidebar.tutorialSidebar.category.How To Guides.link.generated-index.description": { 11 | "message": "These guides will teach you how to do things in ReactPlay.", 12 | "description": "The generated-index page description for category How To Guides in sidebar tutorialSidebar" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /i18n/en/docusaurus-theme-classic/footer.json: -------------------------------------------------------------------------------- 1 | { 2 | "link.title.Docs": { 3 | "message": "Docs", 4 | "description": "The title of the footer links column with title=Docs in the footer" 5 | }, 6 | "link.title.Community": { 7 | "message": "Community", 8 | "description": "The title of the footer links column with title=Community in the footer" 9 | }, 10 | "link.title.More": { 11 | "message": "More", 12 | "description": "The title of the footer links column with title=More in the footer" 13 | }, 14 | "link.item.label.Guides": { 15 | "message": "Guides", 16 | "description": "The label of footer link with label=Guides linking to /" 17 | }, 18 | "link.item.label.Discord": { 19 | "message": "Discord", 20 | "description": "The label of footer link with label=Discord linking to https://discord.gg/vrTxWUP8Am" 21 | }, 22 | "link.item.label.Twitter": { 23 | "message": "Twitter", 24 | "description": "The label of footer link with label=Twitter linking to https://twitter.com/reactplayio" 25 | }, 26 | "link.item.label.LinkedIn": { 27 | "message": "LinkedIn", 28 | "description": "The label of footer link with label=LinkedIn linking to https://www.linkedin.com/company/reactplay/" 29 | }, 30 | "link.item.label.Blog": { 31 | "message": "Blog", 32 | "description": "The label of footer link with label=Blog linking to https://blog.reactplay.io/" 33 | }, 34 | "link.item.label.GitHub": { 35 | "message": "GitHub", 36 | "description": "The label of footer link with label=GitHub linking to https://github.com/reactplay/docs/" 37 | }, 38 | "copyright": { 39 | "message": "Copyright © 2023 Home. Built with Docusaurus.", 40 | "description": "The footer copyright" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /i18n/en/docusaurus-theme-classic/navbar.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": { 3 | "message": "Home", 4 | "description": "The title in the navbar" 5 | }, 6 | "logo.alt": { 7 | "message": "Home Logo", 8 | "description": "The alt text of navbar logo" 9 | }, 10 | "item.label.Guides": { 11 | "message": "Guides", 12 | "description": "Navbar item with label Guides" 13 | }, 14 | "item.label.Blog": { 15 | "message": "Blog", 16 | "description": "Navbar item with label Blog" 17 | }, 18 | "item.label.ReactPlay": { 19 | "message": "ReactPlay", 20 | "description": "Navbar item with label ReactPlay" 21 | }, 22 | "item.label.GitHub": { 23 | "message": "GitHub", 24 | "description": "Navbar item with label GitHub" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "docusaurus": "docusaurus", 7 | "start": "docusaurus start", 8 | "build": "docusaurus build", 9 | "swizzle": "docusaurus swizzle", 10 | "deploy": "docusaurus deploy", 11 | "clear": "docusaurus clear", 12 | "serve": "docusaurus serve", 13 | "write-translations": "docusaurus write-translations", 14 | "write-heading-ids": "docusaurus write-heading-ids" 15 | }, 16 | "dependencies": { 17 | "@docusaurus/core": "2.4.0", 18 | "@docusaurus/preset-classic": "2.4.0", 19 | "@mdx-js/react": "^1.6.22", 20 | "clsx": "^1.2.1", 21 | "prism-react-renderer": "^1.3.5", 22 | "react": "^17.0.2", 23 | "react-dom": "^17.0.2" 24 | }, 25 | "devDependencies": { 26 | "@docusaurus/module-type-aliases": "2.0.1" 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.5%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | }, 40 | "engines": { 41 | "node": ">=16.14" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /sidebars.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Creating a sidebar enables you to: 3 | - create an ordered group of docs 4 | - render a sidebar for each doc of that group 5 | - provide next/previous navigation 6 | 7 | The sidebars can be generated from the filesystem, or explicitly defined here. 8 | 9 | Create as many sidebars as you want. 10 | */ 11 | 12 | // @ts-check 13 | 14 | /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ 15 | const sidebars = { 16 | // By default, Docusaurus generates a sidebar from the docs folder structure 17 | tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }], 18 | }; 19 | 20 | module.exports = sidebars; 21 | -------------------------------------------------------------------------------- /src/components/Features/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import styles from './styles.module.css'; 4 | 5 | const FeatureList = [ 6 | { 7 | title: 'Learn', 8 | Svg: require('@site/static/img/learn.svg').default, 9 | description: ( 10 | <> 11 | Learn how to "Think in React" and build applications inspired by several 12 | plays(source code & demos). Get to the source code of it, find related 13 | article, or even a YouTube video. Learn from the expert code reviews. 14 | 15 | ), 16 | }, 17 | { 18 | title: 'Create', 19 | Svg: require('@site/static/img/create.svg').default, 20 | description: ( 21 | <> 22 | Create your own plays and own them by following a few simple steps. 23 | Learned something new? Perfect to present as a play. You can also 24 | contribute to the existing plays. Your play will be reviewed by the 25 | experts before being made public. 26 | 27 | ), 28 | }, 29 | { 30 | title: 'Socialize', 31 | Svg: require('@site/static/img/social.svg').default, 32 | description: ( 33 | <> 34 | Share your plays with the community. The best way of building in public 35 | is by sharing the learning. You can share your plays on social media 36 | platforms like Facebook, Twitter, LinkedIn, to name a few, just with a 37 | single click. 38 | 39 | ), 40 | }, 41 | ]; 42 | 43 | function Feature({ Svg, title, description }) { 44 | return ( 45 |
46 |
47 | 48 |
49 |
50 |

{title}

51 |

{description}

52 |
53 |
54 | ); 55 | } 56 | 57 | export default function HomepageFeatures() { 58 | return ( 59 |
60 |
61 |
62 | {FeatureList.map((props, idx) => ( 63 | 64 | ))} 65 |
66 |
67 |
68 | ); 69 | } 70 | -------------------------------------------------------------------------------- /src/components/Features/styles.module.css: -------------------------------------------------------------------------------- 1 | .features { 2 | display: flex; 3 | align-items: center; 4 | padding: 2rem 0; 5 | width: 100%; 6 | } 7 | 8 | .featureSvg { 9 | height: 200px; 10 | width: 200px; 11 | } 12 | -------------------------------------------------------------------------------- /src/css/custom.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Any CSS included here will be global. The classic template 3 | * bundles Infima by default. Infima is a CSS framework designed to 4 | * work well for content-centric websites. 5 | */ 6 | 7 | /* You can override the default Infima variables here. */ 8 | :root { 9 | --ifm-color-primary: #2e8555; 10 | --ifm-color-primary-dark: #29784c; 11 | --ifm-color-primary-darker: #277148; 12 | --ifm-color-primary-darkest: #205d3b; 13 | --ifm-color-primary-light: #33925d; 14 | --ifm-color-primary-lighter: #359962; 15 | --ifm-color-primary-lightest: #3cad6e; 16 | --ifm-code-font-size: 95%; 17 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); 18 | } 19 | 20 | /* For readability concerns, you should choose a lighter palette in dark mode. */ 21 | [data-theme='dark'] { 22 | --ifm-color-primary: #25c2a0; 23 | --ifm-color-primary-dark: #21af90; 24 | --ifm-color-primary-darker: #1fa588; 25 | --ifm-color-primary-darkest: #1a8870; 26 | --ifm-color-primary-light: #29d5b0; 27 | --ifm-color-primary-lighter: #32d8b4; 28 | --ifm-color-primary-lightest: #4fddbf; 29 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); 30 | } 31 | 32 | .good-first-issue-badge { 33 | background-color: #c1b8ff; 34 | color: rgb(107 33 168); 35 | padding: 4px 10px; 36 | border-radius: 20px; 37 | font-size: 0.875rem; /* 14px */ 38 | line-height: 1.25rem; /* 20px */ 39 | } 40 | .beta-badge::after { 41 | content: 'Beta'; 42 | background-color: #c1b8ff; 43 | color: #6b21a8; 44 | padding: 4px 8px; 45 | border-radius: 20px; 46 | font-size: 12px; 47 | margin-left: 8px; 48 | } 49 | -------------------------------------------------------------------------------- /src/pages/index.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * CSS files with the .module.css suffix will be treated as CSS modules 3 | * and scoped locally. 4 | */ 5 | 6 | .heroBanner { 7 | background-image: url('../../static/img/banner.png'); 8 | background-position: center center; 9 | min-height: 85vh; 10 | color: #ffffff; 11 | } 12 | 13 | @media screen and (max-width: 996px) { 14 | .heroBanner { 15 | padding: 2rem; 16 | } 17 | } 18 | 19 | .buttons { 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | } 24 | -------------------------------------------------------------------------------- /static/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reactplay/docs/d4608aea13175877b78248f65578095f53eac9e6/static/.nojekyll -------------------------------------------------------------------------------- /static/img/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reactplay/docs/d4608aea13175877b78248f65578095f53eac9e6/static/img/banner.png -------------------------------------------------------------------------------- /static/img/create.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/img/docusaurus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reactplay/docs/d4608aea13175877b78248f65578095f53eac9e6/static/img/docusaurus.png -------------------------------------------------------------------------------- /static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reactplay/docs/d4608aea13175877b78248f65578095f53eac9e6/static/img/favicon.ico -------------------------------------------------------------------------------- /static/img/learn.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reactplay/docs/d4608aea13175877b78248f65578095f53eac9e6/static/img/logo.png -------------------------------------------------------------------------------- /static/img/social.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------