React-play: an open-source web app that helps you learn ReactJS faster with a hands-on practice model

Last update: Jun 17, 2022

ReactPlay(Repo: react-play)

All Contributors

react-play

Learn . Create . Share about your ReactJS Development Journey

react-play licence react-play forks react-play stars react-play issues react-play pull-requests

View Demo Β· Report Bug Β· Request Feature

πŸ‘‹ Introducing ReactPlay

name

react-play is an open-source web app that helps you learn ReactJS faster with a 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 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 have supported this project with stars( ⭐ ). You all are amazing!!!

Stargazers repo roster for @reactplay/react-play

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 existing 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 the forked repo.

Please change the directory after cloning the repository using the cd command.

⬇️ Install Dependencies

Next, install the dependencies by running the following command in the react-play repo:

npm install

Or

yarn install

πŸ¦„ Start the Development Mode

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

npm start

Or

yarn start

It runs the app in 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

Or

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 contribution is 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, and help it improve.
  • Improve the app, fix bugs, etc.
  • Improve documentation.
  • 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.

Launching reactplay Rewards

Contributed to reactplay? Here is a big thank you from our community to you. Claim your badge and showcase them with pride. Let us inspire more folks !

reactplay Badges

Claim Now!

πŸ™ 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

πŸ’»

Vincent Patoc

πŸ’»

Sachin Chaurasiya

πŸ’»

Tejinder Sharma

πŸ’»

Ishrar G

πŸ’»

Programming-School

πŸ’»

Valesh Gopal

πŸ’»

Emdadul Haque

πŸ’»

Olang Daniel

πŸ’»

Supriya M

πŸ’»

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

GitHub

