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

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!

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.

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

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.

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

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

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

Right now, we can select only a combination of 1 level, 1 creator, and 1 Tag at a time. We need to enable users to select multiple values from each of the criteria to form a filtering combination.

Describe the bug
We have found a warning in the build log

Need to fix it.

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

Describe the bug

Right now the Contribution section of the home page shows the "https://github.com/apps/allcontributors". We need to filter that out.

Is your feature request related to a problem? Please describe.
It is an enhancement.

Describe the solution you'd like
We need to integrate GA to see the metrics.

Describe alternatives you've considered
NA

Additional context
NA

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?

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.

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.

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.

Describe the bug
We do not need to commit the yarn lock file. Remove it and add the entry in the .gitignore.

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.

Is your feature request related to a problem? Please describe.
Now users can not comment on a Play. It will be great to give that ability. Also the ability to add reactions

Describe the solution you'd like
Allow users to reactions and comment on a Play.

More discussion: #53

Describe the bug
State play needs to have a cover and it is should be responsive.

Expected behavior
Play should have responsive design for desktop and small devices alike

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

Currently, users can apply filters but are not able to get how many filters are applied.It would be good if we show number of filters applied above the filter symbol

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

Need a feature that shows no play found when there is no match in filter and search result.

Currently, the screen is blank when there is no match found. It would be a good experience if there is some message showing no play match for the applied filter or search

Currently the yarn create-play command creates the play in JavaScript(JSX). Please add the support to create play scaffolding based on TypeScript.

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

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

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

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

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.

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

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

Describe the bug
Play details page masthead had tags, created by etc. These details are not wrapping consistently.

Expected behavior
Masthead details wrapping should be consistent for all variants.

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

The Play Clock flickers every second and not responsive on the small screen.

Is your feature request related to a problem? Please describe.
A short video explaining the mission, vision, and usages of ReactPlay will be very helpful for anyone new to get started.

Describe the solution you'd like

• Create a 2 mins video
• Post on YouTube
• Embed in the home page.

Describe alternatives you've considered
NA

Additional context
NA

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!

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

Desktop (please complete the following information):

• OS: [e.g. Windows 10]

Add the command for npm to create a new play in create-play.md

Describe the bug
RWD spacing adjustments needed for the homepage video.

Describe the bug
Home page github button with star and count is not looking odd.

Expected behavior
Home page github button with star and count should be aligned properly.

Discussed in #112

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

Desktop (please complete the following information):

• OS: MacOS
• Browser chrome

When there are more than 5 tags in the play page the content overflows in screens with width less than 435px

Steps to reproduce the behavior:

1. Go to https://www.reactplay.io/plays/expanding-cards
2. Open dev tools and minimize screen to 435 or less

The tags are expected to wrap up when content starts to overflow.

Screenshots

I would love to work on this bug. Thanks

I have added a new play! If you want, I will create a PR

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.

Desktop (please complete the following information):

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

Will start working on this ASAP!

Is your feature request related to a problem? Please describe.
Currently, the creator dropdown is a flat list. It doesn't give enough context of the GitHub profile

Describe the solution you'd like
Use a contact card drop-down instead

Describe alternatives you've considered
NA

Additional context
NA

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

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

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

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 
}

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.