Giter VIP home page Giter VIP logo

reactplay / react-play Goto Github PK

View Code? Open in Web Editor NEW
1.3K 20.0 805.0 116.3 MB

react-play is an opensource platform that helps you learn ReactJS faster with hands-on practice model. It is a collection of projects that you can use to learn ReactJS.

Home Page: https://reactplay.io

License: MIT License

HTML 0.16% CSS 21.88% JavaScript 55.57% TypeScript 18.71% SCSS 3.68% Shell 0.01%
react reactjs javascript react-hooks open-source opensource hacktoberfest

react-play's Introduction

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

Open in Gitpod

πŸ‘‹ 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 (A play is a React project) 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 <folder-name> command.

Note: Please do not remove the .env.development file from the root folder. It contains all the environment variables required for development.

⬇️ Install Dependencies

Next, install the dependencies by running the following command in the react-play repo. we recommend using yarn but you can install using npm too

yarn install

Or

npm install

if you don't have yarn installed on your PC, follow the steps below to install it..

Windows

  1. open your command prompt as administrator.
  2. write corepack enable and hit enter.
  3. then npm install --global yarn

Linux

  1. open terminal and hit npm install --global yarn

MacOS

  1. open terminal and hit npm install --global yarn or brew install yarn

Or Download Package If you are unable to install yarn following the above-mentioned process, then you can simply download the package and install it. Visit the official website of Yarn; there you can just expand the "Alternative" section and it will ask for the version to download for Windows, Linux, or Mac. https://classic.yarnpkg.com/en/docs/install#windows-stable

Note: 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. Also, ensure to use Node.js version >= 16.x

npm install --legacy-peer-deps

πŸ¦„ Start the Development Mode

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

yarn start

or if you installed dependencies using npm use below command

npm start

Note: The start script automatically invokes "linters" process. Should you need to run the app without lint the use start:nolint instead. However make sure that you run start script at least once before committing your code. Code with linter error may not be reviewed.

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.

✨ Format and lint the code

Use the following command to format and lint the code:

Format the code

yarn run format

OR

npm run format

Lint the code

to check the linting issue

yarn run lint

OR

npm run lint

to fix the linting issue

yarn run lint:fix

OR

npm run lint:fix

🧱 Build the App for Production

Use the following command to build the app for production:

yarn build

OR

npm 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.


πŸ§ͺ Test App Locally (E2E with Playwright)

Use the following command to install browser(s) binaries to test locally:

yarn install playwright

OR

npm install playwright

Use the following command to run Playwright tests:

yarn e2e

OR

npm run e2e

πŸ‘€ Read more about testing in react-play

πŸ‘€ Read more about playwright: https://playwright.dev/


πŸš€ 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.

πŸ†• New to Open Source? πŸ’‘ Follow this guide to jumpstart your Open Source journey πŸš€.

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

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

πŸ’»
Nirmal Kumar
Nirmal Kumar

πŸ’»
Murtuzaali Surti
Murtuzaali Surti

πŸ’»
Abhishek Khatri
Abhishek Khatri

πŸ’»
Abhishek Holani
Abhishek Holani

πŸ’»
Hasnain Makada
Hasnain Makada

πŸ’»
Shrilakshmi Shastry
Shrilakshmi Shastry

πŸ’»
Mohammed Taha
Mohammed Taha

πŸ’»
Dalpat Rathore
Dalpat Rathore

πŸ’»
Eray Alkış
Eray Alkış

πŸ’»
Nirban Chakraborty
Nirban Chakraborty

πŸ’»
Deepak Pundir
Deepak Pundir

πŸ’»
Vasanti Suthar
Vasanti Suthar

πŸ“–
Ahnaf Ahamed
Ahnaf Ahamed

πŸ’»
Shivam Katare
Shivam Katare

πŸ’»
Shyam Mahanta
Shyam Mahanta

πŸ’»
Koustov
Koustov

πŸ’»
Shri Om Trivedi
Shri Om Trivedi

πŸ’»
Naresh Naik
Naresh Naik

πŸ’»
Vincent Patoc
Vincent Patoc

πŸ’»
Sachin Chaurasiya
Sachin Chaurasiya

πŸ’»
Tejinder Sharma
Tejinder Sharma

πŸ’»
Ishrar G
Ishrar G

πŸ’»
Programming-School
Programming-School

πŸ’»
Valesh Gopal
Valesh Gopal

πŸ’»
Emdadul Haque
Emdadul Haque

πŸ’»
Olang Daniel
Olang Daniel

πŸ’»
Supriya M
Supriya M

πŸ’»
Saksham chandel
Saksham chandel

πŸ’»
Luca Pizzini
Luca Pizzini

πŸ’»
Shivam Bhasin
Shivam Bhasin

