Merged main

.all-contributorsrc

@@ -94,6 +94,15 @@
  "contributions": [
  "code"
  ]
+ },
+ {
+ "login": "nirban256",
+ "name": "Nirban Chakraborty",
+ "avatar_url": "https://avatars.githubusercontent.com/u/74231771?v=4",
+ "profile": "https://nirban-chakraborty.netlify.app",
+ "contributions": [
+ "code"
+ ]
  }
  ],
  "contributorsPerLine": 7,

.gitignore

@@ -12,14 +12,16 @@
 /build
 
 # misc
+.env
 .DS_Store
 .env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
-.package-lock.json
+package-lock.json
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock

README.md

@@ -1,6 +1,6 @@
 # ReactPlay(Repo: `react-play`)
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <p align="center">
@@ -178,6 +178,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
  <td align="center"><a href="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/6km"><img src="https://avatars.githubusercontent.com/u/62352949?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mohammed Taha</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=6km" title="Code">💻</a></td>
  <td align="center"><a href="https://dalpatrathoredev.web.app"><img src="https://avatars.githubusercontent.com/u/69510006?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dalpat Rathore</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=DalpatRathore" title="Code">💻</a></td>
  <td align="center"><a href="http:https://erayalkis.netlify.app"><img src="https://avatars.githubusercontent.com/u/80722863?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Eray Alkış</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=erayalkis" title="Code">💻</a></td>
+ <td align="center"><a href="https://nirban-chakraborty.netlify.app"><img src="https://avatars.githubusercontent.com/u/74231771?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nirban Chakraborty</b></sub></a><br /><a href="https://github.com/atapas/react-play/commits?author=nirban256" title="Code">💻</a></td>
  </tr>
 </table>
 

package.json

@@ -1,6 +1,6 @@
 {
- "name": "movie-app",
- "version": "0.1.0",
+ "name": "react-play",
+ "version": "1.0.0",
  "private": true,
  "dependencies": {
  "@giscus/react": "^2.0.3",

public/index.html

@@ -8,61 +8,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta property="og:type" content="website" />
- <meta property="og:site_name" content="ReactPlay" />
- <meta property="og:image:type" content="image/png" />
- <meta property="og:image:width" content="400" />
- <meta property="og:image:height" content="300" />
- <meta name="twitter:card" content="summary_large_image" />
- <meta
- name="description"
- content="ReactPlay is an open-source application to learn, create and
- share ReactJS projects with the developer community."
- data-react-helmet="true"
- />
- <meta
- property="og:description"
- content="ReactPlay is an open-source application to learn, create and
- share ReactJS projects with the developer community."
- data-react-helmet="true"
- />
- <meta
- property="og:title"
- content="ReactPlay - One app to learn, create, and share ReactJS projects."
- data-react-helmet="true"
- />
- <meta
- property="og:image"
- content="/og-image.png"
- these
- to
- public
- data-react-helmet="true"
- />
- <meta
- property="og:image:alt"
- content="Start React Code Arena with ReactPlay"
- data-react-helmet="true"
- />
- <meta name="twitter:site" content="@ReactPlayIO" data-react-helmet="true" />
- <meta
- name="twitter:title"
- content="ReactPlay - One app to learn, create, and share ReactJS projects."
- data-react-helmet="true"
- />
- <meta
- name="twitter:description"
- content="ReactPlay is an open-source application to learn, create and
- share ReactJS projects with the developer community."
- data-react-helmet="true"
- />
- <meta
- name="twitter:image"
- content="/og-image.png"
- these
- to
- public
- data-react-helmet="true"
- />
+ <meta name="twitter:site" content="@ReactPlayIO" />
 
  <!--
  manifest.json provides metadata used when your web app is installed on a

src/common/playlists/PlayList.jsx

@@ -1,10 +1,17 @@
 import { useSearchFilter } from "common/search/hooks/useSearchFilter";
 import PlayThumbnail from "./PlayThumbnail";
 
-import './playlist.css';
+import "./playlist.css";
 
 const PlayList = () => {
  const plays = useSearchFilter();
+ if (plays.length === 0) {
+ return (
+ <div className="play-not-found">
+ <h2>Play Not Found</h2>
+ </div>
+ );
+ }
  return (
  <>
  <ol className="list-plays">
@@ -13,6 +20,7 @@ const PlayList = () => {
  ))}
  </ol>
  </>
- )};
+ );
+};
 
 export default PlayList;

