-
-
Notifications
You must be signed in to change notification settings - Fork 804
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #21 from atapas/landing-page
Landing page styling
- Loading branch information
Showing
86 changed files
with
3,660 additions
and
681 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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}}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,2 @@ | ||
{{component}}, | ||
{{pascalCase name}}, | ||
//import play here |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
Oops, something went wrong.
e1704ee
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
react-play – ./
react-play-atapas.vercel.app
reactoplay.vercel.app
www.reactplay.io
reactplay.io
react-play-git-main-atapas.vercel.app