Reduce Loading Time by pre-fetching data at time of building

ayu023ban · Feb 14, 2024 · 572f585 · 572f585
1 parent 766151d
commit 572f585
Show file tree

Hide file tree

Showing 12 changed files with 174 additions and 25 deletions.
diff --git a/.env_stencil b/.env_stencil
@@ -1,6 +1,6 @@
 REACT_APP_GITHUB_REPO=https://github.com/ayu023ban/new_portfolio
 REACT_APP_TITLE=Ayush Bansal | Software Developer
-REACT_APP_WEBSITE_URL=ayushbansal.me
+REACT_APP_WEBSITE_URL=ayu023ban.github.io
 REACT_APP_WEBSITE_VERSION=1
 REACT_APP_DESCRIPTION=Portfolio of Ayush Bansal | Software Developer
 REACT_APP_JSONBIN_MASTER_KEY=ENTER_YOUR_KEY
diff --git a/.github/workflows/deploy-to-gh-pages.yml b/.github/workflows/deploy-to-gh-pages.yml
@@ -9,11 +9,18 @@ jobs:
     environment: github-pages
     steps:
       - name: Checkout 🛎️
-        uses: actions/[email protected]
+        uses: actions/checkout@v3
+
+      - name: Install NodeJS
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16.16.0'
+          cache: 'yarn'
 
       - name: Install and Build 🔧
         run: |
           yarn install
+          yarn fetch_data
           yarn run build
         env:
           REACT_APP_GITHUB_REPO: ${{ secrets.REACT_APP_GITHUB_REPO }}

diff --git a/.gitignore b/.gitignore
@@ -106,4 +106,7 @@ dist
 # TernJS port file
 .tern-port
 
-.env
+.env
+
+.vscode
+src/data/data.json
diff --git a/README.md b/README.md
@@ -1,6 +1,5 @@
 <h1 align="center"> My Portfolio 👋</h1>
 
-A Tracker to Check the availability of vaccine through pincode and buzzer in case of availability
 
 ### 🏠 [Homepage](https://github.com/ayu023ban/ayu023ban.github.io#readme)
 
@@ -41,6 +40,7 @@ yarn install
 
 
 ```
+yarn fetch_data
 yarn start
 ```
 

diff --git a/package.json b/package.json
@@ -3,17 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "homepage": "https://ayu023ban.github.io",
+  "type": "module",
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "dotenv": "^16.4.4",
     "levenary": "^1.1.1",
