From a5d134e7e827643b76fc099ae346707c0f31b8c1 Mon Sep 17 00:00:00 2001 From: koustov Date: Fri, 22 Jul 2022 10:01:38 +0530 Subject: [PATCH] readme update --- CREATE-PLAY.md | 146 +++++++++++++++++---------------------------- src/plays/index.js | 29 --------- 2 files changed, 55 insertions(+), 120 deletions(-) delete mode 100644 src/plays/index.js diff --git a/CREATE-PLAY.md b/CREATE-PLAY.md index 95a001bd4..f5cf3bcaa 100644 --- a/CREATE-PLAY.md +++ b/CREATE-PLAY.md @@ -5,104 +5,63 @@ Welcome developers! We are as excited as you are to know that you are going to c > **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. -- Open a command prompt in your project folder. -- Run the following command: - ```shell - yarn create-play - # or - npm run create-play +- Run the application using + ```bash + yarn start + #OR + npm run start ``` -- 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. - > **Script Language**: `react-play` is equipped with both `JavaScript` and `TypeScript`. So you can use either of it as base language for your play - -

- plop create -

- -
- - Please expand to find the description of the question details. - -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
QuestionMandatoryDescription
Please provide the name of the playYesPlease provide a meaningful name of the play(Example: Identity Card). This name will be visible to the users.
Tell us more about the playNoIt is a description of the play for users to understand it better. The maximum number of allowed characters is 1024.
Language to be used (javascript/typescript)YesLet the application know your choice of script. It supports both JavaScript and TypeScript. You can pick either of it.
Style to be used (css/scss)YesLet the application know your choice of style. It supports both css and scss. You can pick either of it.
What is the level of this play?YesYou 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.
Provide maximum of 5 tagsNoPlease provide comma-separated list of tags. You can provide max 5 tags. Example: JSX, Hooks
Enter your github usernameYesProvide your GitHub user name to mark you as the creator of the play.
Please provide the path(URL) to cover imageNoA 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. - If you don't have a cover image, the app will use the default cover image.
Enter your blog urlNoIf you have written an article about this play, please provide the link to your blog article page.
Enter your video urlNoIf you have created a video tutorial about this play, please provide the link to your YouTube video.
-

- -
-- Now you can run the app using the following command: - ```shell - yarn start - # or - npm start + You might see a prompt like this + + ```bash + Need to install the following packages: + create-react-play + Ok to proceed? (y) ``` -- 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. + Press `y` and hit `Enter`. This will install `create-react-play` globally. For more info check [`create-react-play readme`](https://github.com/reactplay/create-react-play/blob/main/README.md) + +- You should be able to access the application on http://localhost:3000 +- Click on `Create` button +- The application will try to authenticate you +- If you are NOT alredy logged in with [`NHost`](https://nhost.io), you will promth to give permission + - Log in with your GitHub account +- Fill the information and submit. + Paramter details + + | Field | Mandatory? | Description | + | --------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | + | Name | YES | It is a description of the play for users to understand it better. The maximum number of allowed characters is 1024. | + | Issue | YES | Every play should be mapped with an issue. Select it here. | + | Language | YES | Let the application know your choice of script. It supports both JavaScript and TypeScript. You can pick either of it. | + | Style | NO | Let the application know your choice of style. It supports both css and scss. You can pick either of it. | + | 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. | + | Github Username | YES | Provide your GitHub user name to mark you as the creator of the play. | + | Tags | NO | Please provide comma-separated list of tags. Example: JSX, Hooks | + | 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 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. | + | Blog URL | NO | If you have written an article about this play, please provide the link to your blog article page. | + | Video | NO | If you have created a video tutorial about this play, please provide the link to your YouTube video. | -- That's it. Now start coding your `Play` using your favorite code editor! +- On successfull submission, you will be redirected to a page where it will prompt you with the `play_id` +- Stop your application +- Navigate to the root of the reactplay +- Run follwing command + ```bash + npx create-react-play -c + ``` +- Start the application + ```bash + yarn start + #OR + npm run start + ``` +- 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. +- And you will notice a directory create fro your play under `./src/plays/` +- ## 👀 Submitting a Play for Review After you done with coding for your `Play`, you can submit it for review. Submitting a `Play` for review is a two step process. -- Create a Pull Request on the [react-play](https://github.com/reactplay/react-play) repository with your changes. Please add `atapas` as a reviewer. +- Create a Pull Request on the [react-play](https://github.com/reactplay/react-play) repository with your changes. - Dedicate some time in a week to take care of the review comments. 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. @@ -110,3 +69,8 @@ Once the Pull Request is approved and merged, we will notify you and add you as ## ✋ Need Help? You 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. + + + + + diff --git a/src/plays/index.js b/src/plays/index.js deleted file mode 100644 index 6a1ad43e7..000000000 --- a/src/plays/index.js +++ /dev/null @@ -1,29 +0,0 @@ -// Do not modify the content of this file - export { default as WhyReact } from 'plays/why-react/WhyReact'; - export { default as CurrentTimer } from 'plays/clock/CurrentTimer'; - export { default as CdTimerComp } from 'plays/date-time-counter/CdTimerComp'; - export { default as MovieContainer } from 'plays/movies/MovieContainer'; - export { default as CounterApp } from 'plays/counter/CounterApp'; - export { default as SocialCard } from 'plays/social-card/SocialCard'; - export { default as RandomMemeGenerator } from 'plays/random-meme-generator/RandomMemeGenerator'; - export { default as ReactTodoApp } from 'plays/react-todo-app/ReactTodoApp'; - export { default as Keeper } from 'plays/keeper/Keeper'; - export { default as ExpandingCards } from 'plays/expanding-cards/ExpandingCards'; - export { default as AnalogClock } from 'plays/analog-clock/AnalogClock'; - export { default as Quizeo } from 'plays/quizeo/Quizeo'; - export { default as PasswordGenerator } from 'plays/password-generator/PasswordGenerator'; - export { default as RegistrationForm } from 'plays/registration-form/RegistrationForm'; - export { default as WhyTypescript } from 'plays/why-typescript/WhyTypescript'; - export { default as NetlifyCardGame } from 'plays/memory-game/NetlifyCardGame'; - export { default as FunQuiz } from 'plays/fun-quiz/FunQuiz'; - export { default as TicTacToeGame } from 'plays/tic-tac-toe-game/TicTacToeGame'; - export { default as QuoteGenerator } from 'plays/quote-generator/QuoteGenerator'; - export { default as FlipCardEffect } from 'plays/flip-card-effect/FlipCardEffect'; - export { default as SimpleLiveChat } from 'plays/simple-live-chat/SimpleLiveChat'; - export { default as DynamicRoutes } from 'plays/dynamic-routes/DynamicRoutes'; - export { default as BasicTree } from 'plays/org-tree/BasicTree'; - export { default as Calendar } from 'plays/calendar/Calendar'; - export { default as States } from 'plays/states/States'; - export { default as GitHubUserSearch } from 'plays/github-user-search/GitHubUserSearch'; - export { default as ContextWithRealUsecases } from 'plays/context-with-real-usecases/ContextWithRealUsecases'; - export { default as NavBar } from 'plays/navbar/NavBar'; \ No newline at end of file