React-play is an opensource platform that helps you learn ReactJS faster with hands-on practice model

Last update: Dec 30, 2022

Overview

ReactPlay(Repo: `react-play`)

Learn . Create . Share about your ReactJS Development Journey

View Demo · Report Bug · Request Feature

👋 Introducing ReactPlay

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.

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

Who doesn't want motivation and support? Many Thanks to all the Stargazers who has supported this project with stars( ⭐ ). You all are amazing!!!

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.

🏗️ 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 for more details. Also, please check the Contribution Guide to get started.
You want to contribute to the react-play repo in general. Please check the Contribution Guide 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 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:

npm install

yarn install

🦄 Start the Development Mode

Use the following command to start the app in the development mode:

npm start

yarn start

It runs the app in the development mode. Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes. You may also see any lint errors in the console.

🧱 Build the App for Production

Use the following command to build the app for production:

npm run build

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.

🤝 Contributing to `ReactPlay`

Any kind of positive contributions are welcome! Please help us to grow by contributing to the project.

If you wish to contribute, you can,

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.

Please read CONTRIBUTING for details on our CODE OF CONDUCT, and the process for submitting pull requests to us.

🙏 Support

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.

If you found the app helpful, consider supporting us with a coffee.

A ⭐️ to ReactPlay is to make us more 💪 stronger and motivated.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Tapas Adhikary} 💻	_{Nirmal Kumar} 💻	_{Murtuzaali Surti} 💻	_{Abhishek Khatri} 💻	_{Abhishek Holani} 💻	_{Hasnain Makada} 💻	_{Shrilakshmi Shastry} 💻
_{Mohammed Taha} 💻	_{Dalpat Rathore} 💻	_{Eray Alkış} 💻	_{Nirban Chakraborty} 💻	_{Deepak Pundir} 💻	_{Vasanti Suthar} 📖	_{Ahnaf Ahamed} 💻
_{Shivam Katare} 💻	_{Shyam Mahanta} 💻	_Koustov 💻	_{Shri Om Trivedi} 💻	_{Naresh Naik} 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

Comments

create react-play PWA
Description

Creates React-Play Progressive web app

Fixes #333

Type of change

[x] New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Passed the Google Lighthouse PWA report

Checklist:

[x] I have performed a self-review of my own code

[x] I have commented my code, particularly in hard-to-understand areas

[x] I have made corresponding changes to the documentation

[x] My changes generate no new warnings

[x] I have added tests that prove my fix is effective or that my feature works

[x] New and existing unit tests pass locally with my changes

[x] Any dependent changes have been merged and published in downstream modules

Review-InProgress
opened by frankiefab100 42
Added Markdown Editor
First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

I added a new play called Markdown Editor #430 .

It's a beginner-level play which displays input texts as markdown output. It utilizes a dependency called 'remarkable'.

My main motivation is to teach beginners the React library by making them take baby steps before tackling advanced concepts.

[ ] Bug fix (non-breaking change which fixes an issue)

[x] New feature (non-breaking change which adds functionality)