src/common/playlists/PlayMeta.jsx

@@ -10,7 +10,8 @@ function PlayMeta({ id, name, description, path, cover, component }) {
  } else {
  try {
  // If not, try finding the cover.png in the play's folder
- metaImage = require(`../../plays/${playFolder}/cover.png`);
+ metaImage = `https://reactplay.io${require(`../../plays/${playFolder}/cover.png`)}`; // It seems that
+ // some platforms such as Twitter need full, explicit URL's to display images correctly
  } catch {
  // If no image is available, cover stays as undefined
  console.log("No cover available.");

src/meta/DefMeta.jsx

@@ -3,6 +3,12 @@ import { Helmet } from "react-helmet";
 function DefMeta() {
  return (
  <Helmet>
+ <meta property="og:type" content="website" />
+ <meta property="og:site_name" content="ReactPlay" />
+ <meta property="og:image:type" content="image/png" />
+ <meta property="og:image:width" content="400" />
+ <meta property="og:image:height" content="300" />
+ <meta name="twitter:card" content="summary_large_image" />
  <meta
  name="description"
  content="ReactPlay is an open-source application to learn, create and
@@ -22,19 +28,14 @@ function DefMeta() {
  />
  <meta
  property="og:image"
- content="/og-image.png" // React should default these to public
+ content="https://reactplay.io/og-image.png" // React should default these to public
  data-react-helmet="true"
  />
  <meta
  property="og:image:alt"
  content="Start React Code Arena with ReactPlay"
  data-react-helmet="true"
  />
- <meta
- name="twitter:site"
- content="@ReactPlayIO"
- data-react-helmet="true"
- />
  <meta
  name="twitter:title"
  content="ReactPlay - One app to learn, create, and share ReactJS projects."
@@ -48,7 +49,7 @@ function DefMeta() {
  />
  <meta
  name="twitter:image"
- content="/og-image.png" // React should default these to public
+ content="https://reactplay.io/og-image.png" // React should default these to public
  data-react-helmet="true"
  />
  </Helmet>

src/meta/play-meta.js

@@ -1,22 +1,22 @@
-
 import {
  BasicTree, CdTimerComp,
  CurrentTimer,
  MovieContainer,
  WhyReact,
  CounterApp,
-States,
-SocialCard,
-RandomMemeGenerator,
-//import play here
+ States,
+ SocialCard,
+ RandomMemeGenerator,
+ ReactTodoApp,
+ //import play here
 } from "plays";
 
 export const plays = [
  {
  id: 'pl-0001',
  name: 'Why React',
  description: 'A simple application to demonstrate JSX usages',
- component: () => {return <WhyReact />},
+ component: () => { return <WhyReact /> },
  path: '/plays/why-react',
  index: true,
  level: 'Beginner',
@@ -27,7 +27,7 @@ export const plays = [
  id: 'pl-0002',
  name: 'Clock',
  description: 'This application shows the current time and it increases every second',
- component: () => {return <CurrentTimer />},
+ component: () => { return <CurrentTimer /> },
  path: '/plays/clock',
  level: 'Beginner',
  tags: 'JSX, Schedule',
@@ -39,7 +39,7 @@ export const plays = [
  id: 'pl-0003',
  name: 'Countdown Timer',
  description: 'It is a timer that fires every second and decreases the time',
- component: () => {return <CdTimerComp />},
+ component: () => { return <CdTimerComp /> },
  path: '/plays/date-time-counter',
  level: 'Intermediate',
  tags: 'Schedule, Component Structure, Hooks, Custom Hooks',
@@ -50,7 +50,7 @@ export const plays = [
  id: 'pl-0004',
  name: 'Movies',
  description: 'A list of movies from API call.',
- component: () => {return <MovieContainer />},
+ component: () => { return <MovieContainer /> },
  path: '/plays/movies',
  level: 'Intermediate',
  tags: 'Fetch Data, Hooks',
@@ -62,38 +62,38 @@ export const plays = [
  id: 'pl-0005',
  name: 'Organization Tree',
  description: 'A simple org tree',
- component: () => {return <BasicTree />},
+ component: () => { return <BasicTree /> },
  path: '/plays/org-tree',
  level: 'Intermediate',
  tags: 'Recursion, Tree',
  github: 'green-roots',
  featured: true
  }, {
- id: 'pl-counter', 
- name: 'Counter', 
+ id: 'pl-counter',
+ name: 'Counter',
  description: 'A simple counter which increments the value upto a certain limit!',
- component: () => {return <CounterApp />},
+ component: () => { return <CounterApp /> },
  path: '/plays/counter',
  level: 'Beginner',
  tags: 'JSX, State, Props',
  github: 'murtuzaalisurti',
  featured: true
  }, {
- id: 'pl-states', 
- name: 'States', 
+ id: 'pl-states',
+ name: 'States',
  description: 'States in Functional Components',
- component: () => {return <States />},
+ component: () => { return <States /> },
  path: '/plays/states',
  level: 'Beginner',
  tags: 'Hooks,State,JSX',
  github: 'Abhishek-90',
  cover: '',
  blog: 'https://abhishek-90.github.io/My-Portfolio/'
  }, {
- id: 'pl-social-card', 
- name: 'Social Card', 
+ id: 'pl-social-card',
+ name: 'Social Card',
  description: 'The Social Card helps you telling who you are using photo, name, and other social footprints.',
- component: () => {return <SocialCard />},
+ component: () => { return <SocialCard /> },
  path: '/plays/social-card',
  level: 'Intermediate',
  tags: 'Form,Events,Complex State',
@@ -102,19 +102,30 @@ export const plays = [
  blog: 'https://blog.greenroots.info/how-to-create-react-form-with-a-single-change-event-handler',
  video: ''
  }, {
- id: 'pl-random-meme-generator', 
- name: 'Random Meme Generator', 
+ id: 'pl-random-meme-generator',
+ name: 'Random Meme Generator',
  description: 'A project to demonstrate the use of API to fetch random memes! It also demonstrates how you can do event handling!',
- component: () => {return <RandomMemeGenerator />},
+ component: () => { return <RandomMemeGenerator /> },
  path: '/plays/random-meme-generator',
  level: 'Beginner',
  tags: 'JSX,Hooks,API,EventHandling',
  github: 'murtuzaalisurti',
  cover: '',
  blog: '',
  video: ''
+ }, {
+ id: 'pl-react-todo-app',
+ name: 'React Todo App',
+ description: 'It is a simple Todo App which keeps track of your regular work',
+ component: () => { return <ReactTodoApp /> },
+ path: '/plays/react-todo-app',
+ level: 'Beginner',
+ tags: 'ReactHooks, JavaScript, Css, React State',
+ github: 'nirban256',
+ cover: 'https://res.cloudinary.com/atapas/image/upload/v1650866465/demos/cover_y20bzk.png',
+ blog: '',
+ video: ''
  }, //replace new play item here
 ];
 
 
-

src/plays/index.js

@@ -9,4 +9,5 @@ export { default as CounterApp } from 'plays/counter/CounterApp';
 export { default as States } from 'plays/states/States';
 export { default as SocialCard } from 'plays/social-card/SocialCard';
 export { default as RandomMemeGenerator } from 'plays/random-meme-generator/RandomMemeGenerator';
+export { default as ReactTodoApp } from 'plays/react-todo-app/ReactTodoApp';
 //add export here