Files
2022-02-04 15:54:06 +08:00

789 lines
26 KiB
JavaScript
Executable File
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React from 'react';
import classnames from 'classnames';
import Layout from '@theme/Layout';
import BrowserOnly from '@docusaurus/BrowserOnly';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './styles.module.css';
import successStories from '../data/successStories';
const BLIND_75_URL =
'https://www.teamblind.com/post/New-Year-Gift---Curated-List-of-Top-75-LeetCode-Questions-to-Save-Your-Time-OaM1orEU';
const BLIND_OFFER_NUMBERS_URL =
'https://www.teamblind.com/post/Sharing-my-offer-numbers-from-big-companies-for-your-reference-yNgqUPQR';
const FEATURES = [
{
title: <>💯 Go From zero to hero</>,
description: (
<>
Go from zero to tech interview hero with this handbook. No prior
interview experience needed.
</>
),
link: '/introduction',
},
{
title: <>📝 Curated practice questions</>,
description: (
<>
No one has time to practice a few hundred questions. We created the{' '}
<a href={BLIND_75_URL} target="_blank" rel="noopener">
Blind 75 List
</a>{' '}
to tell you which the best questions are.
</>
),
link: '/best-practice-questions',
},
{
title: <>📋 Interview cheatsheet</>,
description: (
<>
Straight-to-the-point Do's and Don'ts during an interview. The battle is
already half won.
</>
),
link: '/cheatsheet',
},
{
title: <>💁 Practical algorithm tips</>,
description: (
<>
Practical tips for every algorithm topic - common techniques and corner
cases to look out for.
</>
),
link: '/algorithms/introduction',
},
{
title: <>💬 Behavioral questions</>,
description: (
<>
Check out what behavioral questions companies commonly ask and you can
prepare your answers ahead of time.
</>
),
link: '/behavioral-questions',
},
{
title: <>🧪 Tested and proven</>,
description: (
<>
Countless engineers have gotten their dream jobs with the help of Tech
Interview Handbook.
</>
),
},
];
function Tweet({url, handle, name, content, avatar, date}) {
return (
<div className={classnames('card', styles.tweet)}>
<div className="card__header">
<div className="avatar">
<img alt={name} className="avatar__photo" src={avatar} />
<div className="avatar__intro">
<div className={styles.tweet}>
<strong>{name}</strong>{' '}
<span className={styles.tweetMeta}>
@{handle} &middot;{' '}
<a className={styles.tweetMeta} href={url} rel="noopener">
{date}
</a>
</span>
</div>
<div>{content}</div>
</div>
</div>
</div>
</div>
);
}
function Home() {
const {siteConfig = {}} = useDocusaurusContext();
return (
<Layout
title="Technical Interview Guide for Busy Engineers"
description={siteConfig.tagline}>
<HeroSection />
<WhatIsThisSection />
<TweetsSection />
<HowToUseSection />
<EducativeSection />
<FeaturesSection />
<MoonchaserSection />
<SuccessStoriesSection />
<SponsorshipSection />
<PreFooterSection />
</Layout>
);
}
function HeroSection() {
const {siteConfig = {}} = useDocusaurusContext();
return (
<header className={classnames('hero', styles.heroBanner)}>
<div className="container">
<img
alt={siteConfig.title}
className={classnames(styles.heroBannerLogo, 'margin-vert--md')}
src={useBaseUrl('img/logo.svg')}
/>
<h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">
{siteConfig.tagline} <br />
Brought to you by FAANG engineers and the author of the{' '}
<a href={BLIND_75_URL} rel="noopener" target="_blank">
Blind 75 list
</a>
</p>
<div className={styles.buttons}>
<a
className={classnames('button button--primary button--lg')}
href={useBaseUrl('introduction')}>
Start reading now&nbsp;&nbsp;
</a>
</div>
<div className="margin-top--lg">
<iframe
src="https://ghbtns.com/github-btn.html?user=yangshun&amp;repo=tech-interview-handbook&amp;type=star&amp;count=true&amp;size=large"
frameBorder={0}
scrolling={0}
width={160}
height={30}
title="GitHub Stars"
/>
</div>
</div>
</header>
);
}
function WhatIsThisSection() {
return (
<div className={classnames('padding-vert--xl', styles.sectionAlt)}>
<div className="container">
<div className="row">
<div className="col col--8 col--offset-2">
<h2 className="text--center margin-bottom--lg">
<span class="badge badge--primary">What is this</span>
</h2>
<h3
className={classnames(
'text--center',
'margin-bottom--lg',
styles.sectionTitle,
)}>
The fastest way to prepare effectively for your software
engineering interviews, used by over 500,000 engineers
</h3>
<p
className={classnames(
'margin-bottom--lg',
styles.sectionTagline,
)}>
Tech Interview Handbook goes{' '}
<strong>straight to the point</strong> and tells you the{' '}
<strong>minimum</strong> you need to know to excel in your
technical interviews.
<br />
<br />
As a Senior Software Engineer and Tech Lead at Meta/Facebook, I
have personally gone through the frustrating process of browsing
through many unorganized resources to prepare for my technical
interviews.
<br />
<br />
This handbook contains the essence of technical interviewing I
gathered over my last job hunt, which allowed me to clinch{' '}
<a href={BLIND_OFFER_NUMBERS_URL}>
9 offers out of 11 top Bay Area companies
</a>{' '}
-{' '}
<strong>Facebook, Google, Airbnb, Palantir, Dropbox, Lyft</strong>
, and some startups!
</p>
</div>
</div>
</div>
</div>
);
}
function MoonchaserSection() {
// Because the SSR and client output can differ and hydration doesn't patch attribute differences,
// we'll render this on the browser only.
return (
<BrowserOnly>
{() => (
<div className={classnames('padding-vert--lg', styles.sectionSponsor)}>
<div className="container">
<div className="row">
<div className="col col--8 col--offset-2">
<div className="margin-vert--lg text--center">
<div>
<h2 className={styles.sectionSponsorTitle}>
<strong>
Get paid more. Receive risk-free salary negotiation
advice from Moonchaser. You pay nothing unless your
offer is increased.
</strong>
</h2>
<div className="margin-vert--lg">
<a
className="button button--secondary button--lg"
href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_homepage"
rel="noopener"
target="_blank"
onClick={() => {
window.gtag('event', 'moonchaser.homepage.click');
}}>
Get risk-free negotiation advice&nbsp;&nbsp;
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)}
</BrowserOnly>
);
}
function HowToUseStep({index, title, ctaLink, contents}) {
return (
<div className={classnames('card', styles.howToUseStep)}>
<div className="card__header">
<div className="margin-bottom--sm">
<small className={styles.howToUseStepLabel}>STEP {index}</small>
</div>
<h3>{title}</h3>
</div>
<div className="card__body">
<ul>
{contents.map((content, i) => (
<li key={i}>{content}</li>
))}
</ul>
</div>
<div class="card__footer">
<a
class="button button--primary button--block"
href={useBaseUrl(ctaLink)}>
Read now
</a>
</div>
</div>
);
}
function HowToUseSection() {
return (
<div className={classnames('padding-vert--xl', styles.sectionAlt)}>
<div className="container">
<div className="row">
<div className="col col--10 col--offset-1">
<h2 className="text--center margin-bottom--lg">
<span class="badge badge--primary">How to use</span>
</h2>
<h3
className={classnames(
'text--center',
'margin-bottom--lg',
styles.sectionTitle,
)}>
Not sure where to start in your interview preparation?
<br /> We've got you covered.
</h3>
<p
className={classnames(
'text--center',
'margin-bottom--lg',
styles.sectionTagline,
)}>
This guide is structured in a{' '}
<strong>simple to follow, step-by-step</strong> style covering all
aspects of your software engineering interview preparation -{' '}
<strong>no prior interview experience required</strong>.
</p>
</div>
</div>
<div className={classnames('row', styles.featuresRow)}>
<div
className={classnames(
'col',
'col--3',
styles.featuresRowItemContainer,
)}>
<HowToUseStep
index={1}
title={<>Prepare a FAANG-ready resume</>}
contents={[
<>Create an ATS-proof resume</>,
<>Software engineering specific resume content</>,
<>Optimizing and and testing your resume</>,
]}
ctaLink="/resume/guide"
/>
</div>
<div
className={classnames(
'col',
'col--3',
styles.featuresRowItemContainer,
)}>
<HowToUseStep
index={2}
title={<>Ace the interviews</>}
contents={[
<>Step-by-step coding interview preparation</>,
<>Algorithms deep dive</>,
<>System design interview preparation</>,
<>Behavioral interview preparation</>,
]}
ctaLink="/interview-formats"
/>
</div>
<div
className={classnames(
'col',
'col--3',
styles.featuresRowItemContainer,
)}>
<HowToUseStep
index={3}
title={<>Negotiate the best offer</>}
contents={[
<>Negotiation strategies for software engineers</>,
<>Guide on how compensation works for software engineers</>,
]}
ctaLink="/understanding-compensation"
/>
</div>
<div
className={classnames(
'col',
'col--3',
styles.featuresRowItemContainer,
)}>
<HowToUseStep
index={4}
title={<>Prepare for the job</>}
contents={[
<>How to choose between companies</>,
<>Guide to engineering levels</>,
]}
ctaLink="/choosing-between-companies"
/>
</div>
</div>
</div>
</div>
);
}
function FeaturesSection() {
return (
<div className={classnames('padding-vert--xl', styles.sectionAlt)}>
<div className="container">
<div className="row">
<div className="col col--10 col--offset-1">
<h2 className="text--center margin-bottom--lg">
<span class="badge badge--primary">Why this guide</span>
</h2>
<h3
className={classnames(
'text--center',
'margin-vert--lg',
styles.sectionTitle,
)}>
We have everything you need - all straight to the point
</h3>
<div className={classnames('row', styles.featuresRow)}>
{FEATURES.map(({title, description, link}) => (
<div
className={classnames(
'col',
'col--4',
styles.featuresRowItemContainer,
)}>
<div className={classnames('card', styles.featuresRowItem)}>
<h3 className={styles.featuresRowItemTitle}>{title}</h3>
<p className={styles.featuresRowItemDescription}>
{description}
</p>
{link && (
<a
className={styles.featuresRowItemLink}
href={useBaseUrl(link)}>
<strong>Read now →</strong>
</a>
)}
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
);
}
function EducativeSection() {
return (
<div className={classnames('padding-vert--lg', styles.sectionSponsorAlt)}>
<div className="container">
<div className="row">
<div className="col col--8 col--offset-2">
<div className="margin-vert--lg text--center">
<div>
<h2 className={styles.sectionSponsorTitle}>
<strong>
Looking to get hired at FAANG? Educative offers a ton of
great courses to improve your interview game. Join today for
a 10% discount!
</strong>
</h2>
<div className="margin-vert--lg">
<a
className="button button--secondary button--lg"
href="https://www.educative.io/explore?search_string=interview&aff=x23W"
rel="noopener"
target="_blank"
onClick={() => {
window.gtag('event', 'educative.homepage.click');
}}>
Check out courses&nbsp;&nbsp;→
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
function TweetsSection() {
return (
<div className={classnames('padding-vert--xl', styles.sectionAlt2)}>
<div className="container">
<h2
className={classnames(
'margin-bottom--lg',
'text--center',
styles.sectionTitle,
)}>
Over 500,000 people have benefitted from this handbook!
</h2>
<div className={classnames('row', styles.tweetsSection)}>
<div className="col col--4">
<Tweet
url="https://twitter.com/Insharamin/status/1412978510788915205"
handle="Insharamin"
name="Insha"
date="Jul 8, 2021"
avatar="https://pbs.twimg.com/profile_images/1468474545891774464/jENKPsRG_400x400.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/Justyna_Adam/status/1186166253830004736"
handle="Justyna_Adam"
name="Justyna_Adamczyk"
date="Oct 21, 2019"
avatar="https://pbs.twimg.com/profile_images/1328613502571978753/bTkdJhPt_400x400.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
</>
}
/>
<Tweet
url="https://twitter.com/umaar/status/913425809108606976"
handle="umaar"
name="Umar Hansa"
date="Sep 28, 2017"
avatar="https://pbs.twimg.com/profile_images/1305935669705965568/vS_bpIuu_400x400.jpg"
content={
<>
Tech Interview Handbook 💻 - Content to help you ace your next
technical interview. Lots of front-end content here
</>
}
/>
</div>
<div className="col col--4">
<Tweet
url="https://twitter.com/palashv2/status/1452981345899085833"
handle="palashv2"
name="Palash"
date="Oct 26, 2021"
avatar="https://pbs.twimg.com/profile_images/1435103134842454016/DfF093MF_400x400.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/ravinwashere/status/1328381097277681665"
handle="ravinwashere"
name="Ravin"
date="Nov 17, 2020"
avatar="https://pbs.twimg.com/profile_images/1314872679195799552/80_xRIEF_400x400.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="https://pbs.twimg.com/profile_images/1445056225478021122/2jTrV6Fi_400x400.jpg"
content={<>Nice open source tech interview handbook</>}
/>
</div>
<div className="col col--4">
<Tweet
url="https://twitter.com/khalalw/status/1469496702365159431"
handle="khalalw"
name="Khalal Walker"
date="Dec 11, 2021"
avatar="https://pbs.twimg.com/profile_images/1479884864543285255/pcE_Nl12_400x400.jpg"
content={
<>
Lastly, the Tech Interview Handbook. This is a pretty solid
comprehensive resource from your initial introduction, to
resumes, system design, coding, etc. Points to other solid
resources that can be a great help.
</>
}
/>
<Tweet
url="https://twitter.com/Vinaystwt/status/1437062973554507777"
handle="Vinaystwt"
name="Vinay Sharma"
date="Sep 12, 2021"
avatar="https://pbs.twimg.com/profile_images/1413766958281990145/--os1eLq_400x400.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="https://pbs.twimg.com/profile_images/1425900902783668228/eJF_2-Ds_400x400.jpg"
content={
<>
The Tech Interview Handbook provides carefully curated content
to help you ace your next technical interview.
</>
}
/>
</div>
</div>
</div>
</div>
);
}
function SuccessStory({name, quote, thumbnail, title}) {
return (
<div className="card margin-vert--lg">
<div className="card__body">
<p className={styles.quote}>"{quote}"</p>
</div>
<div className="card__header">
<div className="avatar">
<img alt={name} className="avatar__photo" src={thumbnail} />
<div className="avatar__intro">
<div className="avatar__name">{name}</div>
<small className="avatar__subtitle">{title}</small>
</div>
</div>
</div>
</div>
);
}
function SuccessStoriesSection() {
const storiesColumns = [[], []];
successStories.forEach((tweet, i) => storiesColumns[i % 2].push(tweet));
return (
<div className={classnames('padding-vert--xl', styles.sectionAlt)}>
<div className="container">
<div className="row">
<div className="col col--6 col--offset-3">
<h2 className="text--center margin-bottom--lg">
<span class="badge badge--primary">Success stories</span>
</h2>
<h3
className={classnames(
'margin-vert--lg',
'text--center',
styles.sectionTitle,
)}>
Countless engineers have gotten a job at FAANG with this free
handbook
</h3>
</div>
</div>
<div className={classnames('row', styles.tweetsSection)}>
<div className="col col--offset-2 col--4">
{storiesColumns[0].map((user) => (
<SuccessStory key={user.name} {...user} />
))}
</div>
<div className="col col--4">
{storiesColumns[1].map((user) => (
<SuccessStory key={user.name} {...user} />
))}
</div>
</div>
<p className="margin-vert--lg text--center">
Would you like to contribute a success story?{' '}
<a
href="https://github.com/yangshun/tech-interview-handbook/edit/master/website/src/data/successStories.js"
rel="noopener"
target="_blank">
Open a Pull Request here
</a>
!
</p>
</div>
</div>
);
}
function SponsorshipSection() {
return (
<div className={classnames('padding-vert--xl')}>
<div className="container">
<div className="row">
<div className="col col--8 col--offset-2">
<h2 className="text--center margin-bottom--lg">
<span class="badge badge--primary">Advertise with us</span>
</h2>
<h3
className={classnames(
'margin-vert--lg',
'text--center',
styles.sectionTitle,
)}>
Interested in advertising on Tech Interview Handbook?
</h3>
<p className={classnames(styles.sectionTagline, 'text--center')}>
Leverage on more than 200,000 monthly page views from 40,000 to
50,000 unique software engineers.
</p>
<p className={classnames(styles.sectionTagline, 'text--center')}>
Sponsors can choose any or all of the following positions to
advertise with us:
</p>
<div className={styles.sectionTagline}>
<div className="row">
<div className="col col--4 col--offset-2">
<ul>
<li>Top banner of every page</li>
<li>Homepage</li>
<li>Sidebar of every page</li>
</ul>
</div>
<div className="col col--4">
<ul>
<li>Navigation menu</li>
<li>Bottom of every page</li>
</ul>
</div>
</div>
</div>
<div className="margin-top--lg text--center">
<a
className="button button--primary button--lg margin-right--md"
href="mailto:contact@techinterviewhandbook.org"
rel="noopener"
target="_blank">
Advertise with us!
</a>
<a
className="button button--secondary button--lg"
href="/advertise">
Find out more
</a>
</div>
</div>
</div>
</div>
</div>
);
}
function PreFooterSection() {
return (
<div className={classnames('padding-vert--xl', styles.sectionAlt2)}>
<div className="container">
<div className="row">
<div className="col col--4">
<h2>Take the next step</h2>
</div>
<div className="col col--8">
<p className={classnames(styles.sectionTagline)}>
It's free! Start improving your interview game today and get the
job at the company of your dreams.
</p>
<a
className={classnames('button button--primary button--lg')}
href={useBaseUrl('introduction')}>
Start reading now&nbsp;&nbsp;
</a>
</div>
</div>
</div>
</div>
);
}
export default Home;