Software engineering study guide

This is a study guide I made to prepare for software engineering interviews.

If you have useful resources not mentioned here or any feedback, please leave a comment.

Frontend 101

Read the handbook.

Practice interview problems

Many companies still use Leetcode style problems so it’s worth it to pratice: dive into Leetcode, InterviewCake and/or Cracking the code interview.

You can also find similar content in video format — for example, Stacks and Queues, Trees, DFS/BFS.

Invest in one or more of these resources and commit to doing many problems. In my experience, earlier stage startups don’t use these problems in interviews as much but FAANG-type companies inevitably do.

The goal is to get enough fluidity with these problems that you can start pattern matching:

• what type of problem is this?
• what type of solution (=data structure/etc) will I need to solve it?
• how do I gradually describe the various steps needed to present the problem, solve it and optimize the solution?

Answering (any) question by going step by step

When you’re asked a problem, remember that the goal is to guide your interviewer to your solution…go slow:

• define the problem — what needs to be done?
• ask questions to complete the picture — what are the expected inputs/outputs? what are possible unexpected inputs/outputs?
• break it down into smaller parts
• start identifying the type of problem you’re dealing with — this will help you figure out what data structure/tactic you can use to solve
• write pseudocode outlining what needs to be done at a high level
• step by step, turn pseudo-code into code
• debug & catch edge cases
• optimize — how can this be done harder, better, faster, stronger?

JavaScript / Frontend Concepts

Read the MDN JS docs & then re-read them again :)
There’s plenty of great books on JS — I love Eloquent JavaScript and Effective JavaScript. JustJavascript by DanAbramov was also fun to follow.

Core JS concepts

• Closures
• `this`: what is this, what is lexical this. This and .bind. This/bind/apply. A typical question here is how to implement debounce in JS.
• Prototypal inheritance: this, this, this, this or this
• Primitive vs Reference
• DOM and DOM APIs
• Event loop (how does it work and what does “single threaded” mean)
• Synchronous vs Async code
• Type coercion

Common Frontend questions

Here’s a list of common JS questions. Here’s another one.
Here’s everything that happens when you load a URL in a browser: here

Common Frontend concepts

The following are common concepts that you should learn to become a more advanced frontend engineer.

• Internet protocol: It’s fascinating to read the various pages related to the internet protocol on wikipedia. Start here and click on related pages as you find them…this gets more detailed the more you fall down the rabbit hole so don’t worry about memorizing everything. Instead, use this to get a sense of how a computer translates code into bits, how these are packaged and moved around a network of wires interconnected via sockets and then retranslated as pixels on a page.
• AJAX
• HTTP, CORS, HTTP/2, Headers, Status codes
• REST
• Proxy & reverse proxy
• Authentication: cookies, HTTP authentication and here, oAuth and OpenID, JWT auth. A good NodeJS lib that can teach you how to implement auth is Passport — go through a tutorial or two.
• DNS
• Modules: From IIFE’s to CommonJS to ES6 import/export.
• Security: HTTPS, this intro and OWASP top 10
• Bundlers like webpack: learn with egghead or directly through their docs. Another great way to learn is to create a new create-react-app, then ejecting it and looking at all the comments left on the webpack config docs
• SEO
• The difference between a thread and a process. I’ve gotten asked this in interviews. It can be frustrating to get these questions when you don’t have a CS background but let that just be more motivation to learn more. Go learn about how to handle processes in a backend language like Node, as well as explore other concepts important to computers like how an OS works, what is the kernel, what are standard streams.
• Load time performance: when talking about performance I find it helpful to first map out all the things that are happening when a website is loaded to then point to where the bottlenecks could be and then go into more detail around how to solve them. For example, is the initial HTTP request the bottleneck, or is the server taking too long to return a response, or is the browser taking too much time to parse and load all the HTML/CSS/JS? or is the React layer causing unecessary re-renders? etc. Requests can be sped up using upgraded protocols like HTTP/2. Responses can be improved through smarter caching (CDNs for eg. or better DB caching — more on this below in the system design section). Browsers can speed up script parsing and rendering performance can be improved too. Images can be made responsive and cached. To debug a page’s performance, you may also want to run a Lighthouse audit on a page to see where the bottle necks are as well as explore improving the UX through lazy-loading or windowing. If you use React, you may also want to look at React performance — for eg., how often re-renders are happening. You may also be loading a lot of unnecessary code and need better code splitting.

React

• Read through every page of the React docs several times. Know the APIs, the main concepts, the advanced guides and how to answer common React interview questions
• I would also learn about unilateral data flow and a state management library like redux…or any other stage management library. You’ll likely be asked questions around the tradeoffs of using local state vs. pushing state into a state container. You may also want to look at Hooks and React context.
• You may also want to know how to handle forms either through something like redux-form or finalform. It’s likely you’ll have to implement forms in a take-home.
• If you’re more familiar with another frontend lib (Angular, Vue, etc) just apply the same principles of deep learning to that library

CSS

