Feat new react-play: GitHub User Search

package.json

@@ -7,6 +7,7 @@
     "@types/lodash": "^4.14.182",
     "@types/react": "^18.0.6",
     "@types/react-dom": "^18.0.2",
+    "axios": "^0.27.2",
     "date-fns": "^2.28.0",
     "firebase": "^9.8.2",
     "lodash": "^4.17.21",

src/meta/play-meta.js

@@ -24,6 +24,7 @@ import {
   DynamicRoutes,
   SimpleLiveChat,
   FlipCardEffect,
+  GitHubUserSearch,
 } from "plays";
 
 export const plays = [
@@ -391,19 +392,24 @@ export const plays = [
     blog: "",
     video: "",
     language: "js",
-  }, {
-    id: 'pl-simple-live-chat', 
-    name: 'Simple Live Chat', 
-    description: 'Its a very simple live chat which is build using reactjs and firebase firestore',
-    component: () => {return <SimpleLiveChat />},
-    path: '/plays/simple-live-chat',
-    level: 'Intermediate',
-    tags: 'LiveChat,Firebase,React',
-    github: 'Angryman18',
-    cover: 'https://images.unsplash.com/photo-1522096823084-2d1aa8411c13?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;870&amp;q&#x3D;80',
-    blog: '',
-    video: '',
-    language: 'js'
+  },
+  {
+    id: "pl-simple-live-chat",
+    name: "Simple Live Chat",
+    description:
+      "Its a very simple live chat which is build using reactjs and firebase firestore",
+    component: () => {
+      return <SimpleLiveChat />;
+    },
+    path: "/plays/simple-live-chat",
+    level: "Intermediate",
+    tags: "LiveChat,Firebase,React",
+    github: "Angryman18",
+    cover:
+      "https://images.unsplash.com/photo-1522096823084-2d1aa8411c13?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;870&amp;q&#x3D;80",
+    blog: "",
+    video: "",
+    language: "js",
   },
   {
     id: "pl-flip-card-effect",
@@ -420,5 +426,21 @@ export const plays = [
     blog: "",
     video: "",
     language: "js",
+  },
+  {
+    id: "pl-github-user-search",
+    name: "GitHub User Search",
+    description: "A simple ReactJS application to search for GitHub users.",
+    component: () => {
+      return <GitHubUserSearch />;
+    },
+    path: "/plays/github-user-search",
+    level: "Beginner",
+    tags: "JSX,Tailwind,useState,Axios",
+    github: "TejasShekar",
+    cover: "",
+    blog: "",
+    video: "",
+    language: "js",
   }, //replace new play item here
 ];

src/plays/github-user-search/GitHubUserCard.jsx

@@ -0,0 +1,15 @@
+export const GitHubUserCard = ({username, avatar, link}) => {
+  return (
+    <a
+      href={link}
+      target="_blank"
+      rel="noreferrer"
+      style={{backgroundImage: `url(${avatar})`}}
+      className=" bg-cover bg-center h-[15rem] w-[15rem] rounded-lg flex flex-col justify-end"
+    >
+      <h1 className="text-2xl text-center xs:bg-black p-2 w-full rounded-lg text-white lg:h-full lg:opacity-0 lg:hover:opacity-80 lg:hover:bg-black ">
+        {username}
+      </h1>
+    </a>
+  );
+};

src/plays/github-user-search/GitHubUserSearch.jsx

@@ -0,0 +1,130 @@
+import {getPlayById} from "meta/play-meta-util";
+
+import PlayHeader from "common/playlists/PlayHeader";
+import "./gitHubUserSearch.css";
+import {useEffect, useState} from "react";
+import axios from "axios";
+import {GitHubUserCard} from "./GitHubUserCard";
+
+function GitHubUserSearch(props) {
+  // Do not remove the below lines.
+  // The following code is to fetch the current play from the URL
+  const {id} = props;
+  const play = getPlayById(id);
+
+  // Your Code Start below.
+  const [query, setQuery] = useState("");
+  const [resData, setData] = useState({
+    data: null,
+    remaining_searches: 0,
+    time_until_reset: null,
+  });
+  const [dataFetchStates, setDataFetchStates] = useState({
+    loading: false,
+    error: false,
+  });
+
+  const getResetTime = (time) => {
+    const newTime = new Date(time * 1000);
+    return newTime.toLocaleTimeString();
+  };
+
+  const getUsers = async () => {
+    try {
+      setDataFetchStates((prev) => ({
+        ...prev,
+        loading: true,
+      }));
+      const res = await axios.get(
+        `https://api.github.com/search/users?q=${query}&per_page=24`
+      );
+      setDataFetchStates((prev) => ({
+        ...prev,
+        loading: false,
+      }));
+      setData((prev) => ({...prev, data: res.data.items}));
+    } catch (error) {
+      setDataFetchStates((prev) => ({
+        ...prev,
+        loading: false,
+        error: true,
+      }));
+      setData((prev) => ({...prev, data: null}));
+    }
+  };
+
+  useEffect(() => {
+    (async function () {
+      const rate_limit = await axios.get("https://api.github.com/rate_limit");
+      const reset_time = getResetTime(rate_limit.data.resources.search.reset);
+      const reset_count = rate_limit.data.resources.search.remaining;
+      if (reset_count > 1)
+        setDataFetchStates((prev) => ({
+          ...prev,
+          error: false,
+        }));
+      setData((prev) => ({
+        ...prev,
+        remaining_searches: reset_count,
+        time_until_reset: reset_time,
+      }));
+    })();
+  }, [query, resData]);
+
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={play} />
+        <div className="play-details-body">
+          {/* Your Code Starts Here */}
+          <div className=" w-full flex items-center justify-center flex-col gap-4">
+            <input
+              className=" rounded-lg p-2 text-center"
+              type="search"
+              value={query}
+              placeholder="Enter query here"
+              onChange={(e) => setQuery(e.target.value)}
+            />
+            <button
+              className="bg-[#00f2fe] p-2 rounded-xl disabled:text-gray-500 disabled:cursor-not-allowed disabled:bg-[#00bbc5]"
+              onClick={getUsers}
+              disabled={query === "" || dataFetchStates.error ? true : false}
+            >
+              Search
+            </button>
+            {!resData.remaining_searches < 1 && (
+              <p>No. of searches remaining : {resData.remaining_searches}</p>
+            )}
+            {dataFetchStates.loading && <h2> L O A D I N G . . .</h2>}
+            {dataFetchStates.error && (
+              <h2>
+                You have exhausted your search limit. Try again after{" "}
+                {resData.time_until_reset}
+              </h2>
+            )}
+            {resData?.data?.length === 0 && (
+              <h1 className="text-3xl text-center">
+                No matching GitHub User Profiles
+              </h1>
+            )}
+            {!dataFetchStates.error && (
+              <div className="grid gap-2 grid-cols-[repeat(auto-fit,minmax(15rem,1fr))] w-full place-items-center">
+                {resData?.data?.map(({id, login, avatar_url, html_url}) => (
+                  <GitHubUserCard
+                    key={id}
+                    username={login}
+                    avatar={avatar_url}
+                    link={html_url}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+          {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default GitHubUserSearch;

src/plays/github-user-search/Readme.md

@@ -0,0 +1,27 @@
+# GitHub User Search
+
+A simple ReactJS application to search for GitHub users.
+
+## Play Demographic
+
+- Language: js
+- Level: Beginner
+
+## Creator Information
+
+- User: TejasShekar
+- Gihub Link: https://github.com/TejasShekar
+- Blog: 
+- Video: 
+
+## Implementation Details
+
+Update your implementation idea and details here
+
+## Consideration
+
+Update all considerations(if any)
+
+## Resources
+
+Update external resources(if any)

src/plays/github-user-search/gitHubUserSearch.css

@@ -0,0 +1 @@
+/* enter stlyes here */

src/plays/index.js

@@ -25,4 +25,5 @@ export { default as DynamicRoutes } from "plays/dynamic-routes/DynamicRoutes";
 export { default as Quizeo } from "plays/quizeo/src/Quizeo";
 export { default as SimpleLiveChat } from 'plays/simple-live-chat/SimpleLiveChat';
 export { default as FlipCardEffect } from 'plays/flip-card-effect/FlipCardEffect';
+export { default as GitHubUserSearch } from 'plays/github-user-search/GitHubUserSearch';
 //add export here

tailwind.config.js

@@ -1,9 +1,26 @@
 module.exports = {
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-  ],
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
+    screens: {
+      xs: {min: "310px"},
+      // => @media (min-width: 640px and max-width: 767px) { ... }
+
+      sm: {min: "640px"},
+      // => @media (min-width: 640px and max-width: 767px) { ... }
+
+      md: {min: "768px"},
+      // => @media (min-width: 768px and max-width: 1023px) { ... }
+
+      lg: {min: "1024px"},
+      // => @media (min-width: 1024px and max-width: 1279px) { ... }
+
+      xl: {min: "1280px"},
+      // => @media (min-width: 1280px and max-width: 1535px) { ... }
+
+      "2xl": {min: "1536px"},
+      // => @media (min-width: 1536px) { ... }
+    },
     extend: {},
   },
   plugins: [],
-}
+};