reactplay · ammaaraslam · Jun 24, 2023 · Jun 24, 2023 · Jun 24, 2023 · Jun 24, 2023
diff --git a/.env.development b/.env.development
@@ -1,10 +1,10 @@
-REACT_APP_NHOST_BACKEND_URL=https://rgkjmwftqtbpayoyolwh.nhost.run
-REACT_APP_NHOST_VERSION=v1
-REACT_APP_NHOST_ENDPOINT=graphql
-REACT_APP_PLAY_WEB_SVC=https://api.reactplay.io/.netlify/functions/server
+VITE_NHOST_BACKEND_URL=https://rgkjmwftqtbpayoyolwh.nhost.run
+VITE_NHOST_VERSION=v1
+VITE_NHOST_ENDPOINT=graphql
+VITE_PLAY_WEB_SVC=https://api.reactplay.io/.netlify/functions/server
 DISABLE_ESLINT_PLUGIN=true
-REACT_APP_ACTIVITIES_ON=true
-REACT_APP_ACTIVITY_ID=hackrplay
-REACT_APP_DADJOKES_URL=https://jokeapi-v2.p.rapidapi.com/joke/
-REACT_APP_DADJOKES_APIKEY='b71df95c75msha446fab91d0e935p1d0262jsn1d938cb85502'
-REACT_APP_DADJOKES_APIHOST='jokeapi-v2.p.rapidapi.com'
+VITE_ACTIVITIES_ON=true
+VITE_ACTIVITY_ID=hackrplay
+VITE_DADJOKES_URL=https://jokeapi-v2.p.rapidapi.com/joke/
+VITE_DADJOKES_APIKEY='b71df95c75msha446fab91d0e935p1d0262jsn1d938cb85502'
+VITE_DADJOKES_APIHOST='jokeapi-v2.p.rapidapi.com'
diff --git a/index.html b/index.html
@@ -1,6 +1,56 @@
 <!DOCTYPE html>
-<object
-  type="text/html"
-  data="/.netlify/functions/server"
-  style="width:100%;height:100%;"
->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="canonical" href="https://reactplay.io" />
+    <link rel="apple-touch-icon" href="/logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:site" content="@ReactPlayIO" />
+
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap"
+      rel="stylesheet"
+    />
+
+    <title>ReactPlay - One app to learn, create, and share ReactJS projects.</title>
+    <script
+      async
+      data-website-id="%VITE_UMAMI_TRACK_ID%"
+      src="https://analytics.reactplay.io/script.js"
+    ></script>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root" class="app-container"></div>
+    <script type="module" src="/src/index.jsx"></script>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/netlify.toml b/netlify.toml
@@ -1,4 +1,4 @@
 [[redirects]]
   from = "/*"
-  to = "/index.html"
+  to = "/serverless.html"
   status = 200
diff --git a/package.json b/package.json
@@ -64,7 +64,6 @@
     "react-qr-code": "^2.0.7",
     "react-redux": "^8.0.1",
     "react-router-dom": "^6.4.0",
-    "react-scripts": "5.0.0",
     "react-shimmer-effect": "^1.0.9",
     "react-simple-maps": "^2.3.0",
     "react-toastify": "^9.0.8",
@@ -86,12 +85,10 @@
     "workbox-window": "^6.5.4"
   },
   "scripts": {
-    "start:nolint": "npx --yes create-react-play@latest -p && react-scripts start",
-    "start": "npx --yes create-react-play@latest -p && npm run lint && react-scripts start",
-    "build": "npx --yes create-react-play@latest -p && react-scripts build",
+    "start:nolint": "npx --yes create-react-play@latest -p && vite",
+    "start": "npx --yes create-react-play@latest -p && npm run lint && vite",
+    "build": "npx --yes create-react-play@latest -p && tsc && vite build",
     "snap": "react-snap",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
     "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
@@ -128,6 +125,7 @@
     "@types/dompurify": "^3.0.2",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.41.0",
+    "@vitejs/plugin-react": "^4.0.1",
     "autoprefixer": "^10.4.7",
     "cypress": "^10.6.0",
     "eslint": "^8.0.1",
@@ -146,8 +144,12 @@
     "prettier": "^2.7.1",
     "puppeteer": "^13.7.0",
     "react-snap": "^1.23.0",
+    "sass": "^1.63.6",
     "tailwind-scrollbar": "^2.1.0",
     "tailwindcss": "^3.0.24",
-    "typescript": "*"
+    "typescript": "*",
+    "vite": "^4.3.9",
+    "vite-plugin-svgr": "^3.2.0",
+    "vite-tsconfig-paths": "^4.2.0"
   }
 }