πŸ’»
Tejas Shekar
Tejas Shekar

πŸ’»
Anirban Pratihar
Anirban Pratihar

πŸ’»
Harsh Singh
Harsh Singh

πŸ’»
Franklin U.O. Ohaegbulam
Franklin U.O. Ohaegbulam

πŸ’»
Ammaar Aslam
Ammaar Aslam

πŸ’»
Mayukh Bhowmick
Mayukh Bhowmick

πŸ’»
Emmanuel O Eboh
Emmanuel O Eboh

πŸ’»
Shailesh Parmar
Shailesh Parmar

πŸ’»
dangvu0502
dangvu0502

πŸ’»
Ceesco
Ceesco

🎨
Hamza Ali
Hamza Ali

🎨
yash91989201
yash91989201

πŸ’»
Makdoom Shaikh
Makdoom Shaikh

πŸ’»
Muzaffar Hossain
Muzaffar Hossain

πŸ’»
Susmita Dey
Susmita Dey

πŸ’»
Sanjay Kumar
Sanjay Kumar

πŸ’»
Vinay Patil
Vinay Patil

πŸ’»
Abhilash
Abhilash

πŸ’»
Kashish Lakhara
Kashish Lakhara

πŸ’»
hiimnhan
hiimnhan

πŸ’»
Siddharth Khatri
Siddharth Khatri

πŸ’»
Emma Dawson
Emma Dawson

πŸ’»
Senali
Senali

πŸ’»
Nisha Sen
Nisha Sen

πŸ’»
Harshil Jani
Harshil Jani

πŸ’»
Oluka Isaac
Oluka Isaac

πŸ’»
NagarjunShroff
NagarjunShroff

πŸ’»
Aakash Vishwakarma
Aakash Vishwakarma

πŸ’»
Ankit Kumar
Ankit Kumar

πŸ’»
Keerthivasan D
Keerthivasan D

πŸ’»
Bhavika Tibrewal
Bhavika Tibrewal

πŸ’»
Abhi Patel
Abhi Patel

πŸ’»
Aimun Nahar
Aimun Nahar

πŸ’»
GodStarLord
GodStarLord

πŸ’»
Joe Shajan
Joe Shajan

πŸ’»
MohZaid Kapadia
MohZaid Kapadia

πŸ’»
Sam
Sam

πŸ’»
Trishna Kalita
Trishna Kalita

πŸ’»
Wyarej Ali
Wyarej Ali

πŸ’»
ZΓΌlal Nebin
ZΓΌlal Nebin

πŸ’»
nrshnaik
nrshnaik

πŸ’»
Jannik Schmidtke
Jannik Schmidtke

πŸ’»
Md. Saddam Hossain
Md. Saddam Hossain

πŸ’»
Janvi Bajoria
Janvi Bajoria

πŸ’»
Chhakuli Zingare
Chhakuli Zingare

πŸ’»
clevercoderjoy
clevercoderjoy

πŸ’»
Priyankar Pal
Priyankar Pal

πŸ’»
Akshay Gore
Akshay Gore

πŸ’»

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

react-play's People

Contributors

6km avatar abhishek-90 avatar allcontributors[bot] avatar ammaaraslam avatar angra974 avatar angryman18 avatar anirban-1490 avatar atapas avatar deepak8717 avatar dependabot[bot] avatar eoeboh avatar erayalkis avatar frankiefab100 avatar hasnainmakada-99 avatar koustov avatar murtuzaalisurti avatar nirban256 avatar nirmalkc avatar priyankarpal avatar programming-school-pro-coding avatar sachin-chaurasiya avatar shaileshparmar11 avatar shivam-katare avatar shrilakshmishastry avatar supminn avatar tejasshekar avatar tejinder-sharma avatar vasantisuthar avatar vincentbcp avatar yung-coder avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-play's Issues

[Add a Play]: Keeper App

What's the Play about?

The name of the play is "Keeper". In this app, you can save and delete your notes. This will save your notes until you delete them.

What ReactJS concept will be used to create this play?

  • React Functional Components
  • useState and useEffect
  • React DOM

Are you willing to take it up for implementation?

Yes, I am willing to take it up for implementation.

ScreenShots

2022-04-20 (4)

2022-04-20 (1)

Hooks in Actions

Thank You!

What's the Play about?

Combination of various inbuilt hooks to see how they work together.

What ReactJS concept will be used to create this play?

Hooks, Async/Await

Are you willing to take it up for implementation?

Yes

[Add a Play]: State of Component

Thank You!

What's the Play about?

It will tell about the state of react Components, what happens when you change a state in a functional component

What ReactJS concept will be used to create this play?

hooks, state management, state

Are you willing to take it up for implementation?

Yes

✨ [Feature request]: Filter Plays by Language