• The best way to learn CSS is by practicing…just open up a page and start styling. I would take a few common UIs (like a drop down select or a calendar) and build simple versions to understand how to organize layouts and style quickly.
• Learn flexbox.
• Here’s thoughts on CSS code organization.
• I also found it useful to read MaterialUI, Bootstrap or SemanticUI to see how popular libraries structure their CSS.
• Animations: this, performant animations, requestAnimationFrame
• Get familiar with the variants of CSS like Sass, Less and StyledComponents
• SVG: One company asked me to implement some SVG as part of a take-home. I don’t know much here but found a lot of fun tutorials on youtube such as this one.

Algorithms and Data Structures

You should know basic data structures and how to implement them. At the very least you should know LinkedList/DoublyLinkedList, Queue, Stack, Hash Table. I would also play with Heap, Trie, Tree (esp. Binary Tree).

• Algorithms and Data Structures (and here)
• BigO

When I first learned to code, I found these concepts hard and confusing, especially given that I hadn’t studied CS in college. If you feel you overwhelmed, take it slow. If it feels complex, try to think about these not as abstract concepts with weird intricacies that can be hard to remember. Instead, simplify. Create your own mind-map to visualize these various algorithms or data structures and synthesize their names, their purpose, their main use cases, and their main pros and cons.

SQL

• Fundamentals (or here)
• SQL Zoo
• Read postgres docs. If you’re a frontend engineer, do this and expand what you know.

System Design

You won’t be asked this as a junior dev. but it’s great content to keep learning.

System design is an interview where you talk about how to build a system. If the system design question is more frontend based, the questions will likely be around how to organize components for very complicated UIs and then how to optimize performance (what protocols to use, whether you want socket/websockets/etc, caching, authentication, etc).

If you’re interviewing for full stack roles, the questions will likely be around how to organize client/servers, how to setup load balancers, what databases to use and why, how to scale the use of these databases and how to organize computationally expensive work in asynchronous processes so that servers can respond quickly to clients.

There’s great content on Youtube to learn how to answer these questions for eg. watching a lot of these videos or these videos.

This is a great short course.

Working on this tool helped me understand some of the concepts here, especially around load balancers how to terminate SSL and how to setup DNS.

Ultimately, I came out with the following framework that I follow when thinking through a system design question.

1. Define what are we building

What features do we need to handle?

• Posts, purchases, payments, follows, feeds, timelines, search, trending, etc.

What media/data will be exchanging?

• JSON? Images/videos/files? Lots of data or small amounts?

What parts of the system do we want to focus on this interview?

• Frontend? Backend? Both?

2. What much traffic are we expecting on short term?

How many users are we expecting?

• 1–10K? 10K-1M? 1M+?

How many requests per second should we handle (throughput)?

• Req/sec = daily active users * average requests per day / 86,400 (seconds in a day)

What latency are we aiming for?

• <200ms?

3. What’s the high level interface of this system?

What kind of clients?

• Web apps? Mobile? Mac native app? Other?

What kind of servers?

• App servers? DB servers? Messaging servers? Web/CDN/Edge servers? Load balancers?

What communication protocols?

• HTTP/HTTPS/HTTP/2? TCP/UDP? Socket/WebSocket?

What APIs do we need?

• List the GET/POST/PUT/DELETE endpoints you may need for the various features required

Will we need to handle any async work?

• Queues/Workers/CRON jobs?

4. How do we handle storage?

What type of storage do we need?

• SQL/NoSQL (or here or here) vs Caching (or here) vs FileStorage
• What DB: Postgres vs Mongo vs Cassandra etc.

What kind of DB requests will be need

• Read heavy? Write heavy?

What are we trying to prioritize?

• ACID (and here) / CAP

What data model do we need?

• Loosely define tables and/or documents and/or key/values/etc for the various objects needed for these features

Search?

• Postgres search vs elastic or tools like algolia

5. How do we handle scale?

How do we scale our web servers

• CDN/Edge

How do we scale our app servers/orchestration

• PubSub. Zookeeper. Lambdas
• Microservice vs monoliths

How do we load balance?

• Load balancing strategies
• Consistent Hashing
• Sticky-sessions
• Nginx, elasticloadbalancing, etc.

How do we scale our storage

• Horizontal vs vertical scaling
• Understanding indexes in postgres, mongo and elsewhere
• Master/slave
• Sharding and here
• Replicas in mongo vs in postgres
• Normalized vs denormalized data
• Distributed systems
• Distributed locking: here, here, here
• Distributed datastores
• Distributed transactions (mongo here)
• Concurrency

How do we cache?

• Redis

6. How manageable do we want the system to be?

How should we handle Auth?

• HTTP auth, oAuth/OpenId, DB vs JWT

Types of users? user/admin/etc? Permissioning

• Logging/monitoring/analytics?
• Health checks? Alerts? Sentry/Datadog/etc

Security?

• Encryption? Firewalls? Access Controls? DDoS? SSL?

Compliance?

• Soc2 vs ISO