Merge pull request #21 from atapas/landing-page

Landing page styling

CREATE-PLAY.md

@@ -0,0 +1,98 @@
+# Create a Play
+This 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.
+## 🖥️ Steps to Create a Play
+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.
+
+> **Note:** The steps below assumes that you have forked and cloned the [react-play](https://github.com/atapas/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
+  ```
+- 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.
+  <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>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/atapas/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 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.
+
+- That's it. Now start coding yor `Play` using your favorite code editor!
+## 👀 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/atapas/react-play) repository with your changes. Please add `atapas` as a reviewer.
+- 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/atapas/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/atapas/react-play/discussions) or [issue](https://github.com/atapas/react-play/issues) on the `react-play` repository.

README.md

@@ -1,69 +1,155 @@
-# The `react-play`
+# ReactPlay(Repo: `react-play`)
 
 <p align="center">
-  <a href="https://reactoplay.vercel.app/" target="_blank" style="font-size:50px">See Demo<a/>
-  <img src="screens/data-load-style.gif" alt="react-play" />
-</p>  
+  <a href="https://reactplay.io/" target="_blank" style="font-size:50px"><img src="src/images/twitter-thumb.png" alt="react-play" width="125" /></a>
+</p>
 
-The `react-play` is a React project to demonstrate the well-known React patterns like,
+<h4 align="center">Learn . Create . Share about your ReactJS Development Journey</h4>
 
+<p align="center">
+  <a href="https://github.com/atapas/react-play/blob/master/LICENSE" target="blank">
+<img src="https://img.shields.io/github/license/atapas/react-play?style=flat-square" alt="react-play licence" />
+</a>
+<a href="https://github.com/atapas/react-play/fork" target="blank">
+<img src="https://img.shields.io/github/forks/atapas/react-play?style=flat-square" alt="react-play forks"/>
+</a>
+<a href="https://github.com/atapas/react-play/stargazers" target="blank">
+<img src="https://img.shields.io/github/stars/atapas/react-play?style=flat-square" alt="react-play stars"/>
+</a>
+<a href="https://github.com/atapas/react-play/issues" target="blank">
+<img src="https://img.shields.io/github/issues/atapas/react-play?style=flat-square" alt="react-play issues"/>
+</a>
+<a href="https://github.com/atapas/react-play/pulls" target="blank">
+<img src="https://img.shields.io/github/issues-pr/atapas/react-play?style=flat-square" alt="react-play pull-requests"/>
+</a>
+<a href="https://twitter.com/intent/tweet?text=👋%20Check%20this%20amazing%20app%20https://reactplay.io/,%20created%20by%20@tapasadhikary%20and%20friends%0A%0A%23DEVCommunity%20%23100DaysOfCode%20@reactplayio"><img src="https://img.shields.io/twitter/url?label=Share%20on%20Twitter&style=social&url=https%3A%2F%2Fgithub.com%2Fatapas%2Freact-play"></a>
+
+</p>
+
+<p align="center">
+    <a href="https://reactplay.io/" target="blank">View Demo</a>
+    ·
+    <a href="https://github.com/atapas/react-play/issues/new/choose">Report Bug</a>
+    ·
+    <a href="https://github.com/atapas/react-play/issues/new/choose">Request Feature</a>
+</p>
+
+## 👋 Introducing ReactPlay
+
+<p align="center">
+  <img src="src/images/og-image.png" alt="name"/>
+</p>
 
-- [X] [Container Component Pattern](https://github.com/atapas/react-play/tree/release/openreplay-cc-pattern) ([Tutorial](https://blog.openreplay.com/understanding-the-container-component-pattern-with-react-hooks))
-- [ ] Higher-Order Component Pattern
-- [ ] Render prop
-- [X] Custom Hooks
-  - [X] [CountDown Timer](https://github.com/atapas/react-play/blob/main/src/plays/date-time-counter/hooks/useCountDown.js)
-- [ ] Conditional Rendering
-- [ ] Layout Component
-- [ ] Controlled Components   
+`react-play` is an `opensource` web app that helps you learn ReactJS faster with hands-on practice model. It is a collection of `ReactJS projects` that you can use to learn ReactJS.
 
-... many more
+Is that all? Nope. You can also create your own 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?
+## 🔥 Demo
+Here is the link to the app. We hope you enjoy it.
+
+> [The ReactPlay app Link](https://reactplay.io)
   
-I'll be creating articles ✍️ and/or videos 📹 on each of the above patterns using the code from this repository.
-
-# 🔥 The App Demo
+Who doesn't want motivation and support? Many Thanks to all the Stargazers who has supported this project with stars(⭐). You all are amazing!!!
+
+[![Stargazers repo roster for @atapas/react-play](https://reporoster.com/stars/atapas/react-play)](https://github.com/atapas/react-play/stargazers)
+
+Please support the work by giving the repository a ⭐, contributing to it, and/or sponsoring using the `Sponsor` button at the top 😍. You can also follow us on twitter [@reactplayio](https://twitter.com/reactplay).
+
+## 🏗️ How to Set up `ReactPlay` for Development?
+
+You may want to set up the `react-play` repo for the following reasons:
+
+- You want to create a new play or want to edit an exiting play as a contributor. Please check the [Create a Play Guide](./CREATE-PLAY.md) for more details. Also, please check the [Contribution Guide](./CONTRIBUTING.md) to get started.
+
+- You want to contribute to the `react-play` repo in general. Please check the [Contribution Guide](./CONTRIBUTING.md) to get started.
+
+Here is a quick overview of the `react-play` repo setup:
+
+### 🍴 Fork and Clone the Repo 
+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.
+
+Once forked, you can clone the repo by clicking the `Clone or Download` button on the top right corner of forked repo.
+
+### ⬇️ Install Dependencies
+Next, install the dependencies by running the following command in the `react-play` repo:
+
+```bash
+npm install
+```
+Or
 
-You can access the app from here: [https://reactoplay.vercel.app/](https://reactoplay.vercel.app/)
+```bash
+yarn install
+```
+### 🦄 Start the Development Mode
+Use the following command to start the app in the development mode:
+
+```bash
+npm start
+```
+Or
 
+```bash
+yarn start
+```
 
-# 🤲 Hey, wants to Motivate?
+It runs the app in the development mode. Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
 
-Who doesn't want motivation and support?  
+The page will reload when you make changes. You may also see any lint errors in the console.
 
-You can support my work by giving the repository a ⭐ and/or sponsorong me using the `Sponsor` button at the top 😍.
+### 🧱 Build the App for Production
+Use the following command to build the app for production:
 
-[![Stargazers repo roster for @atapas/react-play](https://reporoster.com/stars/atapas/react-play)](https://github.com/atapas/react-play/stargazers)  
+```bash
+npm run build
+```
+Or
 
+```bash
+yarn build
+```
+
+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.
+
+### 🚀 Deploy
+
+You can deploy the app to `Vercel` or `Netlify` with a single click.
 
-# 🏗️ Getting Started with `react-play`
+<a href="https://vercel.com/new/project?template=https://github.com/atapas/react-play">
+<img src="https://vercel.com/button" height="37.5px" />
+</a>
+<a href="https://app.netlify.com/start/deploy?repository=https://github.com/atapas/react-play">
+<img src="https://www.netlify.com/img/deploy/button.svg" height="37.5px" />
+</a>
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## 🤝 Contributing to `ReactPlay`
+Any kind of positive contributions are welcome! Please help us to grow by contributing to the project.
 
-## Install
-Use the `yarn install` or `npm install` command to install dependencies.
+If you wish to contribute, you can,
 
-## Available Scripts
+- Create a Play
+- Suggest a Feature
+- Test the app, help it improving.
+- Improve the app, fix bugs, etc.
+- Improve documentations.
+- Create content about ReactPlay and share it with the world.
 
-In the project directory, you can run:
+> Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDUCT`](CODE_OF_CONDUCT.md), and the process for submitting pull requests to us.
 