[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

[ ] This change requires a documentation update

How Has This Been Tested?

It works perfectly on localhost, netlify, vercel and mobile platforms.

Checklist:

[x] I have performed a self-review of my own code

[x] I have commented my code, particularly in hard-to-understand areas

[x] I have made corresponding changes to the documentation

[x] My changes generate no new warnings

[x] I have added tests that prove my fix is effective or that my feature works

[x] New and existing unit tests pass locally with my changes

[x] Any dependent changes have been merged and published in downstream modules

Review-InProgress
opened by EOEboh 35
New play - Keeper App
Description

I have added the new play named Keeper. This is the clone of Google Keep where we can add and delete our notes. This "Keeper app" save your notes until you delete them.

How Has This Been Tested?

Install some martial UI dependencies for testing styling -
emotion/react emotion/styled material-ui/core material-ui/icons mui/icons-material mui/material

Start the app by npm start or yarn start to see it.

Checklist:

[x] I have performed a self-review of my code

[x] I have commented on my code, particularly in hard-to-understand areas

[ ] I have made corresponding changes to the documentation

[x] My changes generate no new warnings

[ ] I have added tests that prove my fix is effective or that my feature works

[ ] New and existing unit tests pass locally with my changes

[ ] Any dependent changes have been merged and published in downstream modules

App Preview(ScreenShots)

work-in-progress
opened by Shivam-Katare 35
Feat new react-play: GitHub User Search
First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

Added a new react-play for beginner ideas. Play name is GitHub User Search

Used basic hooks like useState and useEffect for managing data and error handling

Used Axios for data fetching

Added media queries for responsiveness

Added rate limit info.

Kept it as simple as possible

Fixes # (issue)

Type of change

Please delete options that are not relevant.

[ ] Bug fix (non-breaking change which fixes an issue)

[x] New feature (non-breaking change which adds functionality)

[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

[ ] This change requires a documentation update

How Has This Been Tested?

I have not tested my feature as I am unaware of the testing procedures at the moment.

Checklist:

[x] I have performed a self-review of my own code

[ ] I have commented my code, particularly in hard-to-understand areas

[ ] I have made corresponding changes to the documentation

[x] My changes generate no new warnings

[ ] I have added tests that prove my fix is effective or that my feature works

[ ] New and existing unit tests pass locally with my changes

[ ] Any dependent changes have been merged and published in downstream modules

Review-InProgress
opened by TejasShekar 29
Convert complex CSS files to SCSS
Description

Convert complex CSS files to SCSS

Fixes #374

Type of change

[x] Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Locally

Checklist:

[x] I have performed a self-review of my own code

[x] I have commented my code, particularly in hard-to-understand areas

[ ] I have made corresponding changes to the documentation

[x] My changes generate no new warnings

[ ] I have added tests that prove my fix is effective or that my feature works

[ ] New and existing unit tests pass locally with my changes

[ ] Any dependent changes have been merged and published in downstream modules

review ready
opened by 6km 26
GitHub Finder
Description

A GitHub User Search that you can found users by typing its username or name

Fixes # (issue)

Type of change

Please delete options that are not relevant.

[ ] Bug fix (non-breaking change which fixes an issue)

[x] New feature (non-breaking change which adds functionality)

[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

[ ] This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

Checklist:

[x] I have performed a self-review of my own code

[ ] I have commented my code, particularly in hard-to-understand areas

[ ] I have made corresponding changes to the documentation

[ ] My changes generate no new warnings

[ ] I have added tests that prove my fix is effective or that my feature works

[ ] New and existing unit tests pass locally with my changes

[ ] Any dependent changes have been merged and published in downstream modules

review ready
opened by Programming-School-Pro-Coding 26
Pokemon stats
First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

So here I have tried to build a pokemon stats app that will give you information about a particular pokemon on search.

Fixes # (issue) #527

Type of change

[ ✔️] New feature (non-breaking change which adds functionality)

How Has This Been Tested?

it has been tested by me in my local system for all the cases.

Checklist:

[✔️ ] I have performed a self-review of my own code

[✔️ ] I have commented my code, particularly in hard-to-understand areas

[✔️ ] I have made corresponding changes to the documentation

[✔️ ] My changes generate no new warnings

[✔️ ] I have added tests that prove my fix is effective or that my feature works

[✔️ ] New and existing unit tests pass locally with my changes

[✔️ ] Any dependent changes have been merged and published in downstream modules
opened by yung-coder 21
Added number badge to comment icon
Description

Added comment count number badge to comments icon in play

Fixes #154

Type of change

Please delete options that are not relevant.

[ ] Bug fix (non-breaking change which fixes an issue)

[X] New feature (non-breaking change which adds functionality)

[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

[ ] This change requires a documentation update

How Has This Been Tested?

Open the Plays to check if proper comment count is getting displayed for all plays.

Checklist:

[X] I have performed a self-review of my own code

[X] I have commented my code, particularly in hard-to-understand areas

[ ] I have made corresponding changes to the documentation

[X] My changes generate no new warnings

[ ] I have added tests that prove my fix is effective or that my feature works

[ ] New and existing unit tests pass locally with my changes

[X] Any dependent changes have been merged and published in downstream modules

work-in-progress
opened by naiknareshh 21
"Clear All" Button added to clear applied Filters
First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

Added a "Clear All" button on the filter modal that clears all applied filters on react play

Fixes #551

Type of change

Please delete options that are not relevant.

[ ] Bug fix (non-breaking change which fixes an issue)

[x] New feature (non-breaking change which adds functionality)

[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

[ ] This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

Checklist:

[x] I have performed a self-review of my own code

[ ] I have commented my code, particularly in hard-to-understand areas

[ ] I have made corresponding changes to the documentation

[x] My changes generate no new warnings

[ ] I have added tests that prove my fix is effective or that my feature works

[ ] New and existing unit tests pass locally with my changes

[ ] Any dependent changes have been merged and published in downstream modules

hacktoberfest hacktoberfest-accepted
opened by mayukh551 20
Add New Play: Navbar
First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

This is a simple responsive navbar that I made with the help of Tailwind

Fixes #307

Type of change

[X] New feature (non-breaking change which adds functionality)

Checklist:

[X] I have performed a self-review of my code

[X] I have commented on my code, particularly in hard-to-understand areas

[X] My changes generate no new warnings

Review-InProgress
opened by Shivam-Katare 20
Added DrawIt (play)
First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

Include the drawIt play build using canvas

Fixes # (issue)

Type of change

Please delete options that are not relevant.

[ ] Bug fix (non-breaking change which fixes an issue)

[x] New feature (non-breaking change which adds functionality)

[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

[ ] This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

Checklist:

[ ] I have performed a self-review of my own code

[x] I have commented my code, particularly in hard-to-understand areas

[x] I have made corresponding changes to the documentation

[x] My changes generate no new warnings

[ ] I have added tests that prove my fix is effective or that my feature works

[ ] New and existing unit tests pass locally with my changes

[x] Any dependent changes have been merged and published in downstream modules

Review-InProgress
opened by adarsh-gupta101 20
Add Play Audio-Visualizer
First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

This the PR for the play "Audio-Visualizer"

Fixes https://github.com/reactplay/react-play/issues/822

Type of change

Added new play "Audio-Visualizer"

How Has This Been Tested?

I verified my changes through end-to-end testing across all viewports.

Checklist:

[x] I have performed a self-review of my own code

[x] My changes generate no new warnings

[x] I have commented my code, particularly in hard-to-understand areas

[x] New and existing unit tests pass locally with my changes

[x] New Play (non-breaking change which adds functionality)
opened by DyingintheDarkness 1
fix(#849) 🐛 [Bug report]: Minified MUI error on click Filter
First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

I worked on fixing the issue #849

Fixes #849

Type of change

Please delete options that are not relevant.

[x] Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

I have tested it manually and here are the test cases.

Click on the filter icon and then close the filter modal, now again click on the filter icon modal should open instead of throwing an error.

Apply some filters and filtering should work.

For more please watch the recording.

Checklist:

[x] I have performed a self-review of my own code

[x] I have commented my code, particularly in hard-to-understand areas

[ ] I have made corresponding changes to the documentation

[x] My changes generate no new warnings

[ ] I have added tests that prove my fix is effective or that my feature works

[x] New and existing unit tests pass locally with my changes

[ ] Any dependent changes have been merged and published in downstream modules

Screenshots or example output

https://user-images.githubusercontent.com/59080942/209512437-ba16c879-91d5-436d-aef5-34030b8bf8a3.mp4
review ready
opened by Sachin-chaurasiya 1
🐛 [Bug report]: Minified MUI error on click Filter
Descrcibe the bug?

When we click on filter icon second time It generate error like this.

Steps to reproduce the bug?

go to browse (plays) Click on Filter Icon then Close The Popup.

Then click a second time, and the error appears as shown in the image above.

Expected behavior

Should not give error when we open Filter popup.

Desktop (Please provide your system information)

windows chrome

Mobile (Please provide your device information)

No response

Screenshot / Screenshare

No response

Relevant log output

No response

Code of Conduct

[X] I agree to follow this project's Code of Conduct

bug
opened by AbhiPatel10 3
Redirect to 404 Page - working
First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

When we entered anything in the route path, there was no 404 page, so I added one to the routing.

Fixes #847

Type of change

Please delete options that are not relevant.

[x] Bug fix (non-breaking change which fixes an issue)

[ ] New feature (non-breaking change which adds functionality)

[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

[ ] This change requires a documentation update

How Has This Been Tested?

Type anything in Route path like http://localhost:3000/playssdd.

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

Checklist:

[x] I have performed a self-review of my own code

[ ] I have commented my code, particularly in hard-to-understand areas

[ ] I have made corresponding changes to the documentation

[ ] My changes generate no new warnings

[ ] I have added tests that prove my fix is effective or that my feature works

[ ] New and existing unit tests pass locally with my changes

[ ] Any dependent changes have been merged and published in downstream modules

Screenshots or example output
opened by AbhiPatel10 3
🐛 [Bug report]: Not Redirect to 404 Page
Descrcibe the bug?

If We enter wrong route then it's not redirect to 404 page.

Steps to reproduce the bug?

Enter anything in route path which is not mentioned in routing and give enter.

It Look like this.

Expected behavior

It's Should Look Like this.

Desktop (Please provide your system information)

Windows Chrome

Mobile (Please provide your device information)

No response

Screenshot / Screenshare

No response

Relevant log output

No response

Code of Conduct

[X] I agree to follow this project's Code of Conduct

bug
opened by AbhiPatel10 1
Smart Todo app added
First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

Fully functional smart todo app built with React to keep track of the tasks you plan to complete within a specific amount of time, most probably a day. Users can create a task, edit a task, mark a task as 'complete' and delete a task and also can delete all the tasks by one click.

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

Checklist:

[x] I have performed a self-review of my own code

[x] I have commented my code, particularly in hard-to-understand areas

[x] I have made corresponding changes to the documentation

[ ] My changes generate no new warnings

[ ] I have added tests that prove my fix is effective or that my feature works

[x] New and existing unit tests pass locally with my changes

[ ] Any dependent changes have been merged and published in downstream modules
opened by wyarejali 1

Releases(openreplay-cc-pattern)

Owner

Tapas Adhikary

I teach how to level up your career in Web Development with meaningful Opensource projects. Also, a Writer and YouTuber.

GitHub https://reactplay.io

The repository helps you learn React by building Netflix :star:

Learn React by Building Netflix. Click ⭐ if you like the project. Pull Request are highly appreciated ❤️ You can check the advance folder for more Rea

181 Dec 22, 2022

ReactJS-Travel-Website - This is a travel(adventure) website made with ReactJS.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

1 Jan 1, 2022

A React-Fullstack platform helps to track & compare your Incomes & Expenses transactions in one place via detailed Graphical information to manage your Budget.

Budget Master Track your income and expenses in one place via detailed graphical information to manage your budget. Manage your budget and transaction

9 Nov 27, 2022

CEP is a software platform designed for users that want to learn or rapidly prototype using standard A.I. components.

Cortic Edge-computing Platform (CEP) CEP is a software platform designed for users that want to learn or rapidly prototype using standard A.I. compone

137 Jan 1, 2023

Airbnb-React - In this project, An Airbnb experience page clone is created to learn and implement React props concepts.

Create React Airbnb App In this project An airbnb experience page clone is created to learn and implement React props concepts. Objectives Learn about

4 Jun 28, 2022

Concircle scanner mobile app is application That helps you scan your order and position and to know if there are exact or not. it's cross-platform app.

Concircle scanner mobile app ⭐ Star on GitHub — it motivates Me a lot! Concircle scanner mobile app is application That helps you scan your order and

10 May 7, 2022

A Google Clone which built with ReactJS. You can click the demo and search whatever you want!

Google Clone with ReactJS A small web app that imitate the desktop web version of google site, you can search whatever you want. Google Clone Demo Lin

36 Aug 14, 2022

Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

83.6k Dec 30, 2022

🎉 基于 reactjs 开发的可视化项目实战【https://wuli-admin.gitee.io/react-wuli-admin/#/workspace/fullscreen】

react-visual-data 介绍 ?? 基于 reactjs 开发的可视化项目实战亮点大屏设计器：自由拖拽大屏报表设计器：自适应排列布局动态表单：schema 设计模式 vue版本尝鲜：vue版本尝鲜 issues，欢迎提交～调试 > git clone https://githu

93 Dec 13, 2022

React-electron - dagimsolomon: minimalstic setup of Reactjs with electron

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

2 Jan 23, 2022

İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

?? instagram-clone This is a instagram clone. You can sign in, sign up, upload image, make comment ?? ⚡ LIVE To check out the live demo of this app AB

22 Apr 20, 2022

React-play is an opensource platform that helps you learn ReactJS faster with hands-on practice model

Related tags

Overview

ReactPlay(Repo: react-play)

Learn . Create . Share about your ReactJS Development Journey

👋 Introducing ReactPlay

🔥 Demo

🏗️ How to Set up ReactPlay for Development?

🍴 Fork and Clone the Repo

⬇️ Install Dependencies

🦄 Start the Development Mode

🧱 Build the App for Production

🚀 Deploy

🤝 Contributing to ReactPlay

🙏 Support

A ⭐️ to ReactPlay is to make us more 💪 stronger and motivated.

Contributors ✨

Comments

Description

Type of change

How Has This Been Tested?

Checklist:

Description

How Has This Been Tested?

Checklist:

Description

How Has This Been Tested?

Checklist:

App Preview(ScreenShots)

Description

Type of change

How Has This Been Tested?

Checklist:

Description

Type of change

How Has This Been Tested?

Checklist:

Description

Type of change

How Has This Been Tested?

Checklist:

Description

Type of change

How Has This Been Tested?

Checklist:

Description

Type of change

How Has This Been Tested?

Checklist:

Description

Type of change

How Has This Been Tested?

Checklist:

Description

Type of change

Checklist:

Description

Type of change

How Has This Been Tested?

Checklist:

Description

Type of change

How Has This Been Tested?

Checklist:

Description

Type of change

How Has This Been Tested?

Checklist:

Screenshots or example output

Descrcibe the bug?

Steps to reproduce the bug?

Expected behavior

Desktop (Please provide your system information)

Mobile (Please provide your device information)

Screenshot / Screenshare

Relevant log output

Code of Conduct

Description

Type of change

How Has This Been Tested?

ReactPlay(Repo: `react-play`)

🏗️ How to Set up `ReactPlay` for Development?

🤝 Contributing to `ReactPlay`