{"id":19245823,"url":"https://github.com/reactplay/react-play-store","last_synced_at":"2026-02-28T11:02:13.008Z","repository":{"id":36979045,"uuid":"505025008","full_name":"reactplay/react-play-store","owner":"reactplay","description":"This repo holds the all the play information whereas the react-play repo will continue to carry the parent application","archived":false,"fork":false,"pushed_at":"2022-08-02T19:01:59.000Z","size":7986,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-01T12:49:29.514Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reactplay.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null},"funding":{"github":["atapas"]}},"created_at":"2022-06-19T05:58:43.000Z","updated_at":"2024-03-28T06:19:22.000Z","dependencies_parsed_at":"2022-08-18T01:05:30.924Z","dependency_job_id":null,"html_url":"https://github.com/reactplay/react-play-store","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactplay%2Freact-play-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactplay%2Freact-play-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactplay%2Freact-play-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactplay%2Freact-play-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reactplay","download_url":"https://codeload.github.com/reactplay/react-play-store/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250040448,"owners_count":21365106,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T17:29:29.286Z","updated_at":"2026-02-28T11:02:07.964Z","avatar_url":"https://github.com/reactplay.png","language":"JavaScript","funding_links":["https://github.com/sponsors/atapas"],"categories":[],"sub_categories":[],"readme":"# Create a Play\nThis document helps you with the steps to `Create a play` in `react-play`. You will also find the details of how to submit a play for code review.\n## 🖥️ Steps to Create a Play\nWelcome 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.\n\n\u003e **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.\n\n- Open a command prompt in your project folder.\n- Run the following command:\n  ```shell\n    yarn create-play\n    # or\n    npm run create-play\n  ```\n- This will ask a few questions about your `Play` and then perform required steps to create the play. The screen shot below shows the output of the command.\n   \u003e **Script Language**: `react-play` is equipped with both `JavaScript` and `TypeScript`. So you can use either of it as base language for your play\n   \n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"./screens/plop-create.png\" alt=\"plop create\" /\u003e\n  \u003c/p\u003e\n  \n  \u003cdetails\u003e\n    \u003csummary\u003e\n      Please expand  to find the description of the question details.\n    \u003c/summary\u003e\n    \u003cp\u003e\n      \u003ctable\u003e\n        \u003cthead\u003e\n          \u003ctr\u003e\n            \u003cth\u003eQuestion\u003c/th\u003e\n            \u003cth\u003eMandatory\u003c/th\u003e\n            \u003cth\u003eDescription\u003c/th\u003e\n          \u003c/tr\u003e\n        \u003c/thead\u003e\n        \u003ctbody\u003e\n          \u003ctr\u003e\n            \u003ctd\u003ePlease provide the name of the play\u003c/td\u003e\n            \u003ctd\u003eYes\u003c/td\u003e\n            \u003ctd\u003ePlease provide a meaningful name of the play(Example: Identity Card). This name will be visible to the users. \u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003ctd\u003eTell us more about the play\u003c/td\u003e\n            \u003ctd\u003eNo\u003c/td\u003e\n            \u003ctd\u003eIt is a description of the play for users to understand it better. The maximum number of allowed characters is 1024.\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003ctd\u003eLanguage to be used (javascript/typescript)\u003c/td\u003e\n            \u003ctd\u003eYes\u003c/td\u003e\n            \u003ctd\u003eLet the application know your choice of script. It supports both \u003cb\u003eJavaScript\u003c/b\u003e and \u003cb\u003eTypeScript\u003c/b\u003e. You can pick either of it.\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003ctd\u003eStyle to be used (css/scss)\u003c/td\u003e\n            \u003ctd\u003eYes\u003c/td\u003e\n            \u003ctd\u003eLet the application know your choice of style. It supports both \u003cb\u003ecss\u003c/b\u003e and \u003cb\u003escss\u003c/b\u003e. You can pick either of it.\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003ctd\u003eWhat is the level of this play?\u003c/td\u003e\n            \u003ctd\u003eYes\u003c/td\u003e\n            \u003ctd\u003eYou 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.\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003ctd\u003eProvide maximum of 5 tags\u003c/td\u003e\n            \u003ctd\u003eNo\u003c/td\u003e\n            \u003ctd\u003ePlease provide comma-separated list of tags. You can provide max 5 tags. Example: JSX, Hooks\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003ctd\u003eEnter your github username\u003c/td\u003e\n            \u003ctd\u003eYes\u003c/td\u003e\n            \u003ctd\u003eProvide your GitHub user name to mark you as the creator of the play.\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003ctd\u003ePlease provide the path(URL) to cover image\u003c/td\u003e\n            \u003ctd\u003eNo\u003c/td\u003e\n            \u003ctd\u003eA cover image is used to show your play with a thumbnail in the play list page. Please provide a link 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.\n            If you don't have a cover image, the app will use the default cover image.\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003ctd\u003eEnter your blog url\u003c/td\u003e\n            \u003ctd\u003eNo\u003c/td\u003e\n            \u003ctd\u003eIf you have written an article about this play, please provide the link to your blog article page.\u003c/td\u003e\n          \u003c/tr\u003e\n          \u003ctr\u003e\n            \u003ctd\u003eEnter your video url\u003c/td\u003e\n            \u003ctd\u003eNo\u003c/td\u003e\n            \u003ctd\u003eIf you have created a video tutorial about this play, please provide the link to your YouTube video.\u003c/td\u003e\n          \u003c/tr\u003e\n        \u003c/tbody\u003e\n      \u003c/table\u003e\n    \u003c/p\u003e\n  \u003c/summary\u003e\n\u003c/details\u003e\n\n- Now you can run the app using the following command:\n  ```shell\n    yarn start\n    # or\n    npm start\n  ```\n- You should now see your play added to the [play list](http://localhost:3000/plays) page. You can click on the play thumbnail to see the details of the play.\n\n- That's it. Now start coding your `Play` using your favorite code editor!\n## 👀 Submitting a Play for Review\nAfter you done with coding for your `Play`, you can submit it for review. Submitting a `Play` for review is a two step process.\n\n- Create a Pull Request on the [react-play](https://github.com/reactplay/react-play) repository with your changes. Please add `atapas` as a reviewer.\n- Dedicate some time in a week to take care of the review comments.\n\nOnce 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.\n\n## ✋ Need Help?\n\nYou can reach out to us at [ReactPlay Twitter Handle | @ReactPlayIO](https://twitter.com/ReactPlayIO) with a DM. Additionally, feel free to open a [discussion](https://github.com/reactplay/react-play/discussions) or [issue](https://github.com/reactplay/react-play/issues) on the `react-play` repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactplay%2Freact-play-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactplay%2Freact-play-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactplay%2Freact-play-store/lists"}