Is your feature request related to a problem? Please describe.
As we support both JS and TS BASED plays, provide ability to filter based on language.

Describe the solution you'd like
Add one more filter option for language with the existing filters.

Describe alternatives you've considered
None

Additional context
None

πŸ› [Bug report]: create-play not working with lower node versions

Describe the bug
In lower node versions (< 16), there is an issue with creating a new play by running yarn create-play or npm run create-play. The script works fine with node version 16.14.0.

To Reproduce
Steps to reproduce the behavior:

  1. Using nvm try to use a node version lower than 16 (probably 14) and run npm run create-play or yarn create-play.
  2. Fill necessary details.
  3. An error might be evident stating trim(...).replaceAll() is not a function!

Expected behavior
To create a play

Screenshots
Code_jzJJI3SB2p

Desktop (please complete the following information):

  • OS: [e.g. Windows 10]

πŸ› [Bug report]: Cancel button text

Description
The cancel button text is not visible.

Steps to reproduce the behaviour:

  1. Go to '/plays
  2. Click on filter plays
  3. See an error on filter modal

Expected behaviour
Cancel button text

Screenshots
Screenshot 2022-05-07 at 8 33 47 PM

Desktop (please complete the following information):

  • OS: MacOS
  • Browser chrome

[Add a Play]: Add a Social Card

Thank You!

What's the Play about?

The Play builds a Social Card with name, email, photo, social handles, etc.

What ReactJS concept will be used to create this play?

ReactJs Form handling, State handling, Context, Event Handling

Are you willing to take it up for implementation?

Yes.

✨ [Feature request]: Update Wiki

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

I was looking to add documentation for the new PlayMeta component, but I found out very quickly that github doesn't let you create a PR for wiki pages, so I have to do this instead

Describe the solution you'd like

Updating Wiki to include documentation for PlayMeta with text from here
( I will paste the raw text here as a comment if it looks good!)

Additional context
Maybe we could start adding propTypes to components for easier readability?
A propTypes object for PlayMeta would look like this:

PlayMeta.propTypes = {
  id: PropTypes.number, 
  name: PropTypes.string, 
  description: PropTypes.string, 
  path: PropTypes.string, 
  cover: PropTypes.string, 
  component: PropTypes.func 
}

Create a better 404 page

Is your feature request related to a problem? Please describe.
We have a 404 page but it is not that great. Make it better.

image

✨ [Feature request]: Generate a Readme.md file for each play

Is your feature request related to a problem? Please describe.
Each of the play can have its own documentation to tell what it is about, some code level details. So generate a Readme.md file as part of the play creation process.

Describe the solution you'd like
Create a automatic Readme file per play

Describe alternatives you've considered
Alternative is creating the read me manually

Additional context
None

πŸ’… Style the Home Page

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

πŸ› Clear Search and Filter when switching between pages

Describe the bug
Clear Search and Filter when switching between plages.

To Reproduce
Steps to reproduce the behavior:

  • From the landing page search/filter a play
  • Now click on a play to go to the play details. See the search is still retained.
  • It should be created. If you hit the back button of the browser, it still shows the searched/filtered list. Not the original list of play.

Expected behavior
Clear the search and filter when we go from the play listing to the play details page(on route change).

Screenshots
None

Additional context
Please reach out to @atapas if any clarifications needed.

Quizeo App

Thank You!

What's the Play about?

A react application of quizzes about favorite movies and series.

What ReactJS concept will be used to create this play?

Hooks, react-redux, reselect, and react-router

Are you willing to take it up for implementation?

yes

πŸ› [Bug report]: Deep Linking for the Plays fails. It shows a blank page.

Describe the bug
If you hit any play URL directly, it gives a blank page. It should show the play details page.

To Reproduce
Steps to reproduce the behavior:

  1. Open your browser
  2. Paste this URL: https://www.reactplay.io/plays/social-card and hit enter
  3. You will see a blank screen
  4. Error in the browser console

image

Expected behavior
The Play should be accessible with deep linking

Screenshots
A clear and concise description of what you expected to happen.

Desktop (please complete the following information):
All

Smartphone (please complete the following information):
All

Additional context
Moving to play detail from the play list works well.

✨ [Feature request]: Add shimmer effect for the play thumbnails

Is your feature request related to a problem? Please describe.
On the first load the images takes some time to get added to the DOM. We can use shimmer effect to make it look more pleasant.

Describe the solution you'd like
We can create our own Image component with a shimmer as a fallback or use any well reputated NPM package that does it well.

Describe alternatives you've considered
None

Additional context
None

πŸ› [Bug report]: Twitter meta tags don't work properly

Describe the bug

While embeds work on other sites, Twitter doesn't seem to be able to get the information it needs, and embed images do not work.

