diff --git a/pages/hack-school/_meta.json b/pages/hack-school/_meta.json index e57950b..0e8cd54 100644 --- a/pages/hack-school/_meta.json +++ b/pages/hack-school/_meta.json @@ -1,9 +1,17 @@ { - "---": { + "---": { + "type": "separator", + "title": "Winter Workshops" + }, + + "docker": "Essence of Backend Engineering: Docker", + "design": "Introduction to System Design", + + "---1": { "type": "separator", "title": "Hack School" }, - + "index": "Welcome to ACM Hack School!", "logistics": "Hack School Logistics", "week1": "Week 0: HTML, CSS, and JavaScript", @@ -20,4 +28,4 @@ "git-github": "Git/GitHub", "resume": "Building a Resume", "interview-prep": "Interview Prep" -} \ No newline at end of file +} diff --git a/pages/hack-school/design.mdx b/pages/hack-school/design.mdx new file mode 100644 index 0000000..a7f5dee --- /dev/null +++ b/pages/hack-school/design.mdx @@ -0,0 +1,228 @@ +# Introduction to System Design + +## What Is System Design? + +System design is the process of architecting systems that can: + +- Scale to millions of users +- Remain reliable under failure +- Maintain low latency and high availability + +It becomes increasingly important at senior SWE levels, but even interns may encounter system design +questions in interviews. + +--- + +## The System Design Process + +Typical stages: + +1. Define requirements +2. Identify core entities +3. Design APIs +4. Create high-level architecture +5. Deep-dive and refine bottlenecks + +--- + +## Requirements + +There are two types of requirements: + +### Functional Requirements + +What users should be able to do. + +- “Users should be able to shorten a URL” +- “Users should be able to edit a URL” + +### Non-Functional Requirements + +How well the system performs. + +- Latency < 100 ms +- Supports 10M daily active users +- High availability and uniqueness guarantees + +--- + +## CAP Theorem + +In distributed systems, you can only guarantee **two of the following three**: + +- **Consistency (C):** Reads return the most recent write +- **Availability (A):** Every request gets a response +- **Partition Tolerance (P):** System works despite network failures + +Perfectly reliable distributed databases do not exist. + +--- + +## Caching + +- Databases often bottleneck on reads +- Caches store frequently accessed data in fast memory +- Typical flow: **Cache → Database** + +--- + +## Consistent Hashing + +- Distributes keys across servers arranged in a ring +- When servers are added or removed, only nearby keys are remapped +- Enables efficient horizontal scaling of caches and databases + +--- + +## Networking Basics + +- **HTTP:** Stateless CRUD-based APIs (most systems) +- **TCP:** Persistent connections (e.g., game servers) +- **gRPC:** High-performance service-to-service communication + +--- + +## Load Balancers + +- Distribute traffic across backend servers +- Prevent overload and reroute around failures + +### Types + +- **L4 Load Balancer:** TCP-level (e.g., WebSockets) +- **L7 Load Balancer:** Routes based on HTTP content (URLs, headers) + +--- + +## Data Modeling + +### SQL (Relational Databases) + +- Fixed schemas +- Tables with rows and columns +- Strong consistency +- Good for complex queries and joins + +### NoSQL + +- Flexible or schema-less data +- Horizontally scalable +- Eventual or tunable consistency +- Common concepts: + - **Partition key:** Determines shard placement + - **Sort key:** Orders data within a partition + +--- + +## Data Indexing + +- Improves query speed using auxiliary data structures +- Tradeoff: + - Faster reads + - Slower writes + - Extra storage cost + +--- + +## API Design Concepts + +- **CRUD:** Create (POST), Read (GET), Update (PUT), Delete (DELETE) +- **REST:** URLs represent resources +- **Statelessness:** Each request is self-contained + +Stateless APIs improve scalability and reliability. + +--- + +## API Gateway + +- Entry point between clients and backend services +- Routes requests +- Handles authentication, rate limiting, and traffic control +- Simplifies API management + +--- + +## Queues + +Used to handle bursty traffic and background jobs. + +- Requests are queued instead of dropped +- Workers process jobs asynchronously +- Enables independent scaling of producers and consumers +- Supports backpressure to protect the system + +--- + +## Streams & Pub/Sub + +- Events stored as ordered streams +- Enables real-time processing and replay +- Multiple consumers can read from the same stream +- Supports windowing (e.g., hourly analytics) + +--- + +## Distributed Locks + +- Ensure only one machine modifies a shared resource at a time +- Used for inventory updates, ticket sales, etc. +- Improves consistency at the cost of performance + +--- + +## Distributed Cache + +- Cache data across multiple machines +- Keys distributed using consistent hashing +- Enables near-infinite cache scaling + +Example: Redis + +--- + +## Blob Storage + +Used for large, unstructured data. + +- Stores binary objects (images, videos, documents) +- Core database stores pointers to blobs +- Extremely scalable, durable, and cost-effective + +--- + +## Sharding + +Used when a single database cannot handle the data volume. + +- Split data into smaller shards +- Spread load across machines +- Add shards as data grows + +--- + +## CDNs (Content Delivery Networks) + +- Cache content close to users +- Reduce latency and origin server load +- Serve cached content if available; otherwise fetch and cache + +Used for: + +- Static assets +- Media files +- Frequently accessed API responses + +Examples: + +- Cloudflare +- Akamai +- Amazon CloudFront + +--- + +## Common System Design Issues + +- **Hot shard:** One shard receives disproportionate traffic +- **Thundering herd:** Large traffic spike after downtime +- **Cache avalanche:** Mass cache expiration causing DB overload diff --git a/pages/hack-school/docker.mdx b/pages/hack-school/docker.mdx new file mode 100644 index 0000000..df1a352 --- /dev/null +++ b/pages/hack-school/docker.mdx @@ -0,0 +1,151 @@ +# Essence of Backend Engineering: Docker + +## What is Docker? + +From the official docs: + +> Docker is an open platform for developing, shipping, and running applications. + +Docker simplifies the process of building, distributing, and running applications by packaging them +into **images** that can be run consistently across different machines. + +Docker allows you to: + +- Pull images for any OS or platform +- Build your own application into an image +- Run images as isolated containers + +As long as Docker is installed, containers can run on any machine. + +--- + +## From Servers to Containers + +Before Docker, applications were deployed on either **physical servers** or **virtual machines**. + +- **Physical servers** required one application per machine, each with its own OS and hardware + resources, leading to high costs, difficult maintenance, and poor scalability. +- **Virtual machines** improved utilization by running multiple OSs on the same hardware via a + hypervisor, but each VM still required a full operating system, resulting in slow startup times + and heavy resource usage. + +**Containers** solve these problems by providing lightweight, isolated environments that share the +host OS kernel instead of duplicating entire operating systems. This makes them faster to start, +more efficient in resource usage, and easier to scale. + +By virtualizing at the **OS level** rather than the hardware level, Docker enables consistent +environments across development and deployment, effectively eliminating the classic “it works on my +machine” problem. + +--- + +## Docker Images & Containers + +### Docker Image + +A Docker image is a collection of configurations and instructions used to create containers. + +- Images are executed by Docker Engine +- Many free images exist on Docker Hub, including: + - Node.js + - PostgreSQL + - Java + - Ubuntu + +Docker Hub: https://hub.docker.com/ + +### Docker Container + +A container is a running instance of a Docker image. + +--- + +## Installing Docker + +### Windows + +- Install + [Docker Desktop for Windows](https://hub.docker.com/editions/community/docker-ce-desktop-windows) +- **Windows 10 Home requires + [WSL 2](https://docs.microsoft.com/en-us/windows/wsl/install-win10#step-2---check-requirements-for-running-wsl-2)** + +### Mac + +- Install [Docker Desktop for Mac](https://hub.docker.com/editions/community/docker-ce-desktop-mac) + +### Linux + +- Install [Docker Engine](https://docs.docker.com/engine/install/ubuntu) + +Create a free Docker Hub account at: https://hub.docker.com/ + +--- + +## Docker CLI + +The Docker CLI lets you manage images and containers from the terminal. + +### Common Commands + +- `docker pull ` – Download an image from Docker Hub +- `docker run --name ` – Run a container + Useful flags: + - `-d`: Run in background + - `-t`: Allocate terminal + - `-p`: Map ports +- `docker ps` – View running containers +- `docker images` – View local images +- `docker exec` – Run a command inside a container + +--- + +## Dockerfiles + +A **Dockerfile** is a text-based file containing instructions for building a Docker image. + +Think of it as a recipe. + +### Dockerfile Notes + +- The first instruction must be `FROM` +- Common instructions: + - `FROM`, `RUN`, `COPY`, `WORKDIR`, `CMD` +- Only **one** `CMD` instruction is allowed (the last one wins) + +**RUN vs CMD** + +- `RUN`: executes commands during image build +- `CMD`: specifies the command run when the container starts + +--- + +## Pushing Images to Docker Hub + +### Why Push? + +- Share images publicly +- Allow others to run your app easily + +### Steps + +```bash +docker login +docker tag /: +docker push /: +``` + +View your image at: https://hub.docker.com/ + +--- + +## Extending Docker + +### Docker Compose + +- Multi-container applications +- Defined in a single YAML file + +### Kubernetes + +- Container orchestration +- Handles scaling, deployment, and maintenance diff --git a/pages/hack-school/responsive.mdx b/pages/hack-school/responsive.mdx new file mode 100644 index 0000000..a311648 --- /dev/null +++ b/pages/hack-school/responsive.mdx @@ -0,0 +1 @@ +# Foundations of Frontend Engineering: Responsive Web Design diff --git a/pages/hack-school/sketch.mdx b/pages/hack-school/sketch.mdx new file mode 100644 index 0000000..347c7a6 --- /dev/null +++ b/pages/hack-school/sketch.mdx @@ -0,0 +1 @@ +# Foundations of Frontend Engineering: Sketch to Site diff --git a/pages/hack-school/sql.mdx b/pages/hack-school/sql.mdx new file mode 100644 index 0000000..cdf9153 --- /dev/null +++ b/pages/hack-school/sql.mdx @@ -0,0 +1 @@ +# Let's Get Relational: SQL & Database Design diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx index c79103d..5a7f2a0 100644 --- a/src/components/navbar/index.tsx +++ b/src/components/navbar/index.tsx @@ -1,10 +1,10 @@ 'use client'; import Link from 'next/link'; +import { usePathname, useRouter } from 'next/navigation'; import React, { useState } from 'react'; -import { useRouter, usePathname } from 'next/navigation'; -import styles from './style.module.css'; import Logo from '../../../public/Logo'; +import styles from './style.module.css'; const NAV_LINKS = [ { name: 'Home', href: '/' }, @@ -13,6 +13,7 @@ const NAV_LINKS = [ { name: 'Team', href: '/#team' }, { name: 'Contact', href: '/#contact' }, { name: 'Hack School', href: '/hack-school' }, + { name: 'Winter Workshops', href: '/hack-school/docker' }, ]; const Navbar: React.FC = () => {