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 2cbf97c7..f3de0092 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 00000000..6b9a2698
--- /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 6b9a2698..893629e7 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 f3de0092..d2b434ed 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}