bg-write / big-doh

Big D'oh: Homer Simpson Reads 'Cracking the Coding Interview' - built with React and TypeScript with Molly Hodson

Big D'oh: Homer Reads 'Cracking the Coding Interview'

NOTE: As of May 2023, Imgur is experiencing temporary capacity issues that are affecting this app. Big D'oh images may appear broken while we address this issue. Thank you for your patience.

Table of Contents

I. Big D'oh in Three Sentences
II. The Problem
III. The Goal
IV: Concepts Covered
V: Getting Started
VI: Architecture
VII: Style Guide
VIII: Tech Stack & Tools
IX: Next Steps
X: The Team
XI: Closing credits

---

Big D'oh in Three Sentences

Did you do a coding Bootcamp and read 'Cracking the Coding Interview' but are still struggling with Big O?

Welcome!

This free study aid, built in React and TypeScript, is for anyone preparing for technical interviews to better understand Big O and common algorithms and data structures.

The Problem

Big O and basic algorithms and data structures are important to learn in order to be a software engineer, but they're not easy concepts to learn for new developers, especially for those without computer science degrees.

The Goal

To reinforce high-level knowledge of algorithms and data structures from Gayle Laakmann McDowell's 6th Edition of 'Cracking the Coding Interview,' but in a way even Homer Simpson could understand.

This app is not meant to be a definitive or all-encompassing resource, but rather a beginner's guide to navigating key concepts in software engineering and computer science. YouTube links are included to deepen understanding and encourage ongoing learning.

And if you're stressed, you can always play Homer in a game of Tic-Tac-D'oh.

Big D'oh is a mobile-first designed React app made by Brady Gerber and Molly Hodson.

---

Concepts Covered

• Big O
• Recursion
• Algorithms
  • Bubble Sort
  • Insertion Sort
  • Merge Sort
  • Quick Sort
  • Bucket Sort
  • Radix Sort
  • Brute Force Search
  • Binary Search
• Data Structures
  • Arrays
  • Sets
  • Linked Lists
  • Hash Tables
  • Stacks
  • Queues
  • Trees
  • Binary Trees
  • Breadth First Search (BFS)
  • Depth First Search (DFS)
  • Tries
  • Graphs

---

Getting Started

The deployed app: https://big-doh.netlify.app/

To launch Big D'oh locally:

1. In your IDE of choice, open up a new terminal.
2. Enter and run the command npm start.
3. Open the development server URL provided in the terminal output (if it doesn't already open).
4. Enjoy!

---

Architecture

A breakdown of the src folder:

• components

  • Algorithms
  • BigO
  • DataStructures
  • TTT
  • Footer.tsx
  • Home.tsx
  • Navbar.js

• App.css: holds the majority of our CSS

• App.js: our components are wrapped around <Router/> and <Suspense/>

• index.css: CSS for <body/> and <code/>

• index.js: <App/> is wrapped around BrowserRouter

Note that public includes our index.html

---

Style Guide

UX/UI Design

Big D'oh was designed by Molly Hodson to be a fully responsive web app - fun and accessible while still being useful. Check out Molly's case study detailing how she approached our project, including Figma boards and wireframes: https://mollyhodson.design/home/big-doh

CSS

App.css holds our CSS variables, the majority of our styling code, and our media queries. "Helvetica Neue Regular" is the font used for this app. Color variables are defined as:

  --white: #ffffff;
  --black: #111111;
  --blue-jeans: #40a0ff;
  --homer: #ffd90d;
  --donut: #ff4fa2;
  --lard-lad: #e86b17;

The code Itself

Big D'oh will soon be updated to follow Airbnb's JS style guide. This involves following Nethmi Wijesinghe's excellent set-up guide for installing ESLint and Prettier in VS Code to match Airbnb's guide in a new project. Nethmi's guide also works if you wish to use another popular style guide (i.e. Google).

---

Tech Stack & Tools

• React.js
• TypeScript
• Figma
• JavaScript
• HTML
• CSS
• GitHub
• Git
• Visual Studio Code
• Google Chrome DevTools
• Netlify
• Shields.io
• Google
• Bootstrap
• React Bootstrap
• Coffee
• Naps

---

Next Steps

• Convert more JS logic into TS (current TS use is minimal).
• Incorporate code style guide and enforce consistency from IDE to GitHub.
• Address new note that the CSS on TTT mobile is not as responsive on some iPhones.

---

The Team

Brady Gerber (Software Engineer)

Molly Hodson (UX Designer)

Closing Credits

All photos and gifs are taken from General Assembly except when linked to their original sources. The marquee was made with the help of Coding Journey. Flashcard templates were made with the help of Alex Carpenter.

© 2023 Brady Gerber. All Rights Reserved.

Return to top