https://github.com/reactplay/react-play
Comments
  • 1. 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?

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

    2. 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)

    2022-04-20 (1)

    2022-04-20 (4)

    Reviewed by Shivam-Katare at 2022-04-20 10:56
  • 2. 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
    Reviewed by Programming-School-Pro-Coding at 2022-05-14 20:22
  • 3. Add A New Idea Discussion and remove github finder

    First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

    Description

    Add A New Idea

    Fixes # (issue)

    Type of change

    Please delete options that are not relevant.

    • [x] 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)
    • [x] 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
    Reviewed by Programming-School-Pro-Coding at 2022-05-22 12:34
  • 4. [Add a play]: Random meme generator

    I have an idea to add a play which demonstrates the use of APIs to generate random data (it can be anything, quotes, images, memes, etc)

    @atapas Let me know if this works!

    Reviewed by murtuzaalisurti at 2022-04-17 09:36
  • 5. a Simple and Fun Quiz App

    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.

    Fixes # (issue)

    Type of change

    Please delete options that are not relevant.

    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] My changes generate no new warnings
    • [x] I have added tests that prove my fix is effective or that my feature works
    Reviewed by Angryman18 at 2022-05-14 10:32
  • 6. Complete Password Generator UI

    Description

    I designed the password generator ui and it works fine without bug but when i updated my folked repository and pull it into my mechine i get this error aside that my implementation is working great Screenshot from 2022-05-30 03-06-39

    Fixes # (issue)

    Type of change

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

    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
    • [ ] 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
    Reviewed by Asterisk-z at 2022-05-30 02:11
  • 7. Create calendar react-play

    First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

    Description

    A simple calendar app to add, update, and delete events.

    Dependecies:

    • date-fns
    • lodash

    Fixes # (issue) https://github.com/atapas/react-play/issues/199

    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
    Reviewed by vincentBCP at 2022-05-19 01:12
  • 8. Tic Tac Toe Game

    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.

    Fixes # (issue)

    Type of change

    Please delete options that are not relevant.

    • [x] 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
    • [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
    • [x] New and existing unit tests pass locally with my changes
    • [x] Any dependent changes have been merged and published in downstream modules
    Reviewed by tejinder-sharma at 2022-05-20 06:19
  • 9. ✨ [Feature request]: If a play doesn't have a blog, link it to the Readme

    Is your feature request related to a problem? Please describe. Each of the play has a read me file that is supposed to explain the technical details of the play like what it is, how it was built, etc. The ReactPlay should check if a play creator supplied a blog link for a play. In case it is empty, the link can be to the Readme file.

    Describe the solution you'd like Each of the play has a read me file that is supposed to explain the technical details of the play like what it is, how it was built, etc. The ReactPlay should check if a play creator supplied a blog link for a play. In case it is empty, the link can be to the Readme file.

    Describe alternatives you've considered NA

    Additional context NA

    Reviewed by atapas at 2022-05-19 03:32
  • 10. Fix embeds not working as intended

    Description

    This PR adds the meta tags back into the index.html file, and adds the react-snap package. I noticed that the new way of handling meta tags doesn't work for some sites, as they do not run JavaScript to fetch the metadata, meaning that react-helmet doesn't get a chance to update the meta tags.

    This PR adds react-snap to fix this issue. Now, every time we run npm build, react-snap will go through all of the available routes and generate a static HTML page for them. Meaning that any site and app will have a static HTML file available for them, accessible even without JavaScript.

    Fixes #90

    Type of change

    Please delete options that are not relevant.

    • [x] Bug fix (non-breaking change which fixes an issue)
    • [x] New feature (non-breaking change which adds functionality)

    How Has This Been Tested?

    I disabled JavaScript on various browsers and visited all available pages on the site. I can confirm that the meta tags show up without any issues. This should now hopefully fix the embeds on social media sites.

    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] Any dependent changes have been merged and published in downstream modules

    Notes:

    This new fix should add the embed functionality, but if anything doesn't work as intended, I'll push a bugfix ASAP! These meta tags turned out to be a much more complex issue than I initally thought ! πŸ˜„ πŸ˜„

    Reviewed by erayalkis at 2022-04-21 15:41
  • 11. Simple live chat UI break repair .

    First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

    Description

    Here I have tried to fix the CSS break in simple live chat UI by doing some changes in the CSS file

    Fixes react-play#325

    Type of change

    Please delete options that are not relevant.

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

    How Has This Been Tested?

    It has been tested by me in my local system in all edge cases

    Here's how it looks after my changes

    fix

    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
    Reviewed by yung-coder at 2022-06-20 13:50
  • 12. πŸ› [Bug report]: Search filter issue under production

    before we used to search using or operator in our query (where clause) but for now we have dev_mode which we have to consider while searching goes on either prodcution or development. and the intension is not to make search through dev_mode: true on our production. in order to make that working we need the 2 operator for our pattern which we are following to generate the graphql query. help is needed in this scenerio when searchTerm goes for play name or play description and dev_mode: true

    Reviewed by Angryman18 at 2022-06-27 04:36
  • 13. ✨ [Feature request]: yarn create-play should insert play details to DB

    Is your feature request related to a problem? Please describe.

    Right now, the yarn create-play creates the meta data information in the JSON file which is not of any use because we get the data from DB. The command should insert the records in the relevant database tables.

    Reviewed by atapas at 2022-06-26 17:34
  • 14. πŸ› [Bug report]: Normalize the backend API calls

    Describe the bug

    The Home page makes the call to list all the plays but we do not use it in the Home page. Ideally,

    • Home page should make the "Featured" play call
    • The play list page should make the all plays call with minimalistic data required for the thumbnails.
    • Each of the play details should retrieve all required data for a play.
    Reviewed by atapas at 2022-06-26 17:32
  • 15. πŸ› [Bug report]: Unnecessary Multiple Re-rendering making multiple graphql call

    Describe the bug A clear and concise description of what the bug is.

    Expected behavior multiple unnecessary re-rendering and graphql calls are observed.

    Screenshots If applicable, add screenshots to help explain your problem. Screenshot from 2022-06-26 10-36-11

    Reviewed by Angryman18 at 2022-06-26 05:06
  • 16. New Play: Cryptocurrency Tracker

    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.

    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
    • [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
    Reviewed by Adit0507 at 2022-06-25 17:06
  • 17. New play/react context with usecases

    First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

    Description

    I was learning contextAPI and was bored to learn the same counter or toggle example hence i decided to make something that feel real.

    `context-with-real-use cases is a recipe app that lists the recipes by cuisine type. Based on the selected cuisine app shows the list of recipes, the selected cuisine and the cuisine fact.

    Fixes #341

    Type of change

    Please delete options that are not relevant.

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

    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
    • [ ] 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
    Reviewed by Deepak8717 at 2022-06-24 06:08
Bitloops is Low-Code Workflow Orchestration platform that helps you build backend systems and APIs 10x faster.
Bitloops is Low-Code Workflow Orchestration platform that helps you build backend systems and APIs 10x faster.

Bitloops Bitloops is a scalable open source Firebase substitute that can support any database and workflow orchestration. We’re building Bitloops usin

Jun 9, 2022
A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powered by RAWG API.
A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powered by RAWG API.

Game Store Monorepo A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powe

Jun 23, 2022
Learn to build Udemy Web Clone with ReactJS. ... This is a front to back `Udemy Web Clone` course for absolutely everybody.

Udemy Clone React Learn to build Udemy Web Clone with ReactJS. ... This is a front to back Udemy Web Clone course for absolutely everybody. What is th

Feb 20, 2022
Fakeflix – Netflix open source clone, not the usual clone that you can find on the web.
Fakeflix – Netflix open source clone, not the usual clone that you can find on the web.

Fakeflix – Netflix open source clone, not the usual clone that you can find on the web.

Jun 17, 2022
A simple React app that lets you play Hangman in your browser
A simple React app that lets you play Hangman in your browser

Hacktoberfest 2021 with IEEE-VIT ❀️ Hangman-React is a simple Hangman Game built using React JS. Support open source software by participating in Hack

May 18, 2022
A lightweight open source alternative to linktree, complete with Docker container that hosts your web server and code. Written in ReactJS SSR.
A lightweight open source alternative to linktree, complete with Docker container that hosts your web server and code.  Written in ReactJS SSR.

?? LittleLink-Server This project is based on the great work from littlelink It takes the same simple approach to a link page and hosts it within a No

Jun 19, 2022
Security, performance, marketing, and design tools β€” Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.

Jetpack Monorepo This is the Jetpack Monorepo. It contains source code for the Jetpack plugin, the Jetpack composer packages, and other things. How to

Jun 24, 2022
Papercups is an open source live customer chat web app written in Elixir
Papercups is an open source live customer chat web app written in Elixir

Papercups is an open source live customer chat web app written in Elixir

Jun 21, 2022
TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.
TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

Jun 9, 2022
Mernmap Open Source Application Built With The MERN(Mongodb , ExpressJS, ReactJS, NodeJS)

Meanmap MERNMAP is an interactive map for mern(MongoDB, ExpressJS, ReactJS, NodeJS) Stack Developers all over the world. It provides an avenue where a

May 24, 2021
Application to practice the knowledge in React, and TailWind CSS, and in the future start the studies in Node
Application to practice the knowledge in React, and TailWind CSS, and in the future start the studies in Node

NBA Cards Aplicação para praticar os conhecimentos em React, e TailWind CSS, e futuramente iniciar os estudos em Node. Intuito A aplicação consiste em

Feb 12, 2022
Netflix Clone - This project was created to practice using the API and the Raeact technology
Netflix Clone  - This project was created to practice using the API and the Raeact technology

Esse projeto foi criado para praticar uso de API e da tecnologia Raeact. Ultilizando CSS3 puro sem nenhum framwork foi possΓ­vel resolver

May 1, 2022
Faery-catwalk - A desktop app for viewing GLTF models with animations, with specific support for multi-model files

faery-catwalk A desktop app for viewing GLTF models with animations, with specif

Apr 1, 2022
Ruck an open source buildless React web application framework for Deno

Ruck is an open source buildless React web application framework for Deno. It can be used to create basic sites or powerful apps.

Jun 10, 2022
Mis-your-index is an open-source mis software based on React.js and python web framework Flask
Mis-your-index is an open-source mis software based on React.js and python web framework Flask

Mis-your-index is an open-source mis software based on React.js and python web framework Flask

Jun 24, 2022
Project flat is the Web, Windows and macOS client of Agora Flat open source classroom.
Project flat is the Web, Windows and macOS client of Agora Flat open source classroom.

Project flat is the Web, Windows and macOS client of Agora Flat open source classroom.

Jun 21, 2022
Open-source building blocks from Mojang Studios to construct game UIs using web tech.
Open-source building blocks from Mojang Studios to construct game UIs using web tech.

Ore UI meta-repo Open-source building blocks from Mojang Studios to construct game UIs using web tech. What is this? Minecraft Bedrock Edition is migr

Jun 20, 2022
Tensor EMR is a web based Open Source Electronic Medical Record software application
Tensor EMR is a web based Open Source Electronic Medical Record software application

Tensor EMR is a web based Open Source Electronic Medical Record software application. It features patient registration, patient chart management, appointment & scheduling, queue management, eRx, and more.

Jun 23, 2022
A react and framer motion app to play some quizzes !

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

Jan 7, 2022