+    "node-fetch": "^3.3.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "2.1.8",
     "scroll-behavior-polyfill": "^2.0.13"
   },
   "scripts": {
+    "fetch_data": "node scripts/fetch_data.js",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

diff --git a/public/index.html b/public/index.html
@@ -49,6 +49,8 @@
       src="https://kit.fontawesome.com/689a837a3a.js"
       crossorigin="anonymous"
     ></script>
+    <meta name="keywords" content="portfolio,ayush,bansal,web,developer,microsoft,software">
+    <meta name="robots" content="index, follow">
     <title>%REACT_APP_TITLE%</title>
   </head>
   <body>

diff --git a/scripts/fetch_data.js b/scripts/fetch_data.js
@@ -0,0 +1,37 @@
+import fs from 'fs'
+import {profileData, jobsData, projectsData, configData} from "../src/data/onlineDataMap.js"
+import { config } from 'dotenv';
+import path from 'path';
+import {getRequest} from '../src/services/networkService.js'
+
+
+const nodeEnv = process.env.NODE_ENV || '';
+config({ path: path.resolve(process.cwd(), `.env${nodeEnv ? '.' + nodeEnv : ''}`) });
+
+const root = "https://api.jsonbin.io/v3/b";
+const data = {};
+let promises = []
+
+promises.push(getRequest(`${root}/${profileData}/latest/`).then((res) => {
+    data.profile = res;
+  }))
+
+  promises.push(getRequest(`${root}/${jobsData}/latest/`).then((res) => {
+    data.job = res
+}));
+
+promises.push(getRequest(`${root}/${projectsData}/latest/`).then((res) => {
+    data.projects = res;
+
+}))
+
+promises.push(getRequest(`${root}/${configData}/latest/`).then((res) => {
+    data.config = res
+}))
+
+
+Promise.all(promises).then(() => 
+{
+    fs.writeFile('src/data/data.json', JSON.stringify(data), (err) => {
+    })
+}).catch(err => console.log(err))
diff --git a/src/components/Loader/Loader.js b/src/components/Loader/Loader.js
@@ -0,0 +1,9 @@
+import React from "react";
+import classes from "./Loader.module.css";
+export default ()  => {
+    return (
+    <div className={classes.Container}>
+        <div className={classes.Loader}></div>
+    </div>
+    )
+}
diff --git a/src/components/Loader/Loader.module.css b/src/components/Loader/Loader.module.css
@@ -0,0 +1,51 @@
+.Container {
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    background-color: #183c44;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+  }
+
+  .Loader {
+    width: 8vmax;
+    height: 8vmax;
+    border-right: 4px solid #7fffd4;
+    border-radius: 100%;
+    animation: spinRight 800ms linear infinite;
+
+    &:before, &:after {
+      content: '';
+      width: 6vmax;
+      height: 6vmax;
+      display: block;
+      position: absolute;
+      top: calc(50% - 3vmax);
+      left: calc(50% - 3vmax);
+      border-left: 3px solid #7fffd4;
+      border-radius: 100%;
+      animation: spinLeft 800ms linear infinite;
+    }
+
+    &:after {
+      width: 4vmax;
+      height: 4vmax;
+      top: calc(50% - 2vmax);
+      left: calc(50% - 2vmax);
+      border: 0;
+      border-right: 2px solid #7fffd4;
+      animation: none;
+    }
+  }
+
+  @keyframes spinLeft {
+    from {transform:rotate(0deg);}
+    to {transform:rotate(720deg);}
+  }
+
+  @keyframes spinRight {
+    from {transform:rotate(360deg);}
+    to {transform:rotate(0deg);}
+  }
diff --git a/src/hoc/DataContext.js b/src/hoc/DataContext.js
@@ -1,11 +1,5 @@
 import React, { useEffect, useState } from "react";
-import {
-  configData,
-  jobsData,
-  profileData,
-  projectsData,
-} from "../data/onlineDataMap";
-import { getRequest } from "../services/networkService";
+import data from '../data/data.json';
 
 export const DataContext = React.createContext();
 
@@ -19,19 +13,10 @@ export default ({ children }) => {
   const [config, setConfig] = useState({ max_project_to_show: 3 });
 
   useEffect(() => {
-    const root = "https://api.jsonbin.io/v3/b";
-    getRequest(`${root}/${profileData}/latest/`).then((res) => {
-      setProfile(res);
-    });
-    getRequest(`${root}/${jobsData}/latest/`).then((res) => {
-      setJobs(res);
-    });
-    getRequest(`${root}/${projectsData}/latest/`).then((res) => {
-      setProjects(res);
-    });
-    getRequest(`${root}/${configData}/latest/`).then((res) => {
-      setConfig(res);
-    });
+    setProfile(data.profile);
+    setConfig(data.config);
+    setJobs(data.job);
+    setProjects(data.projects);
   }, []);
 
   return (

diff --git a/src/services/networkService.js b/src/services/networkService.js
@@ -1,9 +1,16 @@
+import fetch from 'node-fetch';
+
 export function getRequest(url) {
   const headers = {
     "X-Master-Key": process.env.REACT_APP_JSONBIN_MASTER_KEY,
     "X-Bin-Meta": false,
   };
   return fetch(url, { method: "GET", headers: headers }).then((res) =>
-    res.json()
+    {
+      if(res.status !== 200){
+        throw new Error(`Error fetching data with code ${res.status}`);
+      }
+      return res.json()
+    }
   );
 }
diff --git a/yarn.lock b/yarn.lock
@@ -3745,6 +3745,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+data-uri-to-buffer@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz#d8feb2b2881e6a4f58c2e08acfd0e2834e26222e"
+  integrity sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==
+
 data-urls@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/data-urls/-/data-urls-1.1.0.tgz"
@@ -4077,6 +4082,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.0.0.tgz#24e37c041741c5f4b25324958ebbc34bca965935"
   integrity sha512-FlWbnhgjtwD+uNLUGHbMykMOYQaTivdHEmYwAKFjn6GKe/CqY0fNae93ZHTd20snh9ZLr8mTzIL9m0APQ1pjQg==
 
+dotenv@^16.4.4:
+  version "16.4.4"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.4.tgz#a26e7bb95ebd36272ebb56edb80b826aecf224c1"
+  integrity sha512-XvPXc8XAQThSjAbY6cQ/9PcBXmFoWuw1sQ3b8HqUCR6ziGXjkTi//kB9SWa2UwqlgdAIuRqAa/9hVljzPehbYg==
+
 duplexer@^0.1.1:
   version "0.1.2"
   resolved "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz"
@@ -4750,6 +4760,14 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
+fetch-blob@^3.1.2, fetch-blob@^3.1.4:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/fetch-blob/-/fetch-blob-3.2.0.tgz#f09b8d4bbd45adc6f0c20b7e787e793e309dcce9"
+  integrity sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==
+  dependencies:
+    node-domexception "^1.0.0"
+    web-streams-polyfill "^3.0.3"
+
 figgy-pudding@^3.5.1:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
@@ -5000,6 +5018,13 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+formdata-polyfill@^4.0.10:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz#24807c31c9d402e002ab3d8c720144ceb8848423"
+  integrity sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==
+  dependencies:
+    fetch-blob "^3.1.2"
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz"
@@ -7547,6 +7572,20 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
+node-domexception@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-domexception/-/node-domexception-1.0.0.tgz#6888db46a1f71c0b76b3f7555016b63fe64766e5"
+  integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==
+
+node-fetch@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.3.2.tgz#d1e889bacdf733b4ff3b2b243eb7a12866a0b78b"
+  integrity sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==
+  dependencies:
+    data-uri-to-buffer "^4.0.0"
+    fetch-blob "^3.1.4"
+    formdata-polyfill "^4.0.10"
+
 node-forge@^0.10.0:
   version "0.10.0"
   resolved "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz"
@@ -11068,6 +11107,11 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
+web-streams-polyfill@^3.0.3:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.3.2.tgz#32e26522e05128203a7de59519be3c648004343b"
+  integrity sha512-3pRGuxRF5gpuZc0W+EpwQRmCD7gRqcDOMt688KmdlDAgAyaB1XlN0zq2njfDNm44XVdIouE7pZ6GzbdyH47uIQ==
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz"