From db124b9c9b66b4c84dbf8fb4f1d1b42ff861006a Mon Sep 17 00:00:00 2001
From: Yehia Rasheed <157399068+yehiarasheed@users.noreply.github.com>
Date: Thu, 17 Oct 2024 22:44:37 +0300
Subject: [PATCH 1/4] feat: change index.js to load tweets dynamically from
 userTweets.js (to be added)

---
 apps/website/src/pages/index.js | 201 ++++++++------------------------
 1 file changed, 48 insertions(+), 153 deletions(-)

diff --git a/apps/website/src/pages/index.js b/apps/website/src/pages/index.js
index 2cbf97c773..f3de0092a2 100755
--- a/apps/website/src/pages/index.js
+++ b/apps/website/src/pages/index.js
@@ -8,6 +8,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
 
 import successStories from '../data/successStories';
+import userTweets from '../data/userTweets';
 
 const BLIND_75_URL =
   'https://www.teamblind.com/post/New-Year-Gift---Curated-List-of-Top-75-LeetCode-Questions-to-Save-Your-Time-OaM1orEU';
@@ -512,7 +513,6 @@ function GreatFrontEndSection() {
     </div>
   );
 }
-
 function TweetsSection() {
   return (
     <div className={clsx('padding-vert--xl', styles.sectionAlt)}>
@@ -522,172 +522,67 @@ function TweetsSection() {
             'margin-bottom--lg',
             'text--center',
             styles.sectionTitle,
-          )}>
+          )}
+        >
           Over 1,000,000 people have benefitted from this handbook!
         </h2>
         <div className={clsx('row', styles.tweetsSection)}>
+          {/* Render tweets in groups of three */}
           <div className="col col--4">
-            <Tweet
-              url="https://twitter.com/Insharamin/status/1412978510788915205"
-              handle="Insharamin"
-              name="Insha"
-              date="Jul 8, 2021"
-              avatar="/img/tweets/Insharamin.jpg"
-              content={
-                <>
-                  1️⃣ Tech Interview Handbook
-                  <br />
-                  <br />
-                  This repository has practical content that covers all phases
-                  of a technical interview, from applying for a job to passing
-                  the interviews to offer negotiation. 📎
-                </>
-              }
-            />
-            <Tweet
-              url="https://twitter.com/ravinwashere/status/1328381097277681665"
-              handle="ravinwashere"
-              name="Ravin"
-              date="Nov 17, 2020"
-              avatar="/img/tweets/ravinwashere.jpg"
-              content={
-                <>
-                  Preparing for a job interview?
-                  <br />
-                  <br />
-                  The tech interview handbook contains carefully curated to help
-                  you ace your next technical interview.
-                  <br />
-                  <br />
-                  And it's free.
-                </>
-              }
-            />
-            <Tweet
-              url="https://twitter.com/rwenderlich/status/1166336060533727232"
-              handle="rwenderlich"
-              name="raywenderlich.com"
-              date="Aug 27, 2019"
-              avatar="/img/tweets/rwenderlich.jpg"
-              content={<>Nice open source tech interview handbook</>}
-            />
-            <Tweet
-              url="https://twitter.com/umaar/status/913425809108606976"
-              handle="umaar"
-              name="Umar Hansa"
-              date="Sep 28, 2017"
-              avatar="/img/tweets/umaar.jpg"
-              content={
-                <>
-                  Tech Interview Handbook 💻 - Content to help you ace your next
-                  technical interview. Lots of front-end content here ✅
-                </>
-              }
-            />
+            {userTweets.slice(0, 3).map((tweet, index) => (
+              <Tweet
+                key={index}
+                url={tweet.url}
+                handle={tweet.handle}
+                name={tweet.name}
+                date={tweet.date}
+                avatar={tweet.avatar}
+                content={tweet.content}
+              />
+            ))}
           </div>
           <div className="col col--4">
