Skip to content

Commit

Permalink
readme update
Browse files Browse the repository at this point in the history
  • Loading branch information
@koustov
koustov committed Jul 22, 2022
1 parent e40e914 commit a5d134e
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 120 deletions.
146 changes: 55 additions & 91 deletions CREATE-PLAY.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,108 +5,72 @@ 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
<p align="center">
<img src="./screens/plop-create.png" alt="plop create" />
</p>

<details>
<summary>
Please expand to find the description of the question details.
</summary>
<p>
<table>
<thead>
<tr>
<th>Question</th>
<th>Mandatory</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Please provide the name of the play</td>
<td>Yes</td>
<td>Please provide a meaningful name of the play(Example: Identity Card). This name will be visible to the users. </td>
</tr>
<tr>
<td>Tell us more about the play</td>
<td>No</td>
<td>It is a description of the play for users to understand it better. The maximum number of allowed characters is 1024.</td>
</tr>
<tr>
<td>Language to be used (javascript/typescript)</td>
<td>Yes</td>
<td>Let the application know your choice of script. It supports both <b>JavaScript</b> and <b>TypeScript</b>. You can pick either of it.</td>
</tr>
<tr>
<td>Style to be used (css/scss)</td>
<td>Yes</td>
<td>Let the application know your choice of style. It supports both <b>css</b> and <b>scss</b>. You can pick either of it.</td>
</tr>
<tr>
<td>What is the level of this play?</td>
<td>Yes</td>
<td>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.</td>
</tr>
<tr>
<td>Provide maximum of 5 tags</td>
<td>No</td>
<td>Please provide comma-separated list of tags. You can provide max 5 tags. Example: JSX, Hooks</td>
</tr>
<tr>
<td>Enter your github username</td>
<td>Yes</td>
<td>Provide your GitHub user name to mark you as the creator of the play.</td>
</tr>
<tr>
<td>Please provide the path(URL) to cover image</td>
<td>No</td>
<td>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.</td>
</tr>
<tr>
<td>Enter your blog url</td>
<td>No</td>
<td>If you have written an article about this play, please provide the link to your blog article page.</td>
</tr>
<tr>
<td>Enter your video url</td>
<td>No</td>
<td>If you have created a video tutorial about this play, please provide the link to your YouTube video.</td>
</tr>
</tbody>
</table>
</p>
</summary>
</details>

- 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:https://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:https://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 <b>JavaScript</b> and <b>TypeScript</b>. You can pick either of it. |
| Style | NO | Let the application know your choice of style. It supports both <b>css</b> and <b>scss</b>. 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 <the_play_id>
```
- Start the application
```bash
yarn start
#OR
npm run start
```
- You should now see your play added to the [play list](http:https://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/<your_play_name>`
-
## 👀 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.

## ✋ 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.





29 changes: 0 additions & 29 deletions src/plays/index.js
View file

This file was deleted.

0 comments on commit a5d134e

Please sign in to comment.