diff --git a/public/index.html b/public/index.html
diff --git a/serverless.html b/serverless.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<object
+  type="text/html"
+  data="/.netlify/functions/server"
+  style="width: 100%; height: 100%"
+></object>
diff --git a/src/common/Testimonial/TestimonialModal.jsx b/src/common/Testimonial/TestimonialModal.jsx
@@ -4,7 +4,6 @@ import ModalClose from '@mui/joy/ModalClose';
 import Typography from '@mui/joy/Typography';
 import Sheet from '@mui/joy/Sheet';
 import { useUserDisplayName, useUserId } from '@nhost/react';
-import { Box } from '@mui/material';
 import Button from '@mui/joy/Button';
 import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
@@ -18,6 +17,7 @@ import { submit } from 'common/services/request';
 import { toast, ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import DOMPurify from 'dompurify';
+import Box from '@mui/material/Box';
 
 export default function TestimonialModal({ isOpen, setIsOpen }) {
   const userDisplayName = useUserDisplayName();

diff --git a/src/common/activities/ActivityBanner.jsx b/src/common/activities/ActivityBanner.jsx
@@ -21,7 +21,7 @@ function ActivityBanner({ currentActivity }) {
           <img
             alt="HRP Logo"
             className="w-10/12 md:w-64 lg:w-auto ml-auto mr-auto lg:ml-0 lg:mr-0 lg:inline-block"
-            src={require(`${logo}`)}
+            src={logo}
           />
         </h1>
         <div className="my-2 md:my-4 md:text-xl">
@@ -58,7 +58,7 @@ function ActivityBanner({ currentActivity }) {
         </div>
       </div>
       <div>
-        <img alt="" className="hackathon-banner-image" src={require(`${heroImage}`)} />
+        <img alt="" className="hackathon-banner-image" src={heroImage} />
       </div>
     </div>
   );

diff --git a/src/common/activities/activitiesConfig.js b/src/common/activities/activitiesConfig.js
@@ -1,20 +1,25 @@
+import hackrplayLogo from './hackathon/Logo.svg';
+import hackrPlayHero from './hackathon/img-hero-coders.png';
+import twoPlaysAMonthLogo from './2playsamonth/BannerLogo.png';
+import twoPlaysAMonthHero from './2playsamonth/HeroCoders.png';
+
 export const activities = [
   {
     id: 'hackrplay',
     name: 'HACK-R-PLAY 2.0',
     subtitle: 'Developers and Hacking are inseparable!',
     description:
       'ReactPlay brings you the opportunity to take part in the Hackathon and learn from it. Showcase your mindblowing ideas, collaborate, and build projects - there are also chances to win exciting prizes.',
-    logo: './hackathon/Logo.svg',
-    heroImage: './hackathon/img-hero-coders.png'
+    logo: hackrplayLogo,
+    heroImage: hackrPlayHero
   },
   {
     id: '2playsamonth',
     name: '#2Plays-A-Month',
     subtitle: 'Learning is a journey than a destination.',
     description:
       'ReactPlay brings you an opportunity to participate in the month-long drive to learn and contribute to Open Source. Join the #2PlaysAMonth and build two projects(plays) in the month of February. You will learn from expert code reviews while contributing to Open Source - you may also win some exciting prizes.',
-    logo: './2playsamonth/BannerLogo.png',
-    heroImage: './2playsamonth/HeroCoders.png'
+    logo: twoPlaysAMonthLogo,
+    heroImage: twoPlaysAMonthHero
   }
 ];
diff --git a/src/common/components/Comment.jsx b/src/common/components/Comment.jsx
@@ -1,9 +1,9 @@
 import Giscus from '@giscus/react';
 
 const Comment = () => {
-  const projectRepoId = process.env.REACT_APP_GISCUS_PROJECT_REPO_ID;
-  const discussionCategoryId = process.env.REACT_APP_GISCUS_DISCUSSION_CATEGORY_ID;
-  const discussionCategoryName = process.env.REACT_APP_GISCUS_DISCUSSION_CATEGORY_NAME;
+  const projectRepoId = import.meta.env.VITE_GISCUS_PROJECT_REPO_ID;
+  const discussionCategoryId = import.meta.env.VITE_GISCUS_DISCUSSION_CATEGORY_ID;
+  const discussionCategoryName = import.meta.env.VITE_GISCUS_DISCUSSION_CATEGORY_NAME;
 
   return (
     <>

diff --git a/src/common/const/nhost.js b/src/common/const/nhost.js
@@ -1,6 +1,6 @@
 const AUTH_URL = (redirectURL, provider = 'github') => {
   return `${
-    process.env.REACT_APP_NHOST_BACKEND_URL
+    import.meta.env.VITE_NHOST_BACKEND_URL
   }/v1/auth/signin/provider/${provider}?redirectTo=${encodeURI(redirectURL)}`;
 };
 

diff --git a/src/common/createplay/CreatePlay.jsx b/src/common/createplay/CreatePlay.jsx
@@ -173,7 +173,7 @@ const CreatePlay = () => {
 
   if (!isAuthenticated && !isEditPlay) {
     window.location = NHOST.AUTH_URL(
-      `http://localhost:${process.env.RAECT_APP_DEV_PORT ?? '3000'}/plays/create`
+      `http://localhost:${import.meta.env.RAECT_APP_DEV_PORT ?? '3000'}/plays/create`
     );
 
     return null;

diff --git a/src/common/header/Header.jsx b/src/common/header/Header.jsx
@@ -101,7 +101,7 @@ const Header = () => {
           showHideBits.setHeaderStyle
             ? ''
             : ` app-header-home ${
-                process.env.REACT_APP_ACTIVITIES_ON === 'true' && showHideBits.showActivityTimer
+                import.meta.env.VITE_ACTIVITIES_ON === 'true' && showHideBits.showActivityTimer
                   ? 'app-header-home--promo'
                   : null
               } `
@@ -118,7 +118,7 @@ const Header = () => {
         </div>
         <HeaderNav showBrowse={showHideBits.showBrowse} />
       </header>
-      {process.env.REACT_APP_ACTIVITIES_ON === 'true' && showHideBits.showActivityTimer && (
+      {import.meta.env.VITE_ACTIVITIES_ON === 'true' && showHideBits.showActivityTimer && (
         <Countdown date={new Date(1675209600000)} renderer={activityTimerRenderer} />
       )}
     </>

diff --git a/src/common/header/HeaderNav.jsx b/src/common/header/HeaderNav.jsx
@@ -8,9 +8,10 @@ import { IoAddSharp, IoShareSocial, IoHeartSharp } from 'react-icons/io5';
 import { MdManageSearch, MdClose, MdEvent } from 'react-icons/md';
 import SocialShare from 'common/components/SocialShare';
 import { GoX } from 'react-icons/go';
-import { Modal, Box, Typography, Menu } from '@mui/material';
+import { Modal, Typography, Menu } from '@mui/material';
 import { useSearchContext } from 'common/search/search-context';
 import { CREATE_PLAY_DOC_LINK, UMAMI_EVENTS } from 'constants';
+import Box from '@mui/material/Box';
 
 const HeaderNav = ({ showBrowse }) => {
   const { showShareModal, setShowShareModal } = useSearchContext();
@@ -100,7 +101,7 @@ const HeaderNav = ({ showBrowse }) => {
             </a>
           </li>
           <li className="menu-spacer">
-            {process.env.NODE_ENV === 'development' ? (
+            {import.meta.env.NODE_ENV === 'development' ? (
               <a
                 className="app-header-btn app-header-btn--primary"
                 data-testid="create-btn"

diff --git a/src/common/home/Home.jsx b/src/common/home/Home.jsx
@@ -29,7 +29,7 @@ const Home = () => {
   }, [data, setSearchTerm, searchTerm, setFilterQuery]);
 
   // eslint-disable-next-line no-console
-  console.log('process.env.REACT_APP_ACTIVITIES_ON', process.env.REACT_APP_ACTIVITIES_ON);
+  console.log('import.meta.env.VITE_ACTIVITIES_ON', import.meta.env.VITE_ACTIVITIES_ON);
 
   return (
     <main>
@@ -40,8 +40,8 @@ const Home = () => {
           <Flower className="home-bg-graphics-lg" />
         </div>
         <div className="app-home-body-content">
-          {process.env.REACT_APP_ACTIVITIES_ON && process.env.REACT_APP_ACTIVITIES_ON === 'true' ? (
-            <ActivityBanner currentActivity={process.env.REACT_APP_ACTIVITY_ID} />
+          {import.meta.env.VITE_ACTIVITIES_ON && import.meta.env.VITE_ACTIVITIES_ON === 'true' ? (
+            <ActivityBanner currentActivity={import.meta.env.VITE_ACTIVITY_ID} />
           ) : (
             <DefaultBanner />
           )}

diff --git a/src/common/playideas/PlayIdeas.jsx b/src/common/playideas/PlayIdeas.jsx
@@ -133,7 +133,7 @@ const PlayIdeas = () => {
                   <LevelBadge level={idea.level} />
                 </p>
                 <div className="idea-actions">
-                  {process.env.NODE_ENV === 'development' ? (
+                  {import.meta.env.NODE_ENV === 'development' ? (
                     <a
                       className="btn-primary action-btn"
                       href="/plays/create"

diff --git a/src/common/playleaderboard/LeaderBoard.jsx b/src/common/playleaderboard/LeaderBoard.jsx
@@ -44,7 +44,7 @@ const LeaderBoard = () => {
 
   useEffect(() => {
     async function fetchData() {
-      const res = await fetch(`${process.env.REACT_APP_PLAY_WEB_SVC}/api/plays/published`);
+      const res = await fetch(`${import.meta.env.VITE_PLAY_WEB_SVC}/api/plays/published`);
       const data = await res.json();
       updatePublishedPlays(data);
     }

diff --git a/src/common/playlists/PlayHeaderActions.jsx b/src/common/playlists/PlayHeaderActions.jsx
@@ -103,8 +103,6 @@ const PlayHeaderActions = ({ play }) => {
           className="action"
           href={`https://github.com/reactplay/react-play/tree/main/src${play.path}`}
           rel="noopener noreferrer"
-          rel="noopener noreferrer"
-          target="_blank"
           target="_blank"
         >
           <BsGithub className="icon" size="24px" />

diff --git a/src/common/routing/RouteDefs.jsx b/src/common/routing/RouteDefs.jsx
@@ -19,7 +19,7 @@ import { NhostClient, NhostReactProvider } from '@nhost/react';
 import BadgesDashboard from 'common/badges-dashboard';
 
 const nhost = new NhostClient({
-  backendUrl: process.env.REACT_APP_NHOST_BACKEND_URL || ''
+  backendUrl: import.meta.env.VITE_NHOST_BACKEND_URL || ''
 });
 
 const RouteDefs = () => {
@@ -49,7 +49,7 @@ const RouteDefs = () => {
           <Route element={<App />} path="/plays">
             <Route index element={<PlayList />} />
             <Route exact element={<CreatePlay />} path="create" />
-            {process.env.NODE_ENV === 'development' && (
+            {import.meta.env.NODE_ENV === 'development' && (
               <Route exact element={<PlayCreated />} path="created/:playid" />
             )}
             <Route exact idex element={<PlayMeta />} path=":username">