-            <Tweet
-              url="https://twitter.com/MSFTImagine/status/1502675788335886344"
-              handle="MSFTImagine"
-              name="Microsoft Imagine Cup"
-              date="Mar 13, 2022"
-              avatar="/img/tweets/MSFTImagine.png"
-              content={
-                <>
-                  Ready to rock your #Coding interviews? Follow along as
-                  @yangshunz shares tips on how to land your dream job from
-                  personal experience.
-                </>
-              }
-            />
-            <Tweet
-              url="https://twitter.com/palashv2/status/1452981345899085833"
-              handle="palashv2"
-              name="Palash"
-              date="Oct 26, 2021"
-              avatar="/img/tweets/palashv2.jpg"
-              content={
-                <>
-                  5. Tech Interview Handbook
-                  <br />
-                  <br />
-                  Here's free and curated technical interview preparation
-                  materials for busy engineers. Besides the usual algorithm
-                  questions, other awesome stuff includes How to prepare for
-                  coding interviews, Interview Cheatsheet, and more.
-                </>
-              }
-            />
-            <Tweet
-              url="https://twitter.com/Justyna_Adam/status/1186166253830004736"
-              handle="Justyna_Adam"
-              name="Justyna_Adamczyk"
-              date="Oct 21, 2019"
-              avatar="/img/tweets/Justyna_Adam.jpg"
-              content={
-                <>
-                  Another excellent tech interview handbook! If you need to
-                  prepare yourself for a tech interview or you're an interviewer
-                  and need additional inspiration. Happy Monday! #techinterviews
-                </>
-              }
-            />
+            {userTweets.slice(3, 6).map((tweet, index) => (
+              <Tweet
+                key={index}
+                url={tweet.url}
+                handle={tweet.handle}
+                name={tweet.name}
+                date={tweet.date}
+                avatar={tweet.avatar}
+                content={tweet.content}
+              />
+            ))}
           </div>
           <div className="col col--4">
-            <Tweet
-              url="https://twitter.com/freeCodeCamp/status/1494658460830552065"
-              handle="freeCodeCamp"
-              name="freeCodeCamp.org"
-              date="Feb 18, 2022"
-              avatar="/img/tweets/freeCodeCamp.jpg"
-              content={
-                <>
-                  Back in 2017, @yangshunz was interviewing for developer jobs.
-                  <br />
-                  <br />
-                  He put in a lot of work, aced his interviews, & got offers
-                  from Google, Airbnb, Dropbox, and more.
-                  <br />
-                  <br />
-                  And he just updated this in-depth guide to help you also rock
-                  your next coding interview.
-                </>
-              }
-            />
-            <Tweet
-              url="https://twitter.com/Vinaystwt/status/1437062973554507777"
-              handle="Vinaystwt"
-              name="Vinay Sharma"
-              date="Sep 12, 2021"
-              avatar="/img/tweets/Vinaystwt.jpg"
-              content={
-                <>
-                  🔹Tech Interview Handbook: Another useful resource that covers
-                  information about technical interviews. It covers the job
-                  applications, the interview process and the post-interview
-                </>
-              }
-            />
-            <Tweet
-              url="https://twitter.com/sitepointdotcom/status/1164121717243023360"
-              handle="sitepointdotcom"
-              name="SitePoint"
-              date="Aug 21, 2019"
-              avatar="/img/tweets/sitepointdotcom.jpg"
-              content={
-                <>
-                  The Tech Interview Handbook provides carefully curated content
-                  to help you ace your next technical interview.
-                </>
-              }
-            />
+            {userTweets.slice(6, 9).map((tweet, index) => (
+              <Tweet
+                key={index}
+                url={tweet.url}
+                handle={tweet.handle}
+                name={tweet.name}
+                date={tweet.date}
+                avatar={tweet.avatar}
+                content={tweet.content}
+              />
+            ))}
           </div>
         </div>
+        <p className="margin-vert--lg text--center">
+          Would you like to share your experience?{' '}
+          <a
+            href="https://github.com/yangshun/tech-interview-handbook/edit/main/apps/website/src/data/userTweets.js"
+            rel="noopener"
+            target="_blank"
+          >
+            Open a Pull Request here
+          </a>
+          !
+        </p>
       </div>
     </div>
   );
 }