-### `yarn start`
+## 🙏 Support
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+We all need support and motivation. `ReactPlay` is not an exception. Please give this project a ⭐️ to encourage and show that you liked it. Don't forget to leave a star ⭐️ before you move away.
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+If you found the app helpful, consider supporting us with a coffee.
 
-### `yarn plop`
+<a href="https://www.buymeacoffee.com/greenroots">
+    <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="50px">
+</a>
 
-Create a new play using this command. Just answer a few questions to get started.
+---
 
-### `yarn build`
+<h3 align="center">
+A ⭐️ to <b>ReactPlay</b> is to make us more 💪 stronger and motivated.
+</h3>
 
-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.\
-Your app is ready to be deployed!
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

package.json

@@ -20,7 +20,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "plop": "plop"
+    "create-play": "plop"
   },
   "eslintConfig": {
     "extends": [

plop-templates/component.hbs

@@ -1,10 +1,38 @@
-function {{component}}() {
+
+import { useLocation } from 'react-router-dom';
+import { getPlayById } from 'meta/play-meta-util';
+
+import PlayHeader from 'common/playlists/PlayHeader';
+
+function {{pascalCase name}}() {
+  // Do not remove the below lines. 
+  // The following code is to fetch the current play from the URL
+  const location = useLocation();
+  const { id } = location.state;
+  const play = getPlayById(id);
+
+  // Your Code Start below.
+
   return (
-    <div>
-      <h1>{{name}}</h1>
-      <p>{{description}}</p>
-    </div>
+    <>
+      <div className="play-details">
+        <PlayHeader play={play} />
+        <div className="play-details-body">
+        {/* Your Code Starts Here */}
+          <div>
+            <h1>Play Details -  {{titleCase name}}</h1>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Pellentesque euismod, urna eu tincidunt consectetur,
+              nisi nunc ultricies nisi, eget consectetur nunc nisi
+              euismod nunc.
+            </p>
+          </div>
+        {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
   );
 }
 
-export default {{component}};
+export default {{pascalCase name}};

plop-templates/exportPlay.hbs

@@ -1,2 +1,2 @@
-export { default as {{component}} } from 'plays/{{folder}}/{{component}}';
+export { default as {{pascalCase name}} } from 'plays/{{generateFolderName name}}/{{pascalCase name}}';
 //add export here

plop-templates/importToMeta.hbs

@@ -1,2 +1,2 @@
-{{component}},
+{{pascalCase name}},
 //import play here

plop-templates/play.hbs

@@ -1,12 +1,13 @@
 {
-    id: '{{dashCase id}}', 
-    name: '{{name}}', 
+    id: '{{generateId name}}', 
+    name: '{{titleCase name}}', 
     description: '{{description}}',
-    component: () => {return <{{component}} />},
-    path: '/plays/{{folder}}',
+    component: () => {return <{{pascalCase name}} />},
+    path: '/plays/{{generateFolderName name}}',
     level: '{{level}}',
-    tags: '{{tags}}',
-    github: 'https://github.com/{{github}}',
+    tags: '{{removeAllSpaces tags}}',
+    github: '{{github}}',
+    cover: '{{cover}}',
     blog: '{{blog}}',
     video: '{{video}}'
   }, //replace new play item here