# Create A Play Using The New Workflow - A Complete Guide If you have created a play before, you must have used the traditional workflow, which is an entirely CLI-based approach. But, with the new workflow, you can create a play in one or two clicks directly from the user interface! > Please note that the workflow is in beta when writing this article. If you face any issues, please let us know by creating an [issue on our GitHub](https://github.com/reactplay/react-play/issues) or messaging on the [Discord server](https://discord.gg/vrTxWUP8Am). Let's see how you can create a play using the new workflow step by step:- ## 1. Fork the Github repository First of all, if you haven't forked and cloned the repository, do that by visiting the [github repository of react-play](https://github.com/reactplay/react-play). Create a new branch using the following command: ```bash git checkout -b ``` ## 2. Install the dependencies Run `npm install` or `yarn install` at the root directory to install the required dependencies locally in your project. As per the [`documentation of react-play`](https://github.com/reactplay/react-play#readme), > 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. ```bash npm install --legacy-peer-deps ``` ## 3. Add .env file Create a `.env` file at the root of the project and add the following environment variables. ```plain REACT_APP_NHOST_BACKEND_URL=https://rgkjmwftqtbpayoyolwh.nhost.run/ REACT_APP_NHOST_VERSION=v1 REACT_APP_NHOST_ENDPOINT=graphql ``` ## 4. Start the development server Run `npm start` or `yarn start` to spin up the development server at `localhost:3000`. ## 5. Create Button Click on the create button on the landing page to create a play, as shown in the image below: ![chrome_lf4irTsSrc.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1658504714050/ZepHZ4j5wq.jpg align="left") ## 6. Authenticate using GitHub After you click on the create play button, you will be redirected to authenticate yourself using Github. Once you do that, you will see a page where you can enter your play details. ![firefox_VKAyUNzqcf.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1658505113744/iDVvqr4vY.jpg align="left") ## 7. Enter play details On this page, you can enter all the details of your play. Enter the data according to the following format: | 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 a 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. ![chrome_SJF5rzPSgV.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1658505754538/LoKV0LBJD.jpg align="left") After this, you will get a `play_id`. ![chrome_K2U6Nx7Mo1.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1658506144057/NnF6sPDPD.jpg align="left") Stop the development server and run the following command: ```bash npx create-react-play -c ``` ## 8. Add play's code Up until now, if everything was okay, it should create your play folder structured. Here's an example: ![Code_AgO5BhQVR7.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1658506959309/gzMb9R0Mc.jpg align="left") Now, you can add your play's code! Also, edit the README file or your play as per the requirements. ## 9. Test it Run `yarn start` or `npm start` to see your changes. You just created a play! 🎉
Want to learn more about ReactPlay? lease check this out, %[https://blog.greenroots.info/introducing-reactplay-learn-create-share-reactjs-projects]