-
 function SuccessStory({ name, quote, thumbnail, title }) {
   return (
     <div className="card margin-vert--lg">

From 6967684dca60e3e154a9d62655a4fcaa7c1fc8da Mon Sep 17 00:00:00 2001
From: Yehia Rasheed <157399068+yehiarasheed@users.noreply.github.com>
Date: Thu, 17 Oct 2024 22:45:16 +0300
Subject: [PATCH 2/4] feat: create userTweets.js to separate data from
 rendering

---
 apps/website/src/data/userTweets.js | 154 ++++++++++++++++++++++++++++
 1 file changed, 154 insertions(+)
 create mode 100644 apps/website/src/data/userTweets.js

diff --git a/apps/website/src/data/userTweets.js b/apps/website/src/data/userTweets.js
new file mode 100644
index 0000000000..6b9a269835
--- /dev/null
+++ b/apps/website/src/data/userTweets.js
@@ -0,0 +1,154 @@
+import React from 'react';
+
+export default [
+  {
+    url: "https://twitter.com/Insharamin/status/1412978510788915205",
+    handle: "Insharamin",
+    name: "Insha",
+    date: "Jul 8, 2021",
+    avatar: "/img/tweets/Insharamin.jpg",
+    content: (
+      <>
+        1️⃣ Tech Interview Handbook
+        <br />
+        <br />
+        This repository has practical content that covers all phases
+        of a technical interview, from applying for a job to passing
+        the interviews to offer negotiation. 📎
+      </>
+    ),
+  },
+  {
+    url: "https://twitter.com/MSFTImagine/status/1502675788335886344",
+    handle: "MSFTImagine",
+    name: "Microsoft Imagine Cup",
+    date: "Mar 13, 2022",
+    avatar: "/img/tweets/MSFTImagine.png",
+    content: (
+      <>
+        Ready to rock your #Coding interviews? Follow along as
+        @yangshunz shares tips on how to land your dream job from
+        personal experience.
+      </>
+    ),
+  },
+  {
+    url: "https://twitter.com/freeCodeCamp/status/1494658460830552065",
+    handle: "freeCodeCamp",
+    name: "freeCodeCamp.org",
+    date: "Feb 18, 2022",
+    avatar: "/img/tweets/freeCodeCamp.jpg",
+    content: (
+      <>
+        Back in 2017, @yangshunz was interviewing for developer jobs.
+        <br />
+        <br />
+        He put in a lot of work, aced his interviews, & got offers
+        from Google, Airbnb, Dropbox, and more.
+        <br />
+        <br />
+        And he just updated this in-depth guide to help you also rock
+        your next coding interview.
+      </>
+    ),
+  },
+  {
+    url: "https://twitter.com/ravinwashere/status/1328381097277681665",
+    handle: "ravinwashere",
+    name: "Ravin",
+    date: "Nov 17, 2020",
+    avatar: "/img/tweets/ravinwashere.jpg",
+    content: (
+      <>
+        Preparing for a job interview?
+        <br />
+        <br />
+        The tech interview handbook contains carefully curated to help
+        you ace your next technical interview.
+        <br />
+        <br />
+        And it's free.
+      </>
+    ),
+  },
+  {
+    url: "https://twitter.com/palashv2/status/1452981345899085833",
+    handle: "palashv2",
+    name: "Palash",
+    date: "Oct 26, 2021",
+    avatar: "/img/tweets/palashv2.jpg",
+    content: (
+      <>
+        5. Tech Interview Handbook
+        <br />
+        <br />
+        Here's free and curated technical interview preparation
+        materials for busy engineers. Besides the usual algorithm
+        questions, other awesome stuff includes How to prepare for
+        coding interviews, Interview Cheatsheet, and more.
+      </>
+    ),
+  },
+  {
+    url: "https://twitter.com/Vinaystwt/status/1437062973554507777",
+    handle: "Vinaystwt",
+    name: "Vinay Sharma",
+    date: "Sep 12, 2021",
+    avatar: "/img/tweets/Vinaystwt.jpg",
+    content: (
+      <>
+        🔹Tech Interview Handbook: Another useful resource that covers
+        information about technical interviews. It covers the job
+        applications, the interview process and the post-interview.
+      </>
+    ),
+  },
+  {
+    url: "https://twitter.com/rwenderlich/status/1166336060533727232",
+    handle: "rwenderlich",
+    name: "raywenderlich.com",
+    date: "Aug 27, 2019",
+    avatar: "/img/tweets/rwenderlich.jpg",
+    content: <>Nice open source tech interview handbook</>,
+  },
+  {
+    url: "https://twitter.com/Justyna_Adam/status/1186166253830004736",
+    handle: "Justyna_Adam",
+    name: "Justyna_Adamczyk",
+    date: "Oct 21, 2019",
+    avatar: "/img/tweets/Justyna_Adam.jpg",
+    content: (
+      <>
+        Another excellent tech interview handbook! If you need to
+        prepare yourself for a tech interview or you're an interviewer
+        and need additional inspiration. Happy Monday! #techinterviews
+      </>
+    ),
+  },
+    {
+    url: "https://twitter.com/sitepointdotcom/status/1164121717243023360",
+    handle: "sitepointdotcom",
+    name: "SitePoint",
+    date: "Aug 21, 2019",
+    avatar: "/img/tweets/sitepointdotcom.jpg",
+    content: (
+      <>
+        The Tech Interview Handbook provides carefully curated content
+        to help you ace your next technical interview.
+      </>
+    ),
+  },
+  {
+    url: "https://twitter.com/umaar/status/913425809108606976",
+    handle: "umaar",
+    name: "Umar Hansa",
+    date: "Sep 28, 2017",
+    avatar: "/img/tweets/umaar.jpg",
+    content: (
+      <>
+        Tech Interview Handbook 💻 - Content to help you ace your next
+        technical interview. Lots of front-end content here ✅
+      </>
+    ),
+  },
+];

From 58e02ebff6e3ecfbc973900962d6f60bb22c1522 Mon Sep 17 00:00:00 2001
From: Yehia Rasheed <157399068+yehiarasheed@users.noreply.github.com>
Date: Thu, 17 Oct 2024 23:07:35 +0300
Subject: [PATCH 3/4] feat: update Tweets order to match original order

---
 apps/website/src/data/userTweets.js | 138 ++++++++++++++--------------
 1 file changed, 69 insertions(+), 69 deletions(-)

diff --git a/apps/website/src/data/userTweets.js b/apps/website/src/data/userTweets.js
index 6b9a269835..893629e751 100644
--- a/apps/website/src/data/userTweets.js
+++ b/apps/website/src/data/userTweets.js
@@ -18,40 +18,6 @@ export default [
       </>
     ),
   },
-  {
-    url: "https://twitter.com/MSFTImagine/status/1502675788335886344",
-    handle: "MSFTImagine",
-    name: "Microsoft Imagine Cup",
-    date: "Mar 13, 2022",
-    avatar: "/img/tweets/MSFTImagine.png",
-    content: (
-      <>
-        Ready to rock your #Coding interviews? Follow along as
-        @yangshunz shares tips on how to land your dream job from
-        personal experience.
-      </>
-    ),
-  },
-  {
-    url: "https://twitter.com/freeCodeCamp/status/1494658460830552065",
-    handle: "freeCodeCamp",
-    name: "freeCodeCamp.org",
-    date: "Feb 18, 2022",
-    avatar: "/img/tweets/freeCodeCamp.jpg",
-    content: (
-      <>
-        Back in 2017, @yangshunz was interviewing for developer jobs.
-        <br />
-        <br />
-        He put in a lot of work, aced his interviews, & got offers
-        from Google, Airbnb, Dropbox, and more.
-        <br />
-        <br />
-        And he just updated this in-depth guide to help you also rock
-        your next coding interview.
-      </>
-    ),
-  },
   {
     url: "https://twitter.com/ravinwashere/status/1328381097277681665",
     handle: "ravinwashere",
@@ -71,6 +37,41 @@ export default [
       </>
     ),
   },
+  {
+    url: "https://twitter.com/rwenderlich/status/1166336060533727232",
+    handle: "rwenderlich",
+    name: "raywenderlich.com",
+    date: "Aug 27, 2019",
+    avatar: "/img/tweets/rwenderlich.jpg",
+    content: <>Nice open source tech interview handbook</>,
+  },
+  {
+    url: "https://twitter.com/umaar/status/913425809108606976",
+    handle: "umaar",
+    name: "Umar Hansa",
+    date: "Sep 28, 2017",
+    avatar: "/img/tweets/umaar.jpg",
+    content: (
+      <>
+        Tech Interview Handbook 💻 - Content to help you ace your next
+        technical interview. Lots of front-end content here ✅
+      </>
+    ),
+  },
+  {
+    url: "https://twitter.com/MSFTImagine/status/1502675788335886344",
+    handle: "MSFTImagine",
+    name: "Microsoft Imagine Cup",
+    date: "Mar 13, 2022",
+    avatar: "/img/tweets/MSFTImagine.png",
+    content: (
+      <>
+        Ready to rock your #Coding interviews? Follow along as
+        @yangshunz shares tips on how to land your dream job from
+        personal experience.
+      </>
+    ),
+  },
   {
     url: "https://twitter.com/palashv2/status/1452981345899085833",
     handle: "palashv2",
@@ -89,28 +90,6 @@ export default [
       </>
     ),
   },
-  {
-    url: "https://twitter.com/Vinaystwt/status/1437062973554507777",
-    handle: "Vinaystwt",
-    name: "Vinay Sharma",
-    date: "Sep 12, 2021",
-    avatar: "/img/tweets/Vinaystwt.jpg",
-    content: (
-      <>
-        🔹Tech Interview Handbook: Another useful resource that covers
-        information about technical interviews. It covers the job
-        applications, the interview process and the post-interview.
-      </>
-    ),
-  },
-  {
-    url: "https://twitter.com/rwenderlich/status/1166336060533727232",
-    handle: "rwenderlich",
-    name: "raywenderlich.com",
-    date: "Aug 27, 2019",
-    avatar: "/img/tweets/rwenderlich.jpg",
-    content: <>Nice open source tech interview handbook</>,
-  },
   {
     url: "https://twitter.com/Justyna_Adam/status/1186166253830004736",
     handle: "Justyna_Adam",
@@ -124,6 +103,40 @@ export default [
         and need additional inspiration. Happy Monday! #techinterviews
       </>
     ),
+  },
+  {
+    url: "https://twitter.com/freeCodeCamp/status/1494658460830552065",
+    handle: "freeCodeCamp",
+    name: "freeCodeCamp.org",
+    date: "Feb 18, 2022",
+    avatar: "/img/tweets/freeCodeCamp.jpg",
+    content: (
+      <>
+        Back in 2017, @yangshunz was interviewing for developer jobs.
+        <br />
+        <br />
+        He put in a lot of work, aced his interviews, & got offers
+        from Google, Airbnb, Dropbox, and more.
+        <br />
+        <br />
+        And he just updated this in-depth guide to help you also rock
+        your next coding interview.
+      </>
+    ),
+  },
+  {
+    url: "https://twitter.com/Vinaystwt/status/1437062973554507777",
+    handle: "Vinaystwt",
+    name: "Vinay Sharma",
+    date: "Sep 12, 2021",
+    avatar: "/img/tweets/Vinaystwt.jpg",
+    content: (
+      <>
+        🔹Tech Interview Handbook: Another useful resource that covers
+        information about technical interviews. It covers the job
+        applications, the interview process and the post-interview.
+      </>
+    ),
   },
     {
     url: "https://twitter.com/sitepointdotcom/status/1164121717243023360",
@@ -138,17 +151,4 @@ export default [
       </>
     ),
   },
-  {
-    url: "https://twitter.com/umaar/status/913425809108606976",
-    handle: "umaar",
-    name: "Umar Hansa",
-    date: "Sep 28, 2017",
-    avatar: "/img/tweets/umaar.jpg",
-    content: (
-      <>
-        Tech Interview Handbook 💻 - Content to help you ace your next
-        technical interview. Lots of front-end content here ✅
-      </>
-    ),
-  },
 ];