To Reproduce
Steps to reproduce the behavior:

  1. Go to Twitter.com
  2. Paste any link from reactplay.io
  3. See that while all other info is there, the embed image doesn't show up

Expected behavior

The embed image is supposed to work properly along with other info.

Screenshots

Embeds currently don't show any images.
image

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Chrome
  • Version: 100.0.4896.127

Will start working on this ASAP!

Todo List App

Thank You!

What's the Play about?

It is a ReactJs based Todo List Web app

What ReactJS concept will be used to create this play?

useState and useEffect hooks will be used.

πŸ› [Bug report]: Meta tags not being properly detected in some sites

Describe the bug

The new way of handling meta tags doesn't work in some sites/apps.

To Reproduce
Steps to reproduce the behavior:

  1. Go to any site that supports embeds
  2. Paste any link from the site
  3. See that no embed data shows up

Expected behavior

The embed data is supposed to show up without any issues.

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser Chrome (irrelevant to problem)

Additional context

I'm assuming this is caused by the meta tags initially not being available inside the index.html file.

I will start working on fixing this issue ASAP

✨ [Feature request]: Upgrade to Raect v18

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

Describe the solution you'd like
Upgrade React to its latest version.

Describe alternatives you've considered
NA

Additional context
NA

πŸ› [Bug report]:

Describe the bug
There is a typo in CREATE-PLAY.md. in line 87 as can be seen below

That's it. Now start coding yor Play using your favorite code editor!

[Add a Play]: TicTacToe

What's the Play about?

2 players Tic Tac Toe Game

What ReactJS concept will be used to create this play?

useState, react basics

Are you willing to take it up for implementation?

Yes

✨ [Feature request]: Add the number badge to the comment icon

Is your feature request related to a problem? Please describe.
Currently, each of the plays has a way to provide and view comments

image

It will be great if the icon indicates the number of comments a play has.

Describe the solution you'd like
The solution is to use the GitHub GraphQL API to fetch the number of discussions for a discussion id and show as a badge. The JSX part of the code is already there but commented.

Describe alternatives you've considered
If we can't show the number, let us at least indicate if the play has a comment or not with a visual clue.

Additional context
Read more about the comment system implementation from here: https://blog.greenroots.info/comment-system-using-react-and-github-discussions

✨ [Feature request]: Change meta information based on the route

Is your feature request related to a problem? Please describe.
What we share a play with its deep link URL, it takes the Reactplay platform's meta(og, Twitter) image, title, and description. Rather, it should display the cover image, title, and description of the play that we are sharing on social media.

Describe the solution you'd like
I do not have a solution proposed yet but the contributor can start a discussion with me to brainstorm.

Describe alternatives you've considered
None

Additional context
None

[Add a Play]: A Typescript based play

Thank You!

What's the Play about?

A good-first play based on TS

What ReactJS concept will be used to create this play?

TypeScript

Are you willing to take it up for implementation?

Yes

✨ [Feature request]: Create a Password Generator

Is your feature request related to a problem? Please describe.
Create a password generator with different complexities.

Describe the solution you'd like

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

✨ [Feature request]: Create a list of Play ideas

Is your feature request related to a problem? Please describe.
Create a page with a list of play ideas and categorize them by levels(Beginner, Intermediate, Advanced). It will help anyone to look into the list and create a play based on it.

Describe the solution you'd like
A separate page that lists all the play ideas wth descriptions.

Describe alternatives you've considered
NA

Additional context
NA

✨ [Feature request]: Create a Home page section for Twitter mentions

Is your feature request related to a problem? Please describe.
We need a place on the home page that brings the mentions we get for the ReactPlayIO Twitter handle.

Describe the solution you'd like
Make the Twitter API cal to fetch last 10 Tweets that mentioned the @ReactPlayIO handle and show them like cards,

Describe alternatives you've considered
NONE

Additional context
The Twitter API Key will be supplied by Admin.

[Add a Play]: Expanding Cards

Thank You!

What's the Play about?

What ReactJS concept will be used to create this play?

Are you willing to take it up for implementation?

✨ [Feature request]: Design the play not found page

Is your feature request related to a problem? Please describe.
The play not found page is not so designed, and there should also a button to navigate to all plays.

Describe the solution you'd like
Design the play not found page when didn't find any play and make it attractive.

Describe alternatives you've considered
Also add button to the page to navigate to all plays.

If this needs to be added, then I would like to work on this issue.

[Bug]: The puppeteer error while building

Discussed in #112

Originally posted by atapas April 28, 2022
@erayalkis

I am seeing this intermittent error in the log and it fails the build. Do you think, we have a fix for it? Starting this discussion, if you want to get to a root-cause, welcome. When you have a fix, let's convert this one to an issue.

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.