From d9fe94db3bf69885f024541bb65db840788ac417 Mon Sep 17 00:00:00 2001
From: Yehia Rasheed <157399068+yehiarasheed@users.noreply.github.com>
Date: Thu, 17 Oct 2024 23:17:20 +0300
Subject: [PATCH 4/4] feat: reorder Tweets by slicing map

---
 apps/website/src/pages/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/website/src/pages/index.js b/apps/website/src/pages/index.js
index f3de0092a2..d2b434ed0c 100755
--- a/apps/website/src/pages/index.js
+++ b/apps/website/src/pages/index.js
@@ -529,7 +529,7 @@ function TweetsSection() {
         <div className={clsx('row', styles.tweetsSection)}>
           {/* Render tweets in groups of three */}
           <div className="col col--4">
-            {userTweets.slice(0, 3).map((tweet, index) => (
+            {userTweets.slice(0, 4).map((tweet, index) => (
               <Tweet
                 key={index}
                 url={tweet.url}
@@ -542,7 +542,7 @@ function TweetsSection() {
             ))}
           </div>
           <div className="col col--4">
-            {userTweets.slice(3, 6).map((tweet, index) => (
+            {userTweets.slice(4, 7).map((tweet, index) => (
               <Tweet
                 key={index}
                 url={tweet.url}
@@ -555,7 +555,7 @@ function TweetsSection() {
             ))}
           </div>
           <div className="col col--4">
-            {userTweets.slice(6, 9).map((tweet, index) => (
+            {userTweets.slice(7, 10).map((tweet, index) => (
               <Tweet
                 key={index}
                 url={tweet.url}