21:I[1692,["/_next/static/immutable/chunks/12kfub1dff3u_.js","/_next/static/immutable/chunks/0fq9mp-0bh-46.js","/_next/static/immutable/chunks/228v9cnjureho.js"],"WorldExperience"] 22:T67b,I started by designing the UI layout using the UMG Designer tab. This involves placing widgets such as an Image for the background, a Vertical Box containing Text and multiple Buttons (e.g., Play, Options, Quit), all arranged inside a Canvas Panel. The Vertical Boxes are named and set as variables for later use in the scripting stage. Buttons are duplicated, renamed, and visually customized. I update button Text fields, assign Hover Tint Colors, and set Fill for size consistency. UI elements are organized using the Hierarchy panel for easy access, and ZOrder values are used to manage visual layering (e.g., keeping menus above the background image). The Main Menu is visible by default, while the Options Menu is hidden. Both menus are placed on the same Canvas Panel and positioned to overlap, allowing one to be shown while the other is hidden via blueprint logic. This sets the groundwork for toggling between them using button interactions. In the Graph tab, each button's OnClicked event is used to control the flow: Play: Opens the game level and removes the menu. Options: Switches visibility between Main and Options menus. Resolution Buttons: Run console commands like r.setRes 1280x720. Quit: Executes the Quit command to close the game. Return: Reverts visibility back to the Main Menu. In the Level Blueprint, the menu is created and added to the viewport at game start, showing the mouse cursor for interaction. The FirstPersonCharacter Blueprint ensures the player can’t move or shoot during the menu. The World Settings are configured to assign the correct Game Mode and Default Pawn to prevent gameplay before clicking “Play.”23:T817,What is a Genre? Genre is any collection of codes and conventions that we associate with a particular type of game. Example: Horror, sport, adventure …. What do you expect to see in those types of games? Whi is Important? If we don’t follow the code and conventions of the genre, the audience will be alienated and confused about the game they are playing. Even if you want to create a new genre you still must follow the rules that someone set up before you. Genre type Action And Adventure Adventure games is the exploration of an area collecting items and tools and use these Items and tools to complete challenges, often puzzle related, NO COMBAT. Action games are the idea of a player being in combat situations more than anything else. Action Adventure we have the act of the player going around picking items and solving problems and there will be a combat thrown in two, the mix between combat and problem solving. Shooters games are an action game, but specifically as you can image this type of game involves shooting, games like this can come in first person or in third person view modes. First-person mode is for the eyes of the player, you are seeing it from first person perspective, seeing the world from the eyes of the hero. Third Person games are usually viewed over the shoulder of the character looking into the world as you use your surroundings more. The first person and third person have different things to consider, but they do share similar DNA. Mostly through their level of design. Shooter games are easier to pick due to the similar controller they have from one game to another. Role playing games or better known as RPGs, are games centered around the player customizing the Character to fulfill a role or fantasy. Some games implement elements of RPG in their games. RPG elements in another types of games make a player feel good about the progress they are making. Platform the focus of the platform, as the name implies, the platforming is the ability to jump from platform to platform and climb different areas.24:Te64,## Why version control? Version control tracks every change to a codebase over time, so teams can collaborate without overwriting each other's work, recover any previous state, and understand exactly how a project evolved. - **Git** is a free, open-source, distributed version control system (DVCS) created by Linus Torvalds in 2005 to manage the Linux kernel's source code. - **GitHub** hosts Git repositories in the cloud and layers on collaboration features — pull requests, issues, and code review. - Being *distributed* means every developer has a full copy of the repository's history, not just a pointer to a central server. > **Key idea:** Git tracks *snapshots* of your whole project, not just line-by-line diffs — which is what makes branching and merging fast. ## Core building blocks | Concept | What it is | |---|---| | Repository | The project's files plus its full Git history | | Working directory | The files you're actively editing | | Staging area | Changes queued up for the next commit | | Commit | A saved snapshot of the project at a point in time | | Branch | An independent line of development | | Merge | Combines the changes from one branch into another | - A **commit** is identified by a unique hash and records *what* changed, *when*, and *why* (via its message). - **Branches** let you experiment or build a feature without touching the stable `main` branch. - **Merging** replays or combines commits from one branch onto another once the work is ready. ## The everyday workflow Most day-to-day Git work comes down to five commands, run in this order: ```bash git status # see what's changed git add # stage a specific file (or `git add .` for everything) git commit -m "message" # snapshot the staged changes git push origin # publish local commits to a remote git pull origin main # fetch and merge remote changes into your branch ``` - `git log` walks back through commit history; `git diff` shows exactly what changed and where. - `git clone ` creates a full local copy of a remote repository, history included. - Always pull before you push — it keeps your local branch in sync with your teammates' work. ## Branching, pull requests, and undoing mistakes Non-linear development means a feature can be built in isolation, reviewed, and merged only once it's ready: ```bash git switch -c feature/login # create and move to a new branch # ...make changes, commit them... git push origin feature/login # push the branch, then open a pull request on GitHub ``` A **pull request** asks a teammate to review the branch's changes before they're merged into `main` — the point where most code review happens. - `git switch ` — move between existing branches - `git restore ` — discard uncommitted changes to a file - `git revert ` — safely undo a commit by creating a new, opposite commit (keeps history intact) - `git rerere` — remembers how you resolved a merge conflict before, and reapplies that resolution automatically the next time it sees the same conflict ## Naming releases: semantic versioning Version numbers communicate what changed and whether it's safe to upgrade. The most common convention is **semantic versioning** — `MAJOR.MINOR.PATCH`: - **Major** (`1.0.0` → `2.0.0`) — breaking changes; existing code may need updates - **Minor** (`1.0.0` → `1.1.0`) — new, backward-compatible functionality - **Patch** (`1.0.0` → `1.0.1`) — backward-compatible bug fixes only > **Tip:** reading a dependency's version bump before upgrading tells you how much testing you should budget for the change.25:Tdb1,## What is cloud computing? The National Institute of Standards and Technology (NIST) defines cloud computing as on-demand network access to a shared pool of configurable computing resources — networks, servers, storage, applications, and services — that can be provisioned and released with minimal effort. In practice, that means renting compute power instead of buying and maintaining it yourself: you get it quickly, scale it with demand, and pay for what you use. ## The five essential characteristics NIST defines cloud computing by five traits, all of which have to be true at once: - **On-demand self-service** — provision resources yourself, without calling a human - **Broad network access** — reachable from many devices, over standard networks - **Resource pooling** — the provider's infrastructure is shared across many customers, with resources assigned dynamically regardless of physical location - **Rapid elasticity** — scale up or down (vertically or horizontally) as demand changes - **Measured service** — usage is metered, so you pay for what you consume or reserve > **Key idea:** if a platform is missing even one of these five, it isn't really "cloud" by NIST's definition — it's just outsourced hosting. ## Four deployment models Deployment models describe *where* the infrastructure lives and *who* controls it: | Model | Who owns it | Who uses it | |---|---|---| | **Public** | The cloud provider (AWS, Azure, GCP, IBM Cloud) | Any customer, multi-tenant | | **Private** | One organization (or a provider, on their behalf) | A single organization | | **Community** | Shared by several organizations | Groups with shared compliance/security needs | | **Hybrid** | Mixed | Connects private and public so workloads move where they're most useful | Public cloud trades control for cost savings and elasticity; private cloud trades cost for control and compliance; hybrid tries to get both by connecting the two. ## Three service models: IaaS, PaaS, SaaS The service models differ in exactly where the line falls between what the *provider* manages and what *you* manage: | Layer | IaaS | PaaS | SaaS | |---|---|---|---| | Application | You | You | Provider | | Runtime, middleware, OS | You | Provider | Provider | | Servers, storage, network | Provider | Provider | Provider | - **IaaS** (e.g. EC2, Compute Engine) — you get raw compute, storage, and networking, and manage the OS and everything above it yourself. - **PaaS** (e.g. Elastic Beanstalk, App Engine, Heroku) — the provider also manages the runtime, middleware, and OS, so you can focus purely on application code. - **SaaS** (e.g. Gmail, Salesforce) — you just use the finished application; the provider manages everything underneath it. ## Why (and why not) to adopt cloud Cloud adoption typically improves **agility**, **availability**, **resilience**, and **time to market** — but it isn't free of tradeoffs: - **Data security and sovereignty** — where is data physically stored, and under whose jurisdiction? - **Compliance** — does the provider meet your industry's regulatory requirements? - **Provider dependency (vendor lock-in)** — how hard would it be to migrate away later? - **Governance and cost control** — elastic scaling can just as easily mean an elastic bill > **Tip:** choosing a service and deployment model is really about matching how much *control* you need against how much *operational simplicity* you want — you can't maximize both at once.26:Te77,## Regions and availability zones Cloud infrastructure is physically organized in a hierarchy: - **Region** — a geographic area where a provider clusters data centers (e.g. "US East") - **Availability zone (AZ)** — one or more isolated data centers within a region, each with its own power, cooling, and networking - **Data center** — racks, servers, storage, and networking equipment Spreading workloads across AZs contains failures (one AZ going down doesn't take others with it) and lets you place resources physically closer to users to cut latency. ## Compute options | Option | Description | Best for | |---|---|---| | **Virtual machine** | A hypervisor slices one physical server into many isolated VMs | General-purpose workloads | | **Bare metal** | A single-tenant, dedicated physical server | Compliance, licensing, max performance | | **Container** | Packages code + dependencies, shares the host OS kernel | Fast, portable, lightweight deployment | | **Serverless** | You upload functions; the platform runs, scales, and bills them | Event-driven, spiky workloads | A **hypervisor** is what makes VMs possible: **Type 1** ("bare-metal") runs directly on the hardware for lower latency and better security (VMware ESXi, Hyper-V, KVM); **Type 2** ("hosted") runs on top of a host OS, trading some performance for convenience (VirtualBox, VMware Workstation). ## Networking in the cloud Cloud networks are built from the same primitives as on-premises networks, just software-defined: - **Public interfaces** connect resources to the internet; **private interfaces** connect them to each other, kept off the public internet - **IP addresses and subnets** carve up the address space assigned to your network - **Security groups and ACLs** control exactly which traffic is allowed in or out - **VPCs and VPNs** isolate your resources and extend your private network into the cloud - **Load balancers and gateways** distribute traffic and manage entry points Getting this right is mostly a question of "who and what can reach this resource" — the fewer things exposed to the public internet, the smaller the attack surface. ## Four types of cloud storage | Type | How it works | Good for | |---|---|---| | **Direct-attached** | Local disk on the same server/rack | OS disks, temporary/ephemeral data | | **File storage (NFS)** | A shared network filesystem, mountable by many nodes | Shared file access, departmental shares | | **Block storage** | Data split into addressable blocks, mounted as a volume | Databases, mail servers — anything needing low, consistent latency | | **Object storage** | Flat storage accessed via API, organized into buckets | Static files, backups, archives, VM images | Direct-attached storage is fastest but ephemeral and non-shareable; object storage is the opposite — nearly infinite and cheap, but the slowest to access. ## Choosing the right storage tier A few metrics decide which storage type and tier fits a workload: - **IOPS** (input/output operations per second) — higher IOPS means faster reads/writes, but costs more; too low and it becomes a bottleneck - **Snapshots** — fast, point-in-time backups that only record what changed, though they can't restore a single file in isolation - **Storage tiers** — standard (frequent access, highest cost per GB), archive/vault (rarely accessed, lowest cost, slower retrieval) - **CDNs** — cache content geographically closer to users, cutting load times and reducing origin traffic > **Tip:** picking a storage tier is really a bet on *how often* the data will be read — bet wrong, and you either overpay for speed you don't need or wait hours to retrieve something urgent.27:Tbdc,## What DevOps actually means DevOps is a collaborative culture — not a tool — that connects development, operations, QA, and business stakeholders around one goal: shorten the feedback loop between writing code and learning how it performs in production. - Shared ownership of the whole delivery pipeline, not "throw it over the wall" handoffs - Heavy automation of builds, tests, and deployments - Continuous measurement of what's actually happening in production - A steady stream of small, low-risk improvements instead of rare, high-risk releases ## The delivery pipeline ``` commit -> CI (build + test) -> CD (package for release) -> Deploy -> Monitor ``` - **Continuous Integration (CI)** — merge code changes frequently and run automated tests immediately, so integration problems surface within minutes, not weeks - **Continuous Delivery (CD)** — keep every passing build in a releasable state at all times - **Continuous Deployment** — go one step further and automatically ship every build that passes its checks straight to production - **Continuous Monitoring** — real-time visibility into how the app and infrastructure are actually behaving, closing the feedback loop back to development ## Why cloud and DevOps pair so well Cloud platforms remove most of the friction DevOps is trying to eliminate: - **Rapid provisioning** — spin up a production-like test environment in minutes, not weeks - **Elastic resources** — scale infrastructure to match pipeline load instead of over-provisioning for peak demand - **Managed CI/CD services** — automated build, test, and deploy pipelines with no servers to babysit - **Pay-as-you-go pricing** — cost tracks actual usage instead of fixed capacity Centralized repositories and shared pipelines also make it much easier for distributed teams to collaborate consistently. ## Security is a shared responsibility Cloud security splits cleanly between provider and customer: | The provider secures | You secure | |---|---| | Physical data centers | Your identities and access policies | | Host infrastructure | Your configuration choices | | The virtualization layer | Your data and applications | Core controls on your side of that line: encryption at rest and in transit, least-privilege access management, visibility into what you've deployed, secure default configuration, regular compliance review, and a tested backup and disaster-recovery plan. ## Common cloud risks - **External attacks** and **DDoS** - **Insider threats** — harder to catch than external ones, since the access is already legitimate - **Data loss** and **misconfiguration** — still the single most common cause of cloud breaches - **Shadow IT** — unsanctioned services outside IT's visibility - **Multi-tenant exposure** and **provider dependency** > **Tip:** the single highest-leverage fix for most of this list isn't a new security tool — it's least-privilege access control plus audit logging, since it limits *and* reveals almost every other risk on the list.28:Tde0,## The software development lifecycle The SDLC is a systematic process for building software that actually meets its requirements, broken into distinct phases: ``` Planning -> Design -> Development -> Testing -> Deployment -> Maintenance ``` Working through explicit phases (instead of ad hoc) gives every team member a clear answer to "what should I be doing right now," surfaces problems earlier when they're cheaper to fix, and keeps responsibilities from overlapping or falling through the cracks. ## Planning and the SRS Planning gathers, analyzes, documents, and prioritizes requirements while estimating cost, staffing, and time. - A **Software Requirements Specification (SRS)** records everything stakeholders must agree on: scope, assumptions, dependencies, interfaces, and both functional and non-functional requirements. - A **prototype** is a small, throwaway mock-up used to validate an idea or clarify a requirement *before* committing to full implementation — cheap to build, cheap to discard. > **Tip:** a disagreement about requirements is far cheaper to resolve in the SRS than after code has already been written against the wrong assumption. ## Gathering good requirements - **Identify stakeholders** — decision makers, end users, admins, engineering, sales, support - **Set goals and objectives** — goals are broad and long-term; objectives are the specific, measurable steps that reach them - **Elicit requirements** — interviews, surveys, questionnaires - **Document, then analyze** — check for consistency, clarity, and completeness - **Prioritize** — must-have, highly desired, nice-to-have Three levels of requirements documentation, from broadest to narrowest: **SysRS** (the whole system — interfaces, performance, security, acceptance criteria), **SRS** (the software's behavior), and **URS** (user stories: who needs what, and why). ## Development methodologies and testing | Model | Style | Strength | Weakness | |---|---|---|---| | **Waterfall** | Sequential | Clear stages, easy to budget | Inflexible to change | | **V-Shape** | Sequential | Test plans built up front | Rigid, hard to accommodate new requirements | | **Agile** | Iterative | Embraces changing requirements | Harder to budget and scope up front | Testing verifies the code matches requirements and is free of defects, typically across four layers: - **Unit** — one function or component in isolation - **Integration** — do the pieces work together? - **System** — the whole application, end to end - **Acceptance (UAT)** — does it satisfy the actual business need? Bugs get reported, tracked, fixed, and retested until the release is stable — a loop, not a single step. ## Releasing and maintaining software Software typically ships through three stages of increasing confidence: **alpha** (a preview for select stakeholders, may still change), **beta** (broader testing against real requirements), and **general availability** (stable, for everyone). After deployment, **maintenance** handles bug fixes, UI issues, and requirements that only became clear once real users started using the product. Two kinds of documentation carry a project past its first release: - **System documentation** — READMEs, inline comments, architecture and design docs, maintenance guides - **User documentation** — guides, manuals, and in-app help > **Key idea:** documentation isn't a deliverable you write once at the end — it's what lets someone other than you (including future you) safely change the system later.29:Tdb6,## The building blocks Python is a readable, general-purpose language used for web apps, automation, data analysis, and AI. Every program starts with the same fundamentals: variables, expressions, operators, and a handful of built-in types. ```python x = 7 # int y = 12.4 # float name = "John" # str is_valid = True # bool print(type(x)) # ``` - **Variables** are created the moment you assign them — no separate declaration needed. - `type()` reveals a value's data type at runtime, which is useful when debugging unexpected behavior. - `#` starts a comment; Python ignores everything after it on that line. ## Operators and decisions Arithmetic operators work as you'd expect, with two Python-specific additions — floor division and modulo: ```python x, y = 9, 4 x + y # 13 addition x - y # 5 subtraction x * y # 36 multiplication x / y # 2.25 division (always returns a float) x // y # 2 floor division (integer quotient) x % y # 1 modulo (remainder) ``` - Comparison operators (`==`, `!=`, `<`, `>=`, ...) evaluate to a boolean and drive `if`/`while` logic. - Clear, well-named comments explain *why* code exists — they should never restate *what* the next line obviously does. ## Working with strings Strings are sequences of characters, so they support indexing and slicing just like lists: ```python s = "Hello" s[0] # 'H' indexing s[1:4] # 'ell' slicing len(s) # 5 length s.upper() # 'HELLO' s.lower() # 'hello' s.replace("Hello", "Hi") # 'Hi' s.split("l") # ['He', '', 'o'] " hi ".strip() # 'hi' "Hello" + " " + "World" # concatenation -> 'Hello World' ``` - Indexing pulls out **one** character; slicing (`start:end`) pulls out a **range**. - Strings are immutable — every method above *returns a new string* rather than modifying the original. ## Dictionaries and sets **Dictionaries** store unique keys mapped to values — ideal for named, structured data: ```python person = {"name": "Ada", "role": "Engineer"} person["role"] # 'Engineer' person["team"] = "Core" # add a new key del person["role"] # remove a key person.keys() # dict_keys(['name', 'team']) person.values() # dict_values(['Ada', 'Core']) person.items() # dict_items([('name', 'Ada'), ('team', 'Core')]) ``` **Sets** store unique, unordered elements and support classic set math: ```python a = {1, 2, 3} b = {2, 3, 4} a | b # union -> {1, 2, 3, 4} a & b # intersection -> {2, 3} a - b # difference -> {1} a.issubset(b) # False ``` ## Reading errors, writing better code Python surfaces mistakes as errors with a traceback pointing at the offending line — reading that message carefully is the fastest way to fix it: ```python >>> 1 + "1" TypeError: unsupported operand type(s) for +: 'int' and 'str' ``` - Favor small functions with descriptive names over large, do-everything blocks. - Comment the *why*, not the *what* — the code already says what it does. - Experiment often: a Python REPL is the fastest way to confirm how a function behaves before using it in a larger program. > **Tip:** `TypeError`, `NameError`, and `IndexError` are the three most common beginner errors — they almost always mean a value's type, name, or position wasn't what the code expected.2a:T15b5,## What "back end" means Back-end developers write the code that connects the browser to servers, databases, and business logic. A typical back end is built from several pieces working together: - **Database servers** — house, retrieve, and deliver data - **Application servers** — sit between the database and the web server, running business logic and turning raw data into content - **Web servers** — serve content and route requests to clients - **Web APIs** — define how two pieces of software talk to each other (a *web service* is a Web API that uses HTTP) **Node.js** is a JavaScript runtime built on Chrome's V8 engine that lets JavaScript run *outside* the browser, on the server. It's single-threaded but handles I/O through non-blocking events and callbacks — which is exactly why it scales well for concurrent, I/O-heavy servers. It's used in production at Uber, LinkedIn, PayPal, and eBay. **Express** is a minimal, configurable framework that runs on top of Node.js, abstracting away its lower-level HTTP APIs with clean routing and middleware. A back end has to account for **load** (concurrent users and transactions), **scalability** (handling more load without degrading), **security** (authentication, malware prevention), and **performance**. ## Modules, packages, and npm Every JavaScript file in Node is a **module** — a self-contained, reusable unit of code. A **package** is a directory of one or more modules described by a `package.json` file. ```js // math.js — expose functions from a module exports.add = (a, b) => a + b; // app.js — consume it const math = require('./math'); math.add(2, 3); // 5 ``` `require()` and `import` both load modules, but they aren't the same: | | `require()` (CommonJS) | `import` (ES Modules) | |---|---|---| | Position | Anywhere in the file | Top of the file only | | Binding | Dynamic | Static | | Loading | Synchronous | Asynchronous | - Modules come in three flavors: **core** (built into Node), **local** (your own code), and **third-party** (installed via npm). - `npm install ` installs **locally** by default — only that project can use it. A **global** install (`-g`) makes it available machine-wide, which can quietly break version compatibility across projects. ## Async programming: callbacks, promises, async/await Node runs network operations **non-blocking**: a call returns immediately, and a callback fires once the result is ready — so the server is never stuck waiting. ```js // error-first callback convention fs.readFile('data.json', (err, data) => { if (err) return console.error(err); console.log(data); }); ``` Deeply nested callbacks ("callback hell") are hard to read, so modern code prefers **Promises** and `async`/`await`: ```js async function getUser(id) { const res = await axios.get(`/api/users/${id}`); // pauses until resolved return res.data; } ``` A Promise is always in one of three states — **pending**, **fulfilled**, or **rejected** — and `async` functions always return one, even if you never write `new Promise(...)` yourself. - `JSON.parse()` turns a JSON string into a JS object; `JSON.stringify()` does the reverse. - **Axios** is a promise-based HTTP client that wraps this pattern for REST calls, on both the browser and Node. ## Express: routing, middleware, and auth A **route** pairs an HTTP method and a URL path with a handler function: ```js const express = require('express'); const app = express(); app.get('/users/:id', (req, res) => { res.json({ id: req.params.id, name: 'Ada' }); }); app.listen(3000); ``` **Middleware** are functions with access to `req`, `res`, and `next` — they run in a chain, and each one can respond, transform the request, or hand off to the next middleware. Express uses them for parsing JSON bodies, authentication, logging, and error handling. ```js app.use((req, res, next) => { console.log(`${req.method} ${req.path}`); next(); // pass control to the next handler }); ``` Three common authentication strategies: - **Session-based** — credentials are checked once; the server stores a session ID that's echoed back in a cookie on every request. - **Token-based (JWT)** — the client receives a signed token (header, payload, signature) and sends it with each request as proof of identity; scales better than sessions since the server stores nothing. - **Passwordless** — biometrics, magic links, or one-time codes, backed by public/private key encryption. ## Designing a REST API Every HTTP response carries a status code that tells the client what happened: | Range | Meaning | |---|---| | 200–299 | Success | | 300–399 | Resource moved | | 400–499 | Client error | | 500–599 | Server error | The core HTTP methods map cleanly onto CRUD: ``` GET /users # list GET /users/123 # read one POST /users # create -> 201 PUT /users/123 # update/replace -> 200 or 404 DELETE /users/123 # delete -> 204 ``` `PUT` and `DELETE` are **idempotent** — calling them repeatedly has the same effect as calling them once; `POST` is not. Good REST URLs: - Use **nouns**, not verbs — `/users`, not `/getUsers` - Use plural nouns for collections — `/users/123`, not `/user/123` - Use lowercase and hyphens, never camelCase or underscores - Never end in a trailing slash > **Anti-pattern:** `GET /getUser/123` and `POST /addUser` bake the *verb* into the URL — the RESTful versions are `GET /users/123` and `POST /users`, since the HTTP method already says what's happening.2b:T1044,## Why React React is an open-source JavaScript library — not a full framework — for building interactive UIs out of small, reusable pieces called **components**. - **Component-based** — the UI is a tree of independent, composable pieces - **Declarative** — you describe *what* the UI should look like for a given state, and React figures out *how* to update the DOM - **JSX** — an HTML-like syntax extension that compiles down to plain JavaScript function calls - **One-way data flow** — data moves down from parent to child through props, which keeps state predictable - **Hooks** — let function components manage state and side effects without ever writing a class ## Components, props, and state ```jsx function Greeting({ name }) { // props are read-only inputs const [count, setCount] = useState(0); // state can change over time return (

Hello, {name}!

); } ``` - **Props** are passed down from a parent and are read-only — a child can never modify its own props. - **State** belongs to a component and changing it (via its setter) triggers a re-render. - **Local state** lives in one component; **shared state** is lifted up to a common parent (or a store) so multiple components can coordinate. ## Hooks and the component lifecycle Function components don't have lifecycle methods, but hooks cover the same needs: ```jsx useEffect(() => { const controller = new AbortController(); fetch('/api/data', { signal: controller.signal }) .then(res => res.json()) .then(setData); return () => controller.abort(); // cleanup on unmount }, []); // empty array -> run once, on mount ``` - **Mounting** — the component initializes, sets up state, and runs any one-time side effects - **Updating** — a state or prop change re-runs the function body and re-evaluates the JSX - **Unmounting** — cleanup functions returned from `useEffect` run here (cancel subscriptions, timers, requests) `useState` manages local state, `useEffect` handles side effects, and `useReducer` steps in when state transitions get complex enough that a single `setState` call isn't enough. ## Project structure and styling Modern React projects are commonly scaffolded with **Vite**, which is faster than the older Create React App because it serves source files directly over native ES modules instead of bundling everything up front: ```bash npm create vite@latest my-app -- --template react ``` ``` my-app/ ├─ public/ # static assets ├─ src/ │ ├─ main.jsx # entry point │ └─ App.jsx # root component ├─ package.json └─ vite.config.js ``` Styling options range from simple to structured: - **Inline styles** — a JS object passed to `style={{ ... }}` - **CSS Modules** — `Component.module.css`, scoped automatically to that component - **Styled-components / CSS-in-JS** — styles defined alongside the component, with full access to props ## Testing and app-wide state Modern React tests focus on **user-visible behavior**, not implementation details — because concurrent rendering means updates aren't always synchronous: ```jsx test('increments the counter on click', async () => { render(); await userEvent.click(screen.getByRole('button')); expect(await screen.findByText('Clicked 1 times')).toBeInTheDocument(); }); ``` - Prefer `findBy*` queries and `waitFor` over asserting on the DOM immediately after an interaction. - Simulate real interactions (clicks, typing, network responses) rather than calling internal methods directly. For state shared across many components, **Redux Toolkit** cuts the boilerplate of classic Redux: ```js const counterSlice = createSlice({ name: 'counter', initialState: { value: 0 }, reducers: { increment: (state) => { state.value += 1 } }, }); const store = configureStore({ reducer: counterSlice.reducer }); ``` > **Tip:** `createSlice()` lets you "mutate" state directly inside a reducer — Redux Toolkit uses Immer under the hood to turn that into a safe, immutable update.2c:Tfc2,## The Twelve-Factor App Modern software is delivered as a service — centrally hosted, accessed over the internet — and the **Twelve-Factor App** methodology captures the practices that suit this model, especially for microservices. Its factors group into three phases: **Code** - One codebase, tracked in version control, deployed many times - Build → release → run as three strictly separate stages - Keep dev and prod environments as similar as possible **Deploy** - Treat every dependency as explicit - Keep anything that varies between environments in config, not code - Access local and third-party services uniformly, by URL and credentials - Keep processes stateless and share-nothing - Export functionality by binding to a port **Operate** - Scale via disposable, concurrent, stateless processes - Treat logs as an event stream, captured by the runtime - Run one-off admin tasks against a release, using the same codebase and config ## Microservices vs. monolith vs. SOA A **microservice** architecture builds one application from many small, independently deployable services, each owning a single business responsibility and its own technology stack. | | Monolith | SOA | Microservices | |---|---|---|---| | Structure | One process, internal layers | Provider/consumer services | Loosely coupled, independent components | | Strength | Simple to build | Reliable, parallel development | Scale and evolve independently | | Weakness | Complexity grows with size | Complex, expensive design | Larger security surface, harder debugging | Because microservices don't share interdependencies, teams can update, scale, and adopt new technology in one service without touching the others. ## Patterns, REST, and API gateways Common patterns for structuring microservices: - **SPA** — one interface that updates dynamically via REST, instead of reloading - **Backend for Frontend (BFF)** — one backend per UI type, tailored per channel - **Strangler** — replace a monolith's domains with microservices in stages, old and new running side by side - **Service Discovery** — lets services find each other as instances change REST maps cleanly onto CRUD: ``` POST -> Create GET -> Read PUT -> Update DELETE -> Delete ``` An **API Gateway** sits between clients and this collection of backend services as a single point of contact — protecting, analyzing, and monetizing APIs, at the cost of an extra network hop and a potential single point of failure. ## Building and testing APIs ```bash curl -X GET 'http://127.0.0.1:5000/products' -H 'accept: application/json' ``` - **cURL** — a command-line tool for transferring data with URLs; great for quick endpoint tests and debugging - **Postman** — a full API platform with a GUI, built for team collaboration across the whole API lifecycle - **Swagger / OpenAPI** — a standard, language-agnostic way to describe a REST API's operations, inputs, and auth requirements, and generate an interactive UI from it (`pip install flask-swagger-ui` in Flask) - **GraphQL** — lets clients fetch exactly the fields they need through one endpoint, avoiding REST's over- and under-fetching: ```graphql query { user(id: "1") { name email } } ``` ## Serverless computing The CNCF defines **serverless** as building and running applications without managing servers: code ships as functions, uploaded to a platform, and executed, scaled, and billed purely on demand — effectively **FaaS** (Functions as a Service) plus **BaaS** (Backend as a Service). - Hostless, elastic, stateless, event-driven, billed by usage - Pros: lower cost, faster development, built-in high availability - Cons: cold starts, vendor lock-in, harder monitoring and debugging, poor fit for long-running processes > **Best practice:** give each function exactly one responsibility, keep it small and lightweight so it loads fast, avoid chaining many functions together, and limit third-party dependencies — all four directly reduce cold-start time and cost.2d:T109d,## Databases and DBMSs A **database** is an organized collection of data designed for structured storage, search, and retrieval. A **database management system (DBMS)** is the software that creates, maintains, and queries it. Choosing a database comes down to a handful of questions: - What shape is the data — rigid rows and columns, or something more flexible? - How will it be queried, and how fast does that query need to return? - What transaction speed and volume does the workload demand? Databases split into two broad families: **relational**, which store data in linked tables with a fixed schema, and **non-relational (NoSQL)**, which trade rigid structure for schema flexibility and horizontal scale. ## Relational vs. NoSQL | | Relational (SQL) | NoSQL | |---|---|---| | Schema | Fixed, defined up front | Flexible, schema-less | | Query language | SQL | Varies by database | | Scaling | Mostly vertical | Horizontal, built for it | | Consistency | ACID-compliant | Often eventually consistent | | Good for | Transactions, structured data | Big data, rapid iteration | Relational engines range from open-source (MySQL, PostgreSQL) to commercial (Oracle, SQL Server, IBM Db2), and shine at OLTP workloads, data warehousing, and anywhere accuracy matters more than raw scale. NoSQL splits into four common models: - **Key-value** (Redis, DynamoDB) — sessions, caching, real-time recommendations - **Document** (MongoDB, CouchDB) — flexible records for e-commerce, CRM, medical data - **Column-family** (Cassandra, HBase) — heavy write loads, time-series and IoT data - **Graph** (Neo4j) — modeling connections: social networks, fraud detection, recommendations ## SQL fundamentals Reading data: ```sql SELECT column1, column2 FROM table_name WHERE condition ORDER BY column1 DESC; SELECT column1, COUNT(*) FROM table_name GROUP BY column1 HAVING COUNT(*) > 1; ``` Combining tables: ```sql SELECT o.id, c.name FROM orders o INNER JOIN customers c ON o.customer_id = c.id; ``` `INNER JOIN` keeps only matching rows; `LEFT`/`RIGHT JOIN` also keep unmatched rows from one side; `FULL JOIN` keeps everything from both. Changing data: ```sql INSERT INTO users (name, email) VALUES ('Ada', 'ada@example.com'); UPDATE users SET email = 'new@example.com' WHERE id = 1; DELETE FROM users WHERE id = 1; ``` Changing structure (DDL): ```sql CREATE TABLE users (id SERIAL PRIMARY KEY, name TEXT, email TEXT); ALTER TABLE users ADD COLUMN active BOOLEAN DEFAULT true; DROP TABLE users; ``` ## Django: the batteries-included framework Django is an open-source Python web framework built around **Model-View-Template (MVT)**: - **Model** — defines data and business logic, mapped directly onto database tables - **View** — decides *what* data to present - **Template** — renders it as HTML, keeping presentation separate from logic Its ORM lets you talk to the database without writing raw SQL: ```python class Article(models.Model): title = models.CharField(max_length=200) published = models.BooleanField(default=False) Article.objects.create(title="Hello World") # create Article.objects.filter(published=True) # read Article.objects.get(id=1).save() # update Article.objects.get(id=1).delete() # delete ``` Out of the box, Django also ships an auto-generated admin interface, session-based authentication and permissions, a built-in test runner, and defenses against XSS, CSRF, and SQL injection. ## Deploying a Django app Django's own `runserver` command is for local development only — production deployments front the app with a **WSGI** or **ASGI**-compliant server behind Apache or Nginx. ```bash pip install gunicorn gunicorn myproject.wsgi:application ``` From there, teams typically pick one of three paths: - A manually configured **virtual machine** — full control, full responsibility - A **platform-as-a-service** like Heroku — push to a git repo and it handles the rest - A **Docker container**, run at scale with an orchestrator like Kubernetes Django is database-agnostic — PostgreSQL, MySQL, MariaDB, Oracle, and SQLite are all supported, so the choice comes down to durability, scale, and hosting needs rather than framework compatibility.2e:Tfc7,## What containers are, and why Docker won A **container** packages application code with every library and dependency it needs, so it runs unchanged from a laptop to production — whether the host is bare metal, a VM, or the cloud. - Faster deployment through automation, lower cost, better resource utilization - Portable across environments, and a natural fit for microservices - Downsides: a compromised host OS affects every container on it, and managing thousands of them adds real operational complexity | Platform | Known for | |---|---| | **Docker** | Most widely adopted, simple architecture | | **Podman** | Daemon-less, more secure by design | | **LXC** | Preferred for data-intensive workloads | | **Vagrant** | Maximum isolation on a single machine | ## Docker architecture Docker follows a client-server model: the **Docker client** sends commands over the CLI or REST API to a host running the **Docker daemon** (`dockerd`), which builds, runs, and distributes containers, pulling and pushing images from a **registry** like Docker Hub. ```dockerfile FROM node:20-slim WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 3000 CMD ["node", "server.js"] ``` Each instruction becomes a read-only image layer; `docker build` packages them into a tagged image, and `docker run` starts a writable container from it: ```bash docker build -t my-app:v1 . docker run -p 3000:3000 my-app:v1 docker ps # list running containers docker images # list local images ``` ## From containers to orchestration Once you're running more than a handful of containers, container **orchestration** automates their lifecycle — deployment, networking, scaling, and availability — instead of leaving it to scripts. | Tool | Notes | |---|---| | Marathon | Open-source cluster manager | | Nomad | Lightweight, supports many workload types | | Docker Swarm | Built into Docker, simplest to adopt | | **Kubernetes** | The de facto standard | **Kubernetes (k8s)**, originally built by Google and now maintained by the CNCF, manages containerized applications *declaratively*: you describe the desired state, and Kubernetes continuously works to make reality match it — automated rollouts and rollbacks, storage orchestration, and horizontal scaling based on real metrics. ## Kubernetes objects and kubectl Every Kubernetes object has a **spec** (what you want) and a **status** (what's actually happening): | Object | Role | |---|---| | **Pod** | The smallest unit — one or more tightly coupled containers | | **ReplicaSet** | Keeps a set number of identical Pods running | | **Deployment** | Manages rollouts and updates on top of ReplicaSets | | **Namespace** | Isolates groups of resources within a cluster | ```yaml apiVersion: apps/v1 kind: Deployment metadata: name: my-app spec: replicas: 3 selector: matchLabels: { app: my-app } template: metadata: labels: { app: my-app } spec: containers: - name: my-app image: my-app:v1 ports: [{ containerPort: 3000 }] ``` ```bash kubectl apply -f deployment.yml kubectl get pods kubectl describe deployment my-app kubectl scale deployment my-app --replicas=5 ``` ## Configuration, secrets, and self-healing Apps get their configuration and sensitive data through dedicated objects: ```bash kubectl create configmap app-config --from-literal=timeout=5000 kubectl create secret generic app-secret --from-literal=password=hunter2 ``` A **Service** or **Ingress** then exposes a set of Pods to other workloads or external traffic. Underneath it all, the control plane relies on **etcd** as the cluster's source of truth, the **kube-scheduler** to place new Pods, and the **kubelet** on every node to keep containers running and healthy. > **Key idea:** this is what gives Kubernetes its defining trait — **self-healing**. It doesn't just run your containers; it continuously restarts, reschedules, or replaces them so the cluster's actual state always converges back to what you declared.19:["$","$L21",null,{"cities":[{"year":2023,"years":[2023],"name":"Campus Town","lat":30,"lon":-150,"ground":[0.5,0.47,0.36],"gridRotation":0.9428608708312534},{"year":2024,"years":[2024],"name":"Browser Bay","lat":30,"lon":-30,"ground":[0.36,0.5,0.52],"gridRotation":0.3760205918641052},{"year":2025,"years":[2025],"name":"Engine Works","lat":-30,"lon":30,"ground":[0.55,0.4,0.32],"gridRotation":0.6716616516437776},{"year":2026,"years":[2026],"name":"Full-Stack City","lat":-30,"lon":150,"ground":[0.34,0.42,0.56],"gridRotation":1.324309651681218}],"contents":[{"year":2023,"name":"Campus Town","projects":[{"id":"watchme","name":"WatchMe","month":"Nov","year":2023,"status":"done","detail":"TypeScript"}],"posts":[],"certificates":[],"education":[{"id":"bcit-2023","name":"BCIT Applied Web Development and Computer Systems (2023)","credits":21}],"milestones":["Started Computer Systems at BCIT (Winter 2023)"],"graduated":null},{"year":2024,"name":"Browser Bay","projects":[{"id":"hangman-javascript","name":"Hangman JavaScript","month":"Jun","year":2024,"status":"done","detail":"JavaScript"}],"posts":[],"certificates":[],"education":[{"id":"bcit-2024","name":"BCIT Computer Systems (2024)","credits":18}],"milestones":[],"graduated":null},{"year":2025,"name":"Engine Works","projects":[{"id":"toon-tank","name":"Toon Tank","month":"Mar","year":2025,"status":"done","detail":"Blueprint"},{"id":"unreal-paradise","name":"Unreal Paradise","month":"Mar","year":2025,"status":"done","detail":"Blueprint"},{"id":"quest-locator","name":"Quest Locator","month":"Feb","year":2025,"status":"done","detail":"Blueprint"},{"id":"marc-eletrica","name":"Marc Elétrica","month":"Jan","year":2025,"status":"done","detail":"TypeScript"}],"posts":[{"id":"design-methodology","name":"Design Methodology","month":"Jul","year":2025,"topic":"My Engine"},{"id":"game-design-genres","name":"Game Design Genres","month":"May","year":2025,"topic":"My Engine"},{"id":"creating-a-dynamic-fps-hud","name":"Creating a Dynamic FPS HUD","month":"May","year":2025,"topic":"Unreal Engine 5.5"},{"id":"main-menu","name":"Main Menu","month":"Apr","year":2025,"topic":"Unreal Engine 5.5"}],"certificates":[],"education":[{"id":"bcit-2025","name":"BCIT Computer Systems (2025)","credits":18}],"milestones":[],"graduated":null},{"year":2026,"name":"Full-Stack City","projects":[{"id":"dealership-website","name":"Dealership Website","month":"Sep","year":2026,"status":"done","detail":"Full-Stack Application"},{"id":"spendwise","name":"Spendwise","month":"Sep","year":2026,"status":"done","detail":"TypeScript"},{"id":"course-rating-app","name":"Course Rating App","month":"Sep","year":2026,"status":"done","detail":"Python"},{"id":"emotion-detection-api","name":"Emotion Detection API","month":"Sep","year":2026,"status":"done","detail":"Python"},{"id":"book-review-api","name":"Book Review API","month":"Aug","year":2026,"status":"done","detail":"JavaScript"},{"id":"plant-shop-cart","name":"Plant Shop Cart","month":"Aug","year":2026,"status":"done","detail":"JavaScript"},{"id":"conference-expense-planner","name":"Conference Expense Planner","month":"Aug","year":2026,"status":"done","detail":"JavaScript"},{"id":"shipping-rate-calculator","name":"Shipping Rate Calculator","month":"Aug","year":2026,"status":"done","detail":"Python"},{"id":"stockvio","name":"Stockvio","month":"Apr","year":2026,"status":"done","detail":"TypeScript"}],"posts":[{"id":"containers-docker-and-kubernetes-fundamentals","name":"Containers, Docker, and Kubernetes Fundamentals","month":"Sep","year":2026,"topic":"Study Notes"},{"id":"django-sql-and-relational-vs-nosql-databases","name":"Django, SQL, and Relational vs. NoSQL Databases","month":"Sep","year":2026,"topic":"Study Notes"},{"id":"microservices-rest-apis-and-serverless-computing","name":"Microservices, REST APIs, and Serverless Computing","month":"Sep","year":2026,"topic":"Study Notes"},{"id":"react-components-hooks-testing-and-state","name":"React Components, Hooks, Testing, and State","month":"Sep","year":2026,"topic":"Study Notes"},{"id":"node-js-express-and-rest-api-foundations","name":"Node.js, Express, and REST API Foundations","month":"Sep","year":2026,"topic":"Study Notes"},{"id":"python-foundations-types-strings-and-collections","name":"Python Foundations: Types, Strings, and Collections","month":"Sep","year":2026,"topic":"Study Notes"},{"id":"the-sdlc-requirements-testing-and-documentation","name":"The SDLC: Requirements, Testing, and Documentation","month":"Sep","year":2026,"topic":"Study Notes"},{"id":"devops-cloud-delivery-and-security-fundamentals","name":"DevOps, Cloud Delivery, and Security Fundamentals","month":"Sep","year":2026,"topic":"Study Notes"},{"id":"cloud-infrastructure-storage-and-virtualization","name":"Cloud Infrastructure, Storage, and Virtualization","month":"Sep","year":2026,"topic":"Study Notes"},{"id":"cloud-computing-foundations-and-service-models","name":"Cloud Computing Foundations and Service Models","month":"Sep","year":2026,"topic":"Study Notes"},{"id":"git-and-version-control-foundations","name":"Git and Version Control Foundations","month":"Sep","year":2026,"topic":"Study Notes"}],"certificates":[{"id":"ibm-microservices-serverless","name":"Application Development using Microservices and Serverless","month":"Sep","year":2026,"issuer":"IBM"},{"id":"vanderbilt-claude-code","name":"Claude Code: Software Engineering with Generative AI Agents","month":"Sep","year":2026,"issuer":"Vanderbilt University"},{"id":"ibm-containers-docker-kubernetes","name":"Introduction to Containers w/ Docker, Kubernetes & OpenShift","month":"Sep","year":2026,"issuer":"IBM"},{"id":"ibm-django-sql-databases","name":"Django Application Development with SQL and Databases","month":"Sep","year":2026,"issuer":"IBM"},{"id":"ibm-ai-apps-python-flask","name":"Developing AI Applications with Python and Flask","month":"Sep","year":2026,"issuer":"IBM"},{"id":"ibm-python-data-science-ai","name":"Python for Data Science, AI & Development","month":"Aug","year":2026,"issuer":"IBM"},{"id":"ibm-back-end-node-express","name":"Developing Back-End Apps with Node.js and Express","month":"Aug","year":2026,"issuer":"IBM"},{"id":"ibm-front-end-react","name":"Developing Front-End Apps with React","month":"Aug","year":2026,"issuer":"IBM"},{"id":"ibm-git-github","name":"Getting Started with Git and GitHub","month":"Aug","year":2026,"issuer":"IBM"},{"id":"ibm-html-css-javascript","name":"Introduction to HTML, CSS, & JavaScript","month":"Aug","year":2026,"issuer":"IBM"},{"id":"ibm-intro-cloud-computing","name":"Introduction to Cloud Computing","month":"Aug","year":2026,"issuer":"IBM"},{"id":"ibm-intro-software-engineering","name":"Introduction to Software Engineering","month":"Jul","year":2026,"issuer":"IBM"},{"id":"microsoft-oop-cpp","name":"Object Oriented Programming with C++","month":"Jun","year":2026,"issuer":"Microsoft"},{"id":"microsoft-intermediate-cpp","name":"Intermediate C++ Programming Techniques","month":"Apr","year":2026,"issuer":"Microsoft"},{"id":"microsoft-cpp-programming-fundamentals","name":"C++ Programming Fundamentals","month":"Mar","year":2026,"issuer":"Microsoft"}],"education":[{"id":"bcit-2026","name":"BCIT Computer Systems (2026)","credits":3}],"milestones":["Certificate in Computer Systems from BCIT, with distinction (April 2026)","Shipped Stockvio, a full-stack inventory platform with web, desktop, and mobile clients"],"graduated":2026}],"panelData":[{"year":2023,"projects":[{"id":"watchme","name":"WatchMe","status":"done","month":"Nov","year":2023,"category":"Web Application","language":"TypeScript","tools":["React","TypeScript","Webpack","Babel","Sass","Axios","JSON Server","Git"],"summary":"WatchMe is a React and TypeScript movie catalog that lists films by genre, with a sidebar for switching between genres.","repoUrl":"https://github.com/Felipeact/WatchMe","liveUrl":"$undefined","architecture":{"id":"watchme","source":"generated","graph":{"nodes":[{"id":"client","label":"Browser","kind":"client","tech":"React, Webpack, Sass"}],"edges":[]}}}],"posts":[],"certificates":[],"milestones":"$19:props:contents:0:milestones","bcit":{"terms":[{"year":2023,"label":"Winter 2023","program":"Applied Web Development","credits":8,"courses":["COMP 1630 Relational Database & SQL","COMP 1850 Intro Web Development"],"cumulativeCredits":8,"thisYear":true,"ahead":false},{"year":2023,"label":"Spring/Summer 2023","program":"Computer Systems","credits":7,"courses":["COMP 1002 Applied Computer Concepts","COMP 1516 Programming Part 1: Python"],"cumulativeCredits":15,"thisYear":true,"ahead":false},{"year":2023,"label":"Fall 2023","program":"Computer Systems","credits":6,"courses":["COMM 1106 Intro Business/Technical Communication","COMP 2501 Programming Fundamentals Part 2: Java"],"cumulativeCredits":21,"thisYear":true,"ahead":false},{"year":2024,"label":"Winter 2024","program":"Computer Systems","credits":7,"courses":["COMM 2216 Business Communications 2","COMP 2601 Programming Part 3 (OO Design)"],"cumulativeCredits":28,"thisYear":false,"ahead":true},{"year":2024,"label":"Spring/Summer 2024","program":"Computer Systems","credits":7,"courses":["COMP 1114 Mathematics for Computing","COMP 2132 Web Development JavaScript"],"cumulativeCredits":35,"thisYear":false,"ahead":true},{"year":2024,"label":"Fall 2024","program":"Computer Systems","credits":4,"courses":["COMP 2831 Business Analysis & System Design"],"cumulativeCredits":39,"thisYear":false,"ahead":true},{"year":2025,"label":"Winter 2025","program":"Computer Systems","credits":8,"courses":["COMP 2121 Discrete Mathematics","COMP 2833 Agile Scrum Methods"],"cumulativeCredits":47,"thisYear":false,"ahead":true},{"year":2025,"label":"Spring/Summer 2025","program":"Computer Systems","credits":4,"courses":["COMP 2825 Computer Architecture/Organization"],"cumulativeCredits":51,"thisYear":false,"ahead":true},{"year":2025,"label":"Fall 2025","program":"Computer Systems","credits":6,"courses":["COMP 1011 UX/UI Development","COMP 2701 Intro Procedural C Programming"],"cumulativeCredits":57,"thisYear":false,"ahead":true},{"year":2026,"label":"Winter 2026","program":"Computer Systems","credits":3,"courses":["COMP 2801 App Development with C"],"cumulativeCredits":60,"thisYear":false,"ahead":true}],"totalCredits":60,"transcriptFile":"/bcit/transcript.pdf","credential":{"name":"Certificate in Computer Systems","awarded":"2026-04-07","note":"With Distinction"},"credentialEarned":false}},{"year":2024,"projects":[{"id":"hangman-javascript","name":"Hangman JavaScript","status":"done","month":"Jun","year":2024,"category":"Browser Game","language":"JavaScript","tools":["JavaScript","HTML","Sass","CSS","Git"],"summary":"Hangman JavaScript is a browser-based Hangman game built with plain HTML, CSS, and JavaScript.","repoUrl":"https://github.com/Felipeact/Hangman-Javascript","liveUrl":"$undefined","architecture":{"id":"hangman-javascript","source":"generated","graph":{"nodes":[{"id":"client","label":"Player","kind":"client","tech":"HTML, Sass, CSS"}],"edges":[]}}}],"posts":[],"certificates":[],"milestones":"$19:props:contents:1:milestones","bcit":{"terms":[{"year":2023,"label":"Winter 2023","program":"Applied Web Development","credits":8,"courses":"$19:props:panelData:0:bcit:terms:0:courses","cumulativeCredits":8,"thisYear":false,"ahead":false},{"year":2023,"label":"Spring/Summer 2023","program":"Computer Systems","credits":7,"courses":"$19:props:panelData:0:bcit:terms:1:courses","cumulativeCredits":15,"thisYear":false,"ahead":false},{"year":2023,"label":"Fall 2023","program":"Computer Systems","credits":6,"courses":"$19:props:panelData:0:bcit:terms:2:courses","cumulativeCredits":21,"thisYear":false,"ahead":false},{"year":2024,"label":"Winter 2024","program":"Computer Systems","credits":7,"courses":"$19:props:panelData:0:bcit:terms:3:courses","cumulativeCredits":28,"thisYear":true,"ahead":false},{"year":2024,"label":"Spring/Summer 2024","program":"Computer Systems","credits":7,"courses":"$19:props:panelData:0:bcit:terms:4:courses","cumulativeCredits":35,"thisYear":true,"ahead":false},{"year":2024,"label":"Fall 2024","program":"Computer Systems","credits":4,"courses":"$19:props:panelData:0:bcit:terms:5:courses","cumulativeCredits":39,"thisYear":true,"ahead":false},{"year":2025,"label":"Winter 2025","program":"Computer Systems","credits":8,"courses":"$19:props:panelData:0:bcit:terms:6:courses","cumulativeCredits":47,"thisYear":false,"ahead":true},{"year":2025,"label":"Spring/Summer 2025","program":"Computer Systems","credits":4,"courses":"$19:props:panelData:0:bcit:terms:7:courses","cumulativeCredits":51,"thisYear":false,"ahead":true},{"year":2025,"label":"Fall 2025","program":"Computer Systems","credits":6,"courses":"$19:props:panelData:0:bcit:terms:8:courses","cumulativeCredits":57,"thisYear":false,"ahead":true},{"year":2026,"label":"Winter 2026","program":"Computer Systems","credits":3,"courses":"$19:props:panelData:0:bcit:terms:9:courses","cumulativeCredits":60,"thisYear":false,"ahead":true}],"totalCredits":60,"transcriptFile":"/bcit/transcript.pdf","credential":"$19:props:panelData:0:bcit:credential","credentialEarned":false}},{"year":2025,"projects":[{"id":"marc-eletrica","name":"Marc Elétrica","status":"done","month":"Jan","year":2025,"category":"Institutional Website","language":"TypeScript","tools":["Next.js","React","TypeScript","Prisma","PostgreSQL","Git"],"summary":"An institutional website for an electrical services company serving Sao Paulo and Greater Sao Paulo, focused on safety, quality, and personal service.","repoUrl":"$undefined","liveUrl":"https://marceletrica.com/","architecture":{"id":"marc-eletrica","source":"generated","graph":{"nodes":[{"id":"client","label":"Browser","kind":"client","tech":"Next.js, React"},{"id":"database","label":"Database","kind":"database","tech":"Prisma, PostgreSQL"}],"edges":[["client","database"]]}}},{"id":"quest-locator","name":"Quest Locator","status":"done","month":"Feb","year":2025,"category":"Game","language":"Blueprint","tools":["Unreal Engine","Blueprints","C++","Git"],"summary":"Quest Locator is a gameplay-focused Unreal Engine 5 project developed in C++ with Blueprint integration, exploring quest tracking, world interaction, and player guidance systems.","repoUrl":"$undefined","liveUrl":"$undefined","architecture":{"id":"quest-locator","source":"generated","graph":{"nodes":[{"id":"client","label":"Player","kind":"client","tech":"Game"},{"id":"engine","label":"Game engine","kind":"engine","tech":"Unreal Engine 5.6, Blueprint"}],"edges":[["client","engine"]]}}},{"id":"unreal-paradise","name":"Unreal Paradise","status":"done","month":"Mar","year":2025,"category":"Game","language":"Blueprint","tools":["Unreal Engine","Blueprints","Git"],"summary":"Unreal Paradise is a gameplay-focused Unreal Engine 5 project developed using Blueprints, exploring procedural world generation, landscape layers, and dynamic world interaction systems.","repoUrl":"$undefined","liveUrl":"$undefined","architecture":{"id":"unreal-paradise","source":"generated","graph":{"nodes":[{"id":"client","label":"Player","kind":"client","tech":"Game"},{"id":"engine","label":"Game engine","kind":"engine","tech":"Unreal Engine 5.6, Blueprint"}],"edges":[["client","engine"]]}}},{"id":"toon-tank","name":"Toon Tank","status":"done","month":"Mar","year":2025,"category":"Game","language":"Blueprint","tools":["Unreal Engine","Blueprints","C++","Git"],"summary":"ToonTanks is a gameplay-focused Unreal Engine 5 project built with C++ and Blueprints that explores core gameplay programming concepts such as player control, AI targeting, and structured game flow management.","repoUrl":"$undefined","liveUrl":"$undefined","architecture":{"id":"toon-tank","source":"generated","graph":{"nodes":[{"id":"client","label":"Player","kind":"client","tech":"Game"},{"id":"engine","label":"Game engine","kind":"engine","tech":"Unreal Engine 5.7, Blueprint"}],"edges":[["client","engine"]]}}}],"posts":[{"id":"main-menu","name":"Main Menu","month":"Apr","year":2025,"topic":"Unreal Engine 5.5","tags":["Blueprint","UI"],"thumbnail":{"url":"https://res.cloudinary.com/ddilbzpki/image/upload/v1745985505/blog_assets/thumbnail-1745985504712.png","isVideo":false},"sections":{"blocks":[{"key":"prose","heading":null,"lines":["I started by designing the UI layout using the UMG Designer tab. This involves placing widgets such as an Image for the background, a Vertical Box containing Text and multiple Buttons (e.g., Play, Options, Quit), all arranged inside a Canvas Panel. The Vertical Boxes are named and set as variables for later use in the scripting stage."]},{"key":"prose","heading":null,"lines":["Buttons are duplicated, renamed, and visually customized. I update button Text fields, assign Hover Tint Colors, and set Fill for size consistency. UI elements are organized using the Hierarchy panel for easy access, and ZOrder values are used to manage visual layering (e.g., keeping menus above the background image)."]},{"key":"prose","heading":null,"lines":["The Main Menu is visible by default, while the Options Menu is hidden. Both menus are placed on the same Canvas Panel and positioned to overlap, allowing one to be shown while the other is hidden via blueprint logic. This sets the groundwork for toggling between them using button interactions."]},{"key":"prose","heading":null,"lines":["In the Graph tab, each button's OnClicked event is used to control the flow:","Play: Opens the game level and removes the menu.","Options: Switches visibility between Main and Options menus.","Resolution Buttons: Run console commands like r.setRes 1280x720.","Quit: Executes the Quit command to close the game.","Return: Reverts visibility back to the Main Menu."]},{"key":"prose","heading":null,"lines":["In the Level Blueprint, the menu is created and added to the viewport at game start, showing the mouse cursor for interaction. The FirstPersonCharacter Blueprint ensures the player can’t move or shoot during the menu. The World Settings are configured to assign the correct Game Mode and Default Pawn to prevent gameplay before clicking “Play.”"]}],"features":[],"purpose":[],"scope":[],"techStack":[],"notes":[],"prose":"$22"},"media":{"photos":[{"id":"7f4e0e99-c8b5-4a06-98b0-d6bbcde70e1e","url":"https://res.cloudinary.com/ddilbzpki/image/upload/v1745985505/blog_assets/photos-1745985505362.png","title":"LevelBP.png","description":"Photo"},{"id":"c76a687e-2285-4a7b-98b5-d158a421038a","url":"https://res.cloudinary.com/ddilbzpki/image/upload/v1745985506/blog_assets/photos-1745985505365.png","title":"WBP_MainMenuGraph.png","description":"Photo"}],"videos":[]}},{"id":"creating-a-dynamic-fps-hud","name":"Creating a Dynamic FPS HUD","month":"May","year":2025,"topic":"Unreal Engine 5.5","tags":["Blueprint","UI"],"thumbnail":{"url":"https://res.cloudinary.com/ddilbzpki/image/upload/v1747418515/blog_assets/thumbnail-1747418514095.png","isVideo":false},"sections":{"blocks":[{"key":"prose","heading":null,"lines":["Learned how to set up a responsive First Person Shooter HUD in Unreal Engine using Widget Blueprints. The tutorial covered displaying health, energy, and ammo based on in-game interactions."]},{"key":"prose","heading":null,"lines":["Discover how to use Unreal Motion Graphics (UMG) to create and manage health bars, energy indicators, and dynamic ammo counters that update in real time based on player actions."]},{"key":"prose","heading":null,"lines":["A step-by-step guide to preparing the First Person Blueprint character in Unreal Engine to support game HUD elements like health, energy, and ammo tracking from the start of gameplay."]},{"key":"prose","heading":null,"lines":["This post walks you through modifying the Rifle Blueprint to detect weapon pickup and activate the ammo display widget, making your FPS gameplay more immersive."]},{"key":"prose","heading":null,"lines":["Explore how to bind character variables like health, energy, and ammo to UI widgets so players get real-time feedback as they move, jump, take damage, or shoot."]}],"features":[],"purpose":[],"scope":[],"techStack":[],"notes":[],"prose":"Learned how to set up a responsive First Person Shooter HUD in Unreal Engine using Widget Blueprints. The tutorial covered displaying health, energy, and ammo based on in-game interactions.\n\nDiscover how to use Unreal Motion Graphics (UMG) to create and manage health bars, energy indicators, and dynamic ammo counters that update in real time based on player actions.\n\nA step-by-step guide to preparing the First Person Blueprint character in Unreal Engine to support game HUD elements like health, energy, and ammo tracking from the start of gameplay.\n\nThis post walks you through modifying the Rifle Blueprint to detect weapon pickup and activate the ammo display widget, making your FPS gameplay more immersive.\n\nExplore how to bind character variables like health, energy, and ammo to UI widgets so players get real-time feedback as they move, jump, take damage, or shoot."},"media":{"photos":[],"videos":[]}},{"id":"game-design-genres","name":"Game Design Genres","month":"May","year":2025,"topic":"My Engine","tags":["Thoughts"],"thumbnail":{"url":"https://res.cloudinary.com/ddilbzpki/image/upload/v1748542297/blog_assets/thumbnail-1748542296295.png","isVideo":false},"sections":{"blocks":[{"key":"prose","heading":null,"lines":["What is a Genre?","","Genre is any collection of codes and conventions that we associate with a particular type of game.","","Example: Horror, sport, adventure …. What do you expect to see in those types of games?","","Whi is Important?",""," If we don’t follow the code and conventions of the genre, the audience will be alienated and confused about the game they are playing.","","Even if you want to create a new genre you still must follow the rules that someone set up before you."]},{"key":"prose","heading":null,"lines":["Genre type","","Action And Adventure","","Adventure games is the exploration of an area collecting items and tools and use these Items and tools to complete challenges, often puzzle related, NO COMBAT.","","Action games are the idea of a player being in combat situations more than anything else.","","Action Adventure we have the act of the player going around picking items and solving problems and there will be a combat thrown in two, the mix between combat and problem solving."]},{"key":"prose","heading":null,"lines":["Shooters games are an action game, but specifically as you can image this type of game involves shooting, games like this can come in first person or in third person view modes.","","First-person mode is for the eyes of the player, you are seeing it from first person perspective, seeing the world from the eyes of the hero.","","Third Person games are usually viewed over the shoulder of the character looking into the world as you use your surroundings more.","","The first person and third person have different things to consider, but they do share similar DNA. Mostly through their level of design.","Shooter games are easier to pick due to the similar controller they have from one game to another."]},{"key":"prose","heading":null,"lines":["Role playing games or better known as RPGs, are games centered around the player customizing the","","Character to fulfill a role or fantasy.","","Some games implement elements of RPG in their games. RPG elements in another types of games make a player feel good about the progress they are making."]},{"key":"prose","heading":null,"lines":["Platform the focus of the platform, as the name implies, the platforming is the ability to jump from platform to platform and climb different areas."]}],"features":[],"purpose":[],"scope":[],"techStack":[],"notes":[],"prose":"$23"},"media":{"photos":[],"videos":[]}},{"id":"design-methodology","name":"Design Methodology","month":"Jul","year":2025,"topic":"My Engine","tags":["Thoughts"],"thumbnail":{"url":"https://res.cloudinary.com/ddilbzpki/image/upload/v1753719523/blog_assets/thumbnail-1753719522456.png","isVideo":false},"sections":{"blocks":[{"key":"prose","heading":null,"lines":["Design methodology is the structured process developers follow to turn an idea into a finished game. It defines the steps, order, and workflow that guide a project from concept to launch."]},{"key":"prose","heading":null,"lines":["Waterfall Methodology, This is a linear approach where each stage (design, development, testing, release) must be completed before moving to the next. It provides clear planning and structure but is not flexible if changes are needed later."]},{"key":"prose","heading":null,"lines":["Agile Methodology, Agile is a flexible, iterative approach that focuses on small cycles (sprints). Teams can adjust quickly, test frequently, and refine features over time. It allows for adaptability but may suffer from limited documentation and uneven progress"]},{"key":"prose","heading":null,"lines":["Double Diamond, The Double Diamond model focuses on problem discovery and solution design. It moves through four steps: Discover, Define, Develop, and Deliver. This method helps ensure that the game solves the right problem while encouraging creativity and refinement."]}],"features":[],"purpose":[],"scope":[],"techStack":[],"notes":[],"prose":"Design methodology is the structured process developers follow to turn an idea into a finished game. It defines the steps, order, and workflow that guide a project from concept to launch.\n\nWaterfall Methodology, This is a linear approach where each stage (design, development, testing, release) must be completed before moving to the next. It provides clear planning and structure but is not flexible if changes are needed later.\n\nAgile Methodology, Agile is a flexible, iterative approach that focuses on small cycles (sprints). Teams can adjust quickly, test frequently, and refine features over time. It allows for adaptability but may suffer from limited documentation and uneven progress\n\nDouble Diamond, The Double Diamond model focuses on problem discovery and solution design. It moves through four steps: Discover, Define, Develop, and Deliver. This method helps ensure that the game solves the right problem while encouraging creativity and refinement."},"media":{"photos":[],"videos":[]}}],"certificates":[],"milestones":"$19:props:contents:2:milestones","bcit":{"terms":[{"year":2023,"label":"Winter 2023","program":"Applied Web Development","credits":8,"courses":"$19:props:panelData:0:bcit:terms:0:courses","cumulativeCredits":8,"thisYear":false,"ahead":false},{"year":2023,"label":"Spring/Summer 2023","program":"Computer Systems","credits":7,"courses":"$19:props:panelData:0:bcit:terms:1:courses","cumulativeCredits":15,"thisYear":false,"ahead":false},{"year":2023,"label":"Fall 2023","program":"Computer Systems","credits":6,"courses":"$19:props:panelData:0:bcit:terms:2:courses","cumulativeCredits":21,"thisYear":false,"ahead":false},{"year":2024,"label":"Winter 2024","program":"Computer Systems","credits":7,"courses":"$19:props:panelData:0:bcit:terms:3:courses","cumulativeCredits":28,"thisYear":false,"ahead":false},{"year":2024,"label":"Spring/Summer 2024","program":"Computer Systems","credits":7,"courses":"$19:props:panelData:0:bcit:terms:4:courses","cumulativeCredits":35,"thisYear":false,"ahead":false},{"year":2024,"label":"Fall 2024","program":"Computer Systems","credits":4,"courses":"$19:props:panelData:0:bcit:terms:5:courses","cumulativeCredits":39,"thisYear":false,"ahead":false},{"year":2025,"label":"Winter 2025","program":"Computer Systems","credits":8,"courses":"$19:props:panelData:0:bcit:terms:6:courses","cumulativeCredits":47,"thisYear":true,"ahead":false},{"year":2025,"label":"Spring/Summer 2025","program":"Computer Systems","credits":4,"courses":"$19:props:panelData:0:bcit:terms:7:courses","cumulativeCredits":51,"thisYear":true,"ahead":false},{"year":2025,"label":"Fall 2025","program":"Computer Systems","credits":6,"courses":"$19:props:panelData:0:bcit:terms:8:courses","cumulativeCredits":57,"thisYear":true,"ahead":false},{"year":2026,"label":"Winter 2026","program":"Computer Systems","credits":3,"courses":"$19:props:panelData:0:bcit:terms:9:courses","cumulativeCredits":60,"thisYear":false,"ahead":true}],"totalCredits":60,"transcriptFile":"/bcit/transcript.pdf","credential":"$19:props:panelData:0:bcit:credential","credentialEarned":false}},{"year":2026,"projects":[{"id":"stockvio","name":"Stockvio","status":"done","month":"Apr","year":2026,"category":"SaaS Platform","language":"TypeScript","tools":["Node.js","TypeScript","Next.js","React","Prisma","PostgreSQL","Express","Tailwind CSS","Cloudinary","Railway","Vercel","Flutter","Qt","C++","Git"],"summary":"Stockvio is a full-stack inventory operations platform built for field-service teams. It gives warehouses, technicians, and service vehicles one reliable view of stock, movement, and availability.","repoUrl":"$undefined","liveUrl":"https://inventory-system-q80beqi5w-felipeacts-projects.vercel.app/","architecture":{"id":"stockvio","source":"authored","graph":{"nodes":[{"id":"web","label":"Web app","kind":"client","tech":"Next.js, React, Tailwind CSS"},{"id":"desktop","label":"Desktop app","kind":"client","tech":"Qt 6, C++"},{"id":"mobile","label":"Mobile app","kind":"client","tech":"Flutter, Dart"},{"id":"api","label":"REST API","kind":"service","tech":"Node.js, Express, TypeScript"},{"id":"db","label":"Database","kind":"database","tech":"PostgreSQL, Prisma"},{"id":"media","label":"Media storage","kind":"service","tech":"Cloudinary"},{"id":"vercel","label":"Web hosting","kind":"host","tech":"Vercel"},{"id":"railway","label":"API hosting","kind":"host","tech":"Railway"}],"edges":[["vercel","web"],["railway","api"],["web","api"],["desktop","api"],["mobile","api"],["api","db"],["api","media"]]}}},{"id":"shipping-rate-calculator","name":"Shipping Rate Calculator","status":"done","month":"Aug","year":2026,"category":"CLI Tool","language":"Python","tools":["Python","Git","GitHub"],"summary":"Shipping Rate Calculator is a Python command-line tool that calculates a shipment cost from package weight and a per-kilogram rate.","repoUrl":"https://github.com/Felipeact/shipping-rate-calculator","liveUrl":"$undefined","architecture":{"id":"shipping-rate-calculator","source":"generated","graph":{"nodes":[{"id":"client","label":"Command line","kind":"client","tech":"CLI Tool"}],"edges":[]}}},{"id":"conference-expense-planner","name":"Conference Expense Planner","status":"done","month":"Aug","year":2026,"category":"Web Application","language":"JavaScript","tools":["React","Vite","Redux Toolkit","JavaScript","GitHub Pages","ESLint","Git"],"summary":"Conference Expense Planner is a client-side React application for estimating the cost of a conference or other major event.","repoUrl":"https://github.com/Felipeact/conference_event_planner","liveUrl":"https://felipeact.github.io/conference_event_planner/","architecture":{"id":"conference-expense-planner","source":"generated","graph":{"nodes":[{"id":"client","label":"Browser","kind":"client","tech":"React, Vite, Redux Toolkit"},{"id":"host","label":"Hosting","kind":"host","tech":"GitHub Pages"}],"edges":[["host","client"]]}}},{"id":"plant-shop-cart","name":"Plant Shop Cart","status":"done","month":"Aug","year":2026,"category":"Web Application","language":"JavaScript","tools":["React","Redux Toolkit","Vite","JavaScript","GitHub Pages","Git"],"summary":"Plant Shop Cart is a React and Redux storefront for browsing and buying houseplants, with a product catalog and a fully interactive shopping cart.","repoUrl":"$undefined","liveUrl":"$undefined","architecture":{"id":"plant-shop-cart","source":"generated","graph":{"nodes":[{"id":"client","label":"Browser","kind":"client","tech":"React, Redux Toolkit, Vite"},{"id":"host","label":"Hosting","kind":"host","tech":"GitHub Pages"}],"edges":[["host","client"]]}}},{"id":"book-review-api","name":"Book Review API","status":"done","month":"Aug","year":2026,"category":"REST API","language":"JavaScript","tools":["Node.js","Express","JavaScript","JWT","Axios","Git"],"summary":"Book Review API is an Express.js backend for an online bookshop. It exposes a public catalog for browsing books and protected endpoints that let registered customers write reviews.","repoUrl":"https://github.com/Felipeact/book-review-api","liveUrl":"$undefined","architecture":{"id":"book-review-api","source":"generated","graph":{"nodes":[{"id":"client","label":"API client","kind":"client","tech":"REST API"},{"id":"service-node-js-express","label":"Node.js, Express","kind":"service","tech":"Node.js, Express"}],"edges":[["client","service-node-js-express"]]}}},{"id":"emotion-detection-api","name":"Emotion Detection API","status":"done","month":"Sep","year":2026,"category":"AI Application","language":"Python","tools":["Python","Flask","IBM Watson NLP","Requests","HTML","JavaScript","Bootstrap","unittest","Git"],"summary":"Emotion Detection API is a Flask web application that analyzes English text with the Watson NLP EmotionPredict service and reports the dominant emotion.","repoUrl":"https://github.com/Felipeact/emotion-detection-api","liveUrl":"$undefined","architecture":{"id":"emotion-detection-api","source":"generated","graph":{"nodes":[{"id":"client","label":"Browser","kind":"client","tech":"AI Application"},{"id":"service-flask","label":"Flask","kind":"service","tech":"Flask"},{"id":"ai","label":"AI service","kind":"ai","tech":"Watson NLP, NLP"}],"edges":[["client","service-flask"],["service-flask","ai"]]}}},{"id":"course-rating-app","name":"Course Rating App","status":"done","month":"Sep","year":2026,"category":"Web Application","language":"Python","tools":["Python","Django","SQLite","Bootstrap","Gunicorn","Cloud Foundry","Git"],"summary":"Course Rating App is a Django online-course platform where learners enroll in courses, study lessons, and take graded exams.","repoUrl":"https://github.com/Felipeact/course-rating-app","liveUrl":"$undefined","architecture":{"id":"course-rating-app","source":"generated","graph":{"nodes":[{"id":"client","label":"Browser","kind":"client","tech":"Bootstrap"},{"id":"service-django","label":"Django","kind":"service","tech":"Django"},{"id":"database","label":"Database","kind":"database","tech":"SQLite"}],"edges":[["client","service-django"],["service-django","database"]]}}},{"id":"spendwise","name":"Spendwise","status":"done","month":"Sep","year":2026,"category":"AI Application","language":"TypeScript","tools":["Next.js","React","TypeScript","Tailwind CSS","Lucide","Git"],"summary":"Spendwise is a personal finance dashboard for tracking expenses, reviewing spending trends, and exporting data — built entirely client-side with Next.js 14, TypeScript, and Tailwind CSS, with no backend or account required.","repoUrl":"https://github.com/Felipeact/expense-tracker-ai","liveUrl":"$undefined","architecture":{"id":"spendwise","source":"authored","graph":{"nodes":[{"id":"ai","label":"AI-assisted development","kind":"ai","tech":"AI coding agent"},{"id":"v1","label":"v1 branch","kind":"service","tech":"One-click CSV export"},{"id":"v2","label":"v2 branch","kind":"service","tech":"CSV, JSON, PDF format registry"},{"id":"v3","label":"v3 branch","kind":"service","tech":"Export & Sync hub"},{"id":"review","label":"Code analysis","kind":"service","tech":"code-analysis.md"},{"id":"app","label":"Dashboard","kind":"client","tech":"Next.js 14, React, TypeScript, Tailwind CSS"},{"id":"storage","label":"Local storage","kind":"database","tech":"localStorage, no backend"}],"edges":[["ai","v1"],["ai","v2"],["ai","v3"],["v1","review"],["v2","review"],["v3","review"],["v3","app"],["app","storage"]]}}},{"id":"dealership-website","name":"Dealership Website","status":"done","month":"Sep","year":2026,"category":"Full-Stack Application","language":"$undefined","tools":["Django","React","Node.js","MongoDB","Flask","Express","NLTK","Docker","Python","CSS","Mongoose","Git"],"summary":"Dealership Website is a full-stack car dealership review platform built as a set of services: a Django web app, a React frontend, a Node.js dealer and review API, and a sentiment-analysis microservice.","repoUrl":"https://github.com/Felipeact/dealership-website","liveUrl":"$undefined","architecture":{"id":"dealership-website","source":"authored","graph":{"nodes":[{"id":"frontend","label":"Frontend","kind":"client","tech":"React"},{"id":"web","label":"Web app","kind":"service","tech":"Django"},{"id":"api","label":"Dealer & review API","kind":"service","tech":"Node.js, Express, Mongoose","inDocker":true},{"id":"db","label":"Database","kind":"database","tech":"MongoDB","inDocker":true},{"id":"sentiment","label":"Sentiment analyzer","kind":"ai","tech":"Flask, NLTK"}],"edges":[["frontend","web"],["web","api"],["web","sentiment"],["api","db"]]}}}],"posts":[{"id":"git-and-version-control-foundations","name":"Git and Version Control Foundations","month":"Sep","year":2026,"topic":"Study Notes","tags":["Git","GitHub","Version Control","Software Development"],"thumbnail":{"url":"https://res.cloudinary.com/ddilbzpki/image/upload/v1789161065/projects_assets/git-vs-github_sjgieb.png","isVideo":false},"sections":{"blocks":[{"key":"prose","heading":null,"lines":["## Why version control?","","Version control tracks every change to a codebase over time, so teams can collaborate without overwriting each other's work, recover any previous state, and understand exactly how a project evolved.","","- **Git** is a free, open-source, distributed version control system (DVCS) created by Linus Torvalds in 2005 to manage the Linux kernel's source code.","- **GitHub** hosts Git repositories in the cloud and layers on collaboration features — pull requests, issues, and code review.","- Being *distributed* means every developer has a full copy of the repository's history, not just a pointer to a central server.","","> **Key idea:** Git tracks *snapshots* of your whole project, not just line-by-line diffs — which is what makes branching and merging fast."]},{"key":"prose","heading":null,"lines":["## Core building blocks","","| Concept | What it is |","|---|---|","| Repository | The project's files plus its full Git history |","| Working directory | The files you're actively editing |","| Staging area | Changes queued up for the next commit |","| Commit | A saved snapshot of the project at a point in time |","| Branch | An independent line of development |","| Merge | Combines the changes from one branch into another |","","- A **commit** is identified by a unique hash and records *what* changed, *when*, and *why* (via its message).","- **Branches** let you experiment or build a feature without touching the stable `main` branch.","- **Merging** replays or combines commits from one branch onto another once the work is ready."]},{"key":"prose","heading":null,"lines":["## The everyday workflow","","Most day-to-day Git work comes down to five commands, run in this order:","","```bash","git status # see what's changed","git add # stage a specific file (or `git add .` for everything)","git commit -m \"message\" # snapshot the staged changes","git push origin # publish local commits to a remote","git pull origin main # fetch and merge remote changes into your branch","```","","- `git log` walks back through commit history; `git diff` shows exactly what changed and where.","- `git clone ` creates a full local copy of a remote repository, history included.","- Always pull before you push — it keeps your local branch in sync with your teammates' work."]},{"key":"prose","heading":null,"lines":["## Branching, pull requests, and undoing mistakes","","Non-linear development means a feature can be built in isolation, reviewed, and merged only once it's ready:","","```bash","git switch -c feature/login # create and move to a new branch","# ...make changes, commit them...","git push origin feature/login # push the branch, then open a pull request on GitHub","```","","A **pull request** asks a teammate to review the branch's changes before they're merged into `main` — the point where most code review happens.","","- `git switch ` — move between existing branches","- `git restore ` — discard uncommitted changes to a file","- `git revert ` — safely undo a commit by creating a new, opposite commit (keeps history intact)","- `git rerere` — remembers how you resolved a merge conflict before, and reapplies that resolution automatically the next time it sees the same conflict"]},{"key":"prose","heading":null,"lines":["## Naming releases: semantic versioning","","Version numbers communicate what changed and whether it's safe to upgrade. The most common convention is **semantic versioning** — `MAJOR.MINOR.PATCH`:","","- **Major** (`1.0.0` → `2.0.0`) — breaking changes; existing code may need updates","- **Minor** (`1.0.0` → `1.1.0`) — new, backward-compatible functionality","- **Patch** (`1.0.0` → `1.0.1`) — backward-compatible bug fixes only","","> **Tip:** reading a dependency's version bump before upgrading tells you how much testing you should budget for the change."]}],"features":[],"purpose":[],"scope":[],"techStack":[],"notes":[],"prose":"$24"},"media":{"photos":[],"videos":[]}},{"id":"cloud-computing-foundations-and-service-models","name":"Cloud Computing Foundations and Service Models","month":"Sep","year":2026,"topic":"Study Notes","tags":["Cloud Computing","IaaS","PaaS","SaaS","Architecture"],"thumbnail":{"url":"https://res.cloudinary.com/ddilbzpki/image/upload/v1789161065/projects_assets/cloud_zjf6yl.jpg","isVideo":false},"sections":{"blocks":[{"key":"prose","heading":null,"lines":["## What is cloud computing?","","The National Institute of Standards and Technology (NIST) defines cloud computing as on-demand network access to a shared pool of configurable computing resources — networks, servers, storage, applications, and services — that can be provisioned and released with minimal effort.","","In practice, that means renting compute power instead of buying and maintaining it yourself: you get it quickly, scale it with demand, and pay for what you use."]},{"key":"prose","heading":null,"lines":["## The five essential characteristics","","NIST defines cloud computing by five traits, all of which have to be true at once:","","- **On-demand self-service** — provision resources yourself, without calling a human","- **Broad network access** — reachable from many devices, over standard networks","- **Resource pooling** — the provider's infrastructure is shared across many customers, with resources assigned dynamically regardless of physical location","- **Rapid elasticity** — scale up or down (vertically or horizontally) as demand changes","- **Measured service** — usage is metered, so you pay for what you consume or reserve","","> **Key idea:** if a platform is missing even one of these five, it isn't really \"cloud\" by NIST's definition — it's just outsourced hosting."]},{"key":"prose","heading":null,"lines":["## Four deployment models","","Deployment models describe *where* the infrastructure lives and *who* controls it:","","| Model | Who owns it | Who uses it |","|---|---|---|","| **Public** | The cloud provider (AWS, Azure, GCP, IBM Cloud) | Any customer, multi-tenant |","| **Private** | One organization (or a provider, on their behalf) | A single organization |","| **Community** | Shared by several organizations | Groups with shared compliance/security needs |","| **Hybrid** | Mixed | Connects private and public so workloads move where they're most useful |","","Public cloud trades control for cost savings and elasticity; private cloud trades cost for control and compliance; hybrid tries to get both by connecting the two."]},{"key":"prose","heading":null,"lines":["## Three service models: IaaS, PaaS, SaaS","","The service models differ in exactly where the line falls between what the *provider* manages and what *you* manage:","","| Layer | IaaS | PaaS | SaaS |","|---|---|---|---|","| Application | You | You | Provider |","| Runtime, middleware, OS | You | Provider | Provider |","| Servers, storage, network | Provider | Provider | Provider |","","- **IaaS** (e.g. EC2, Compute Engine) — you get raw compute, storage, and networking, and manage the OS and everything above it yourself.","- **PaaS** (e.g. Elastic Beanstalk, App Engine, Heroku) — the provider also manages the runtime, middleware, and OS, so you can focus purely on application code.","- **SaaS** (e.g. Gmail, Salesforce) — you just use the finished application; the provider manages everything underneath it."]},{"key":"prose","heading":null,"lines":["## Why (and why not) to adopt cloud","","Cloud adoption typically improves **agility**, **availability**, **resilience**, and **time to market** — but it isn't free of tradeoffs:","","- **Data security and sovereignty** — where is data physically stored, and under whose jurisdiction?","- **Compliance** — does the provider meet your industry's regulatory requirements?","- **Provider dependency (vendor lock-in)** — how hard would it be to migrate away later?","- **Governance and cost control** — elastic scaling can just as easily mean an elastic bill","","> **Tip:** choosing a service and deployment model is really about matching how much *control* you need against how much *operational simplicity* you want — you can't maximize both at once."]}],"features":[],"purpose":[],"scope":[],"techStack":[],"notes":[],"prose":"$25"},"media":{"photos":[],"videos":[]}},{"id":"cloud-infrastructure-storage-and-virtualization","name":"Cloud Infrastructure, Storage, and Virtualization","month":"Sep","year":2026,"topic":"Study Notes","tags":["Cloud Infrastructure","Virtualization","Containers","Storage","Networking"],"thumbnail":{"url":"https://res.cloudinary.com/ddilbzpki/image/upload/v1789161065/projects_assets/cloud_zjf6yl.jpg","isVideo":false},"sections":{"blocks":[{"key":"prose","heading":null,"lines":["## Regions and availability zones","","Cloud infrastructure is physically organized in a hierarchy:","","- **Region** — a geographic area where a provider clusters data centers (e.g. \"US East\")","- **Availability zone (AZ)** — one or more isolated data centers within a region, each with its own power, cooling, and networking","- **Data center** — racks, servers, storage, and networking equipment","","Spreading workloads across AZs contains failures (one AZ going down doesn't take others with it) and lets you place resources physically closer to users to cut latency."]},{"key":"prose","heading":null,"lines":["## Compute options","","| Option | Description | Best for |","|---|---|---|","| **Virtual machine** | A hypervisor slices one physical server into many isolated VMs | General-purpose workloads |","| **Bare metal** | A single-tenant, dedicated physical server | Compliance, licensing, max performance |","| **Container** | Packages code + dependencies, shares the host OS kernel | Fast, portable, lightweight deployment |","| **Serverless** | You upload functions; the platform runs, scales, and bills them | Event-driven, spiky workloads |","","A **hypervisor** is what makes VMs possible: **Type 1** (\"bare-metal\") runs directly on the hardware for lower latency and better security (VMware ESXi, Hyper-V, KVM); **Type 2** (\"hosted\") runs on top of a host OS, trading some performance for convenience (VirtualBox, VMware Workstation)."]},{"key":"prose","heading":null,"lines":["## Networking in the cloud","","Cloud networks are built from the same primitives as on-premises networks, just software-defined:","","- **Public interfaces** connect resources to the internet; **private interfaces** connect them to each other, kept off the public internet","- **IP addresses and subnets** carve up the address space assigned to your network","- **Security groups and ACLs** control exactly which traffic is allowed in or out","- **VPCs and VPNs** isolate your resources and extend your private network into the cloud","- **Load balancers and gateways** distribute traffic and manage entry points","","Getting this right is mostly a question of \"who and what can reach this resource\" — the fewer things exposed to the public internet, the smaller the attack surface."]},{"key":"prose","heading":null,"lines":["## Four types of cloud storage","","| Type | How it works | Good for |","|---|---|---|","| **Direct-attached** | Local disk on the same server/rack | OS disks, temporary/ephemeral data |","| **File storage (NFS)** | A shared network filesystem, mountable by many nodes | Shared file access, departmental shares |","| **Block storage** | Data split into addressable blocks, mounted as a volume | Databases, mail servers — anything needing low, consistent latency |","| **Object storage** | Flat storage accessed via API, organized into buckets | Static files, backups, archives, VM images |","","Direct-attached storage is fastest but ephemeral and non-shareable; object storage is the opposite — nearly infinite and cheap, but the slowest to access."]},{"key":"prose","heading":null,"lines":["## Choosing the right storage tier","","A few metrics decide which storage type and tier fits a workload:","","- **IOPS** (input/output operations per second) — higher IOPS means faster reads/writes, but costs more; too low and it becomes a bottleneck","- **Snapshots** — fast, point-in-time backups that only record what changed, though they can't restore a single file in isolation","- **Storage tiers** — standard (frequent access, highest cost per GB), archive/vault (rarely accessed, lowest cost, slower retrieval)","- **CDNs** — cache content geographically closer to users, cutting load times and reducing origin traffic","","> **Tip:** picking a storage tier is really a bet on *how often* the data will be read — bet wrong, and you either overpay for speed you don't need or wait hours to retrieve something urgent."]}],"features":[],"purpose":[],"scope":[],"techStack":[],"notes":[],"prose":"$26"},"media":{"photos":[],"videos":[]}},{"id":"devops-cloud-delivery-and-security-fundamentals","name":"DevOps, Cloud Delivery, and Security Fundamentals","month":"Sep","year":2026,"topic":"Study Notes","tags":["DevOps","CI/CD","Cloud Security","Automation","Reliability"],"thumbnail":{"url":"https://res.cloudinary.com/ddilbzpki/image/upload/v1789161065/projects_assets/cloud_zjf6yl.jpg","isVideo":false},"sections":{"blocks":[{"key":"prose","heading":null,"lines":["## What DevOps actually means","","DevOps is a collaborative culture — not a tool — that connects development, operations, QA, and business stakeholders around one goal: shorten the feedback loop between writing code and learning how it performs in production.","","- Shared ownership of the whole delivery pipeline, not \"throw it over the wall\" handoffs","- Heavy automation of builds, tests, and deployments","- Continuous measurement of what's actually happening in production","- A steady stream of small, low-risk improvements instead of rare, high-risk releases"]},{"key":"prose","heading":null,"lines":["## The delivery pipeline","","```","commit -> CI (build + test) -> CD (package for release) -> Deploy -> Monitor","```","","- **Continuous Integration (CI)** — merge code changes frequently and run automated tests immediately, so integration problems surface within minutes, not weeks","- **Continuous Delivery (CD)** — keep every passing build in a releasable state at all times","- **Continuous Deployment** — go one step further and automatically ship every build that passes its checks straight to production","- **Continuous Monitoring** — real-time visibility into how the app and infrastructure are actually behaving, closing the feedback loop back to development"]},{"key":"prose","heading":null,"lines":["## Why cloud and DevOps pair so well","","Cloud platforms remove most of the friction DevOps is trying to eliminate:","","- **Rapid provisioning** — spin up a production-like test environment in minutes, not weeks","- **Elastic resources** — scale infrastructure to match pipeline load instead of over-provisioning for peak demand","- **Managed CI/CD services** — automated build, test, and deploy pipelines with no servers to babysit","- **Pay-as-you-go pricing** — cost tracks actual usage instead of fixed capacity","","Centralized repositories and shared pipelines also make it much easier for distributed teams to collaborate consistently."]},{"key":"prose","heading":null,"lines":["## Security is a shared responsibility","","Cloud security splits cleanly between provider and customer:","","| The provider secures | You secure |","|---|---|","| Physical data centers | Your identities and access policies |","| Host infrastructure | Your configuration choices |","| The virtualization layer | Your data and applications |","","Core controls on your side of that line: encryption at rest and in transit, least-privilege access management, visibility into what you've deployed, secure default configuration, regular compliance review, and a tested backup and disaster-recovery plan."]},{"key":"prose","heading":null,"lines":["## Common cloud risks","","- **External attacks** and **DDoS**","- **Insider threats** — harder to catch than external ones, since the access is already legitimate","- **Data loss** and **misconfiguration** — still the single most common cause of cloud breaches","- **Shadow IT** — unsanctioned services outside IT's visibility","- **Multi-tenant exposure** and **provider dependency**","","> **Tip:** the single highest-leverage fix for most of this list isn't a new security tool — it's least-privilege access control plus audit logging, since it limits *and* reveals almost every other risk on the list."]}],"features":[],"purpose":[],"scope":[],"techStack":[],"notes":[],"prose":"$27"},"media":{"photos":[],"videos":[]}},{"id":"the-sdlc-requirements-testing-and-documentation","name":"The SDLC: Requirements, Testing, and Documentation","month":"Sep","year":2026,"topic":"Study Notes","tags":["SDLC","Requirements","Software Testing","Documentation","Agile"],"thumbnail":{"url":"https://res.cloudinary.com/ddilbzpki/image/upload/v1789161562/projects_assets/SDLC_xsegs9.png","isVideo":false},"sections":{"blocks":[{"key":"prose","heading":null,"lines":["## The software development lifecycle","","The SDLC is a systematic process for building software that actually meets its requirements, broken into distinct phases:","","```","Planning -> Design -> Development -> Testing -> Deployment -> Maintenance","```","","Working through explicit phases (instead of ad hoc) gives every team member a clear answer to \"what should I be doing right now,\" surfaces problems earlier when they're cheaper to fix, and keeps responsibilities from overlapping or falling through the cracks."]},{"key":"prose","heading":null,"lines":["## Planning and the SRS","","Planning gathers, analyzes, documents, and prioritizes requirements while estimating cost, staffing, and time.","","- A **Software Requirements Specification (SRS)** records everything stakeholders must agree on: scope, assumptions, dependencies, interfaces, and both functional and non-functional requirements.","- A **prototype** is a small, throwaway mock-up used to validate an idea or clarify a requirement *before* committing to full implementation — cheap to build, cheap to discard.","","> **Tip:** a disagreement about requirements is far cheaper to resolve in the SRS than after code has already been written against the wrong assumption."]},{"key":"prose","heading":null,"lines":["## Gathering good requirements","","- **Identify stakeholders** — decision makers, end users, admins, engineering, sales, support","- **Set goals and objectives** — goals are broad and long-term; objectives are the specific, measurable steps that reach them","- **Elicit requirements** — interviews, surveys, questionnaires","- **Document, then analyze** — check for consistency, clarity, and completeness","- **Prioritize** — must-have, highly desired, nice-to-have","","Three levels of requirements documentation, from broadest to narrowest: **SysRS** (the whole system — interfaces, performance, security, acceptance criteria), **SRS** (the software's behavior), and **URS** (user stories: who needs what, and why)."]},{"key":"prose","heading":null,"lines":["## Development methodologies and testing","","| Model | Style | Strength | Weakness |","|---|---|---|---|","| **Waterfall** | Sequential | Clear stages, easy to budget | Inflexible to change |","| **V-Shape** | Sequential | Test plans built up front | Rigid, hard to accommodate new requirements |","| **Agile** | Iterative | Embraces changing requirements | Harder to budget and scope up front |","","Testing verifies the code matches requirements and is free of defects, typically across four layers:","","- **Unit** — one function or component in isolation","- **Integration** — do the pieces work together?","- **System** — the whole application, end to end","- **Acceptance (UAT)** — does it satisfy the actual business need?","","Bugs get reported, tracked, fixed, and retested until the release is stable — a loop, not a single step."]},{"key":"prose","heading":null,"lines":["## Releasing and maintaining software","","Software typically ships through three stages of increasing confidence: **alpha** (a preview for select stakeholders, may still change), **beta** (broader testing against real requirements), and **general availability** (stable, for everyone).","","After deployment, **maintenance** handles bug fixes, UI issues, and requirements that only became clear once real users started using the product.","","Two kinds of documentation carry a project past its first release:","","- **System documentation** — READMEs, inline comments, architecture and design docs, maintenance guides","- **User documentation** — guides, manuals, and in-app help","","> **Key idea:** documentation isn't a deliverable you write once at the end — it's what lets someone other than you (including future you) safely change the system later."]}],"features":[],"purpose":[],"scope":[],"techStack":[],"notes":[],"prose":"$28"},"media":{"photos":[],"videos":[]}},{"id":"python-foundations-types-strings-and-collections","name":"Python Foundations: Types, Strings, and Collections","month":"Sep","year":2026,"topic":"Study Notes","tags":["Python","Programming Basics","Data Types","Strings","Collections"],"thumbnail":{"url":"https://res.cloudinary.com/ddilbzpki/image/upload/v1789161561/projects_assets/PYTHON_rj13tg.webp","isVideo":false},"sections":{"blocks":[{"key":"prose","heading":null,"lines":["## The building blocks","","Python is a readable, general-purpose language used for web apps, automation, data analysis, and AI. Every program starts with the same fundamentals: variables, expressions, operators, and a handful of built-in types.","","```python","x = 7 # int","y = 12.4 # float","name = \"John\" # str","is_valid = True # bool","","print(type(x)) # ","```","","- **Variables** are created the moment you assign them — no separate declaration needed.","- `type()` reveals a value's data type at runtime, which is useful when debugging unexpected behavior.","- `#` starts a comment; Python ignores everything after it on that line."]},{"key":"prose","heading":null,"lines":["## Operators and decisions","","Arithmetic operators work as you'd expect, with two Python-specific additions — floor division and modulo:","","```python","x, y = 9, 4","x + y # 13 addition","x - y # 5 subtraction","x * y # 36 multiplication","x / y # 2.25 division (always returns a float)","x // y # 2 floor division (integer quotient)","x % y # 1 modulo (remainder)","```","","- Comparison operators (`==`, `!=`, `<`, `>=`, ...) evaluate to a boolean and drive `if`/`while` logic.","- Clear, well-named comments explain *why* code exists — they should never restate *what* the next line obviously does."]},{"key":"prose","heading":null,"lines":["## Working with strings","","Strings are sequences of characters, so they support indexing and slicing just like lists:","","```python","s = \"Hello\"","s[0] # 'H' indexing","s[1:4] # 'ell' slicing","len(s) # 5 length","s.upper() # 'HELLO'","s.lower() # 'hello'","s.replace(\"Hello\", \"Hi\") # 'Hi'","s.split(\"l\") # ['He', '', 'o']","\" hi \".strip() # 'hi'","\"Hello\" + \" \" + \"World\" # concatenation -> 'Hello World'","```","","- Indexing pulls out **one** character; slicing (`start:end`) pulls out a **range**.","- Strings are immutable — every method above *returns a new string* rather than modifying the original."]},{"key":"prose","heading":null,"lines":["## Dictionaries and sets","","**Dictionaries** store unique keys mapped to values — ideal for named, structured data:","","```python","person = {\"name\": \"Ada\", \"role\": \"Engineer\"}","person[\"role\"] # 'Engineer'","person[\"team\"] = \"Core\" # add a new key","del person[\"role\"] # remove a key","person.keys() # dict_keys(['name', 'team'])","person.values() # dict_values(['Ada', 'Core'])","person.items() # dict_items([('name', 'Ada'), ('team', 'Core')])","```","","**Sets** store unique, unordered elements and support classic set math:","","```python","a = {1, 2, 3}","b = {2, 3, 4}","a | b # union -> {1, 2, 3, 4}","a & b # intersection -> {2, 3}","a - b # difference -> {1}","a.issubset(b) # False","```"]},{"key":"prose","heading":null,"lines":["## Reading errors, writing better code","","Python surfaces mistakes as errors with a traceback pointing at the offending line — reading that message carefully is the fastest way to fix it:","","```python",">>> 1 + \"1\"","TypeError: unsupported operand type(s) for +: 'int' and 'str'","```","","- Favor small functions with descriptive names over large, do-everything blocks.","- Comment the *why*, not the *what* — the code already says what it does.","- Experiment often: a Python REPL is the fastest way to confirm how a function behaves before using it in a larger program.","","> **Tip:** `TypeError`, `NameError`, and `IndexError` are the three most common beginner errors — they almost always mean a value's type, name, or position wasn't what the code expected."]}],"features":[],"purpose":[],"scope":[],"techStack":[],"notes":[],"prose":"$29"},"media":{"photos":[],"videos":[]}},{"id":"node-js-express-and-rest-api-foundations","name":"Node.js, Express, and REST API Foundations","month":"Sep","year":2026,"topic":"Study Notes","tags":["Node.js","Express","JavaScript","REST API","Middleware","JWT","npm","Async"],"thumbnail":{"url":"https://res.cloudinary.com/ddilbzpki/image/upload/v1789161065/projects_assets/node_lsr9et.jpg","isVideo":false},"sections":{"blocks":[{"key":"prose","heading":null,"lines":["## What \"back end\" means","","Back-end developers write the code that connects the browser to servers, databases, and business logic. A typical back end is built from several pieces working together:","","- **Database servers** — house, retrieve, and deliver data","- **Application servers** — sit between the database and the web server, running business logic and turning raw data into content","- **Web servers** — serve content and route requests to clients","- **Web APIs** — define how two pieces of software talk to each other (a *web service* is a Web API that uses HTTP)","","**Node.js** is a JavaScript runtime built on Chrome's V8 engine that lets JavaScript run *outside* the browser, on the server. It's single-threaded but handles I/O through non-blocking events and callbacks — which is exactly why it scales well for concurrent, I/O-heavy servers. It's used in production at Uber, LinkedIn, PayPal, and eBay.","","**Express** is a minimal, configurable framework that runs on top of Node.js, abstracting away its lower-level HTTP APIs with clean routing and middleware.","","A back end has to account for **load** (concurrent users and transactions), **scalability** (handling more load without degrading), **security** (authentication, malware prevention), and **performance**."]},{"key":"prose","heading":null,"lines":["## Modules, packages, and npm","","Every JavaScript file in Node is a **module** — a self-contained, reusable unit of code. A **package** is a directory of one or more modules described by a `package.json` file.","","```js","// math.js — expose functions from a module","exports.add = (a, b) => a + b;","","// app.js — consume it","const math = require('./math');","math.add(2, 3); // 5","```","","`require()` and `import` both load modules, but they aren't the same:","","| | `require()` (CommonJS) | `import` (ES Modules) |","|---|---|---|","| Position | Anywhere in the file | Top of the file only |","| Binding | Dynamic | Static |","| Loading | Synchronous | Asynchronous |","","- Modules come in three flavors: **core** (built into Node), **local** (your own code), and **third-party** (installed via npm).","- `npm install ` installs **locally** by default — only that project can use it. A **global** install (`-g`) makes it available machine-wide, which can quietly break version compatibility across projects."]},{"key":"prose","heading":null,"lines":["## Async programming: callbacks, promises, async/await","","Node runs network operations **non-blocking**: a call returns immediately, and a callback fires once the result is ready — so the server is never stuck waiting.","","```js","// error-first callback convention","fs.readFile('data.json', (err, data) => {"," if (err) return console.error(err);"," console.log(data);","});","```","","Deeply nested callbacks (\"callback hell\") are hard to read, so modern code prefers **Promises** and `async`/`await`:","","```js","async function getUser(id) {"," const res = await axios.get(`/api/users/${id}`); // pauses until resolved"," return res.data;","}","```","","A Promise is always in one of three states — **pending**, **fulfilled**, or **rejected** — and `async` functions always return one, even if you never write `new Promise(...)` yourself.","","- `JSON.parse()` turns a JSON string into a JS object; `JSON.stringify()` does the reverse.","- **Axios** is a promise-based HTTP client that wraps this pattern for REST calls, on both the browser and Node."]},{"key":"prose","heading":null,"lines":["## Express: routing, middleware, and auth","","A **route** pairs an HTTP method and a URL path with a handler function:","","```js","const express = require('express');","const app = express();","","app.get('/users/:id', (req, res) => {"," res.json({ id: req.params.id, name: 'Ada' });","});","","app.listen(3000);","```","","**Middleware** are functions with access to `req`, `res`, and `next` — they run in a chain, and each one can respond, transform the request, or hand off to the next middleware. Express uses them for parsing JSON bodies, authentication, logging, and error handling.","","```js","app.use((req, res, next) => {"," console.log(`${req.method} ${req.path}`);"," next(); // pass control to the next handler","});","```","","Three common authentication strategies:","","- **Session-based** — credentials are checked once; the server stores a session ID that's echoed back in a cookie on every request.","- **Token-based (JWT)** — the client receives a signed token (header, payload, signature) and sends it with each request as proof of identity; scales better than sessions since the server stores nothing.","- **Passwordless** — biometrics, magic links, or one-time codes, backed by public/private key encryption."]},{"key":"prose","heading":null,"lines":["## Designing a REST API","","Every HTTP response carries a status code that tells the client what happened:","","| Range | Meaning |","|---|---|","| 200–299 | Success |","| 300–399 | Resource moved |","| 400–499 | Client error |","| 500–599 | Server error |","","The core HTTP methods map cleanly onto CRUD:","","```","GET /users # list","GET /users/123 # read one","POST /users # create -> 201","PUT /users/123 # update/replace -> 200 or 404","DELETE /users/123 # delete -> 204","```","","`PUT` and `DELETE` are **idempotent** — calling them repeatedly has the same effect as calling them once; `POST` is not.","","Good REST URLs:","","- Use **nouns**, not verbs — `/users`, not `/getUsers`","- Use plural nouns for collections — `/users/123`, not `/user/123`","- Use lowercase and hyphens, never camelCase or underscores","- Never end in a trailing slash","","> **Anti-pattern:** `GET /getUser/123` and `POST /addUser` bake the *verb* into the URL — the RESTful versions are `GET /users/123` and `POST /users`, since the HTTP method already says what's happening."]}],"features":[],"purpose":[],"scope":[],"techStack":[],"notes":[],"prose":"$2a"},"media":{"photos":[],"videos":[]}},{"id":"react-components-hooks-testing-and-state","name":"React Components, Hooks, Testing, and State","month":"Sep","year":2026,"topic":"Study Notes","tags":["React","JavaScript","Hooks","Testing","Redux Toolkit"],"thumbnail":{"url":"https://res.cloudinary.com/ddilbzpki/image/upload/v1789161065/projects_assets/reactt_sokuji.png","isVideo":false},"sections":{"blocks":[{"key":"prose","heading":null,"lines":["## Why React","","React is an open-source JavaScript library — not a full framework — for building interactive UIs out of small, reusable pieces called **components**.","","- **Component-based** — the UI is a tree of independent, composable pieces","- **Declarative** — you describe *what* the UI should look like for a given state, and React figures out *how* to update the DOM","- **JSX** — an HTML-like syntax extension that compiles down to plain JavaScript function calls","- **One-way data flow** — data moves down from parent to child through props, which keeps state predictable","- **Hooks** — let function components manage state and side effects without ever writing a class"]},{"key":"prose","heading":null,"lines":["## Components, props, and state","","```jsx","function Greeting({ name }) { // props are read-only inputs"," const [count, setCount] = useState(0); // state can change over time",""," return (","

","

Hello, {name}!

"," ","

"," );","}","```","","- **Props** are passed down from a parent and are read-only — a child can never modify its own props.","- **State** belongs to a component and changing it (via its setter) triggers a re-render.","- **Local state** lives in one component; **shared state** is lifted up to a common parent (or a store) so multiple components can coordinate."]},{"key":"prose","heading":null,"lines":["## Hooks and the component lifecycle","","Function components don't have lifecycle methods, but hooks cover the same needs:","","```jsx","useEffect(() => {"," const controller = new AbortController();"," fetch('/api/data', { signal: controller.signal })"," .then(res => res.json())"," .then(setData);",""," return () => controller.abort(); // cleanup on unmount","}, []); // empty array -> run once, on mount","```","","- **Mounting** — the component initializes, sets up state, and runs any one-time side effects","- **Updating** — a state or prop change re-runs the function body and re-evaluates the JSX","- **Unmounting** — cleanup functions returned from `useEffect` run here (cancel subscriptions, timers, requests)","","`useState` manages local state, `useEffect` handles side effects, and `useReducer` steps in when state transitions get complex enough that a single `setState` call isn't enough."]},{"key":"prose","heading":null,"lines":["## Project structure and styling","","Modern React projects are commonly scaffolded with **Vite**, which is faster than the older Create React App because it serves source files directly over native ES modules instead of bundling everything up front:","","```bash","npm create vite@latest my-app -- --template react","```","","```","my-app/","├─ public/ # static assets","├─ src/","│ ├─ main.jsx # entry point","│ └─ App.jsx # root component","├─ package.json","└─ vite.config.js","```","","Styling options range from simple to structured:","","- **Inline styles** — a JS object passed to `style={{ ... }}`","- **CSS Modules** — `Component.module.css`, scoped automatically to that component","- **Styled-components / CSS-in-JS** — styles defined alongside the component, with full access to props"]},{"key":"prose","heading":null,"lines":["## Testing and app-wide state","","Modern React tests focus on **user-visible behavior**, not implementation details — because concurrent rendering means updates aren't always synchronous:","","```jsx","test('increments the counter on click', async () => {"," render();"," await userEvent.click(screen.getByRole('button'));"," expect(await screen.findByText('Clicked 1 times')).toBeInTheDocument();","});","```","","- Prefer `findBy*` queries and `waitFor` over asserting on the DOM immediately after an interaction.","- Simulate real interactions (clicks, typing, network responses) rather than calling internal methods directly.","","For state shared across many components, **Redux Toolkit** cuts the boilerplate of classic Redux:","","```js","const counterSlice = createSlice({"," name: 'counter',"," initialState: { value: 0 },"," reducers: { increment: (state) => { state.value += 1 } },","});","","const store = configureStore({ reducer: counterSlice.reducer });","```","","> **Tip:** `createSlice()` lets you \"mutate\" state directly inside a reducer — Redux Toolkit uses Immer under the hood to turn that into a safe, immutable update."]}],"features":[],"purpose":[],"scope":[],"techStack":[],"notes":[],"prose":"$2b"},"media":{"photos":[],"videos":[]}},{"id":"microservices-rest-apis-and-serverless-computing","name":"Microservices, REST APIs, and Serverless Computing","month":"Sep","year":2026,"topic":"Study Notes","tags":["Microservices","Serverless","REST","API Gateway","GraphQL","Twelve-Factor","FaaS","Flask"],"thumbnail":{"url":"https://res.cloudinary.com/ddilbzpki/image/upload/v1790010013/microservices_d2dtmp.jpg","isVideo":false},"sections":{"blocks":[{"key":"prose","heading":null,"lines":["## The Twelve-Factor App","","Modern software is delivered as a service — centrally hosted, accessed over the internet — and the **Twelve-Factor App** methodology captures the practices that suit this model, especially for microservices. Its factors group into three phases:","","**Code**","- One codebase, tracked in version control, deployed many times","- Build → release → run as three strictly separate stages","- Keep dev and prod environments as similar as possible","","**Deploy**","- Treat every dependency as explicit","- Keep anything that varies between environments in config, not code","- Access local and third-party services uniformly, by URL and credentials","- Keep processes stateless and share-nothing","- Export functionality by binding to a port","","**Operate**","- Scale via disposable, concurrent, stateless processes","- Treat logs as an event stream, captured by the runtime","- Run one-off admin tasks against a release, using the same codebase and config"]},{"key":"prose","heading":null,"lines":["## Microservices vs. monolith vs. SOA","","A **microservice** architecture builds one application from many small, independently deployable services, each owning a single business responsibility and its own technology stack.","","| | Monolith | SOA | Microservices |","|---|---|---|---|","| Structure | One process, internal layers | Provider/consumer services | Loosely coupled, independent components |","| Strength | Simple to build | Reliable, parallel development | Scale and evolve independently |","| Weakness | Complexity grows with size | Complex, expensive design | Larger security surface, harder debugging |","","Because microservices don't share interdependencies, teams can update, scale, and adopt new technology in one service without touching the others."]},{"key":"prose","heading":null,"lines":["## Patterns, REST, and API gateways","","Common patterns for structuring microservices:","","- **SPA** — one interface that updates dynamically via REST, instead of reloading","- **Backend for Frontend (BFF)** — one backend per UI type, tailored per channel","- **Strangler** — replace a monolith's domains with microservices in stages, old and new running side by side","- **Service Discovery** — lets services find each other as instances change","","REST maps cleanly onto CRUD:","","```","POST -> Create","GET -> Read","PUT -> Update","DELETE -> Delete","```","","An **API Gateway** sits between clients and this collection of backend services as a single point of contact — protecting, analyzing, and monetizing APIs, at the cost of an extra network hop and a potential single point of failure."]},{"key":"prose","heading":null,"lines":["## Building and testing APIs","","```bash","curl -X GET 'http://127.0.0.1:5000/products' -H 'accept: application/json'","```","","- **cURL** — a command-line tool for transferring data with URLs; great for quick endpoint tests and debugging","- **Postman** — a full API platform with a GUI, built for team collaboration across the whole API lifecycle","- **Swagger / OpenAPI** — a standard, language-agnostic way to describe a REST API's operations, inputs, and auth requirements, and generate an interactive UI from it (`pip install flask-swagger-ui` in Flask)","- **GraphQL** — lets clients fetch exactly the fields they need through one endpoint, avoiding REST's over- and under-fetching:","","```graphql","query {"," user(id: \"1\") {"," name"," email"," }","}","```"]},{"key":"prose","heading":null,"lines":["## Serverless computing","","The CNCF defines **serverless** as building and running applications without managing servers: code ships as functions, uploaded to a platform, and executed, scaled, and billed purely on demand — effectively **FaaS** (Functions as a Service) plus **BaaS** (Backend as a Service).","","- Hostless, elastic, stateless, event-driven, billed by usage","- Pros: lower cost, faster development, built-in high availability","- Cons: cold starts, vendor lock-in, harder monitoring and debugging, poor fit for long-running processes","","> **Best practice:** give each function exactly one responsibility, keep it small and lightweight so it loads fast, avoid chaining many functions together, and limit third-party dependencies — all four directly reduce cold-start time and cost."]}],"features":[],"purpose":[],"scope":[],"techStack":[],"notes":[],"prose":"$2c"},"media":{"photos":[],"videos":[]}},{"id":"django-sql-and-relational-vs-nosql-databases","name":"Django, SQL, and Relational vs. NoSQL Databases","month":"Sep","year":2026,"topic":"Study Notes","tags":["Django","SQL","Databases","NoSQL","ORM"],"thumbnail":{"url":"https://res.cloudinary.com/ddilbzpki/image/upload/v1790009803/SQL-Vs-NoSQL1_sokqzn.png","isVideo":false},"sections":{"blocks":[{"key":"prose","heading":null,"lines":["## Databases and DBMSs","","A **database** is an organized collection of data designed for structured storage, search, and retrieval. A **database management system (DBMS)** is the software that creates, maintains, and queries it.","","Choosing a database comes down to a handful of questions:","","- What shape is the data — rigid rows and columns, or something more flexible?","- How will it be queried, and how fast does that query need to return?","- What transaction speed and volume does the workload demand?","","Databases split into two broad families: **relational**, which store data in linked tables with a fixed schema, and **non-relational (NoSQL)**, which trade rigid structure for schema flexibility and horizontal scale."]},{"key":"prose","heading":null,"lines":["## Relational vs. NoSQL","","| | Relational (SQL) | NoSQL |","|---|---|---|","| Schema | Fixed, defined up front | Flexible, schema-less |","| Query language | SQL | Varies by database |","| Scaling | Mostly vertical | Horizontal, built for it |","| Consistency | ACID-compliant | Often eventually consistent |","| Good for | Transactions, structured data | Big data, rapid iteration |","","Relational engines range from open-source (MySQL, PostgreSQL) to commercial (Oracle, SQL Server, IBM Db2), and shine at OLTP workloads, data warehousing, and anywhere accuracy matters more than raw scale.","","NoSQL splits into four common models:","","- **Key-value** (Redis, DynamoDB) — sessions, caching, real-time recommendations","- **Document** (MongoDB, CouchDB) — flexible records for e-commerce, CRM, medical data","- **Column-family** (Cassandra, HBase) — heavy write loads, time-series and IoT data","- **Graph** (Neo4j) — modeling connections: social networks, fraud detection, recommendations"]},{"key":"prose","heading":null,"lines":["## SQL fundamentals","","Reading data:","","```sql","SELECT column1, column2","FROM table_name","WHERE condition","ORDER BY column1 DESC;","","SELECT column1, COUNT(*)","FROM table_name","GROUP BY column1","HAVING COUNT(*) > 1;","```","","Combining tables:","","```sql","SELECT o.id, c.name","FROM orders o","INNER JOIN customers c ON o.customer_id = c.id;","```","","`INNER JOIN` keeps only matching rows; `LEFT`/`RIGHT JOIN` also keep unmatched rows from one side; `FULL JOIN` keeps everything from both.","","Changing data:","","```sql","INSERT INTO users (name, email) VALUES ('Ada', 'ada@example.com');","UPDATE users SET email = 'new@example.com' WHERE id = 1;","DELETE FROM users WHERE id = 1;","```","","Changing structure (DDL):","","```sql","CREATE TABLE users (id SERIAL PRIMARY KEY, name TEXT, email TEXT);","ALTER TABLE users ADD COLUMN active BOOLEAN DEFAULT true;","DROP TABLE users;","```"]},{"key":"prose","heading":null,"lines":["## Django: the batteries-included framework","","Django is an open-source Python web framework built around **Model-View-Template (MVT)**:","","- **Model** — defines data and business logic, mapped directly onto database tables","- **View** — decides *what* data to present","- **Template** — renders it as HTML, keeping presentation separate from logic","","Its ORM lets you talk to the database without writing raw SQL:","","```python","class Article(models.Model):"," title = models.CharField(max_length=200)"," published = models.BooleanField(default=False)","","Article.objects.create(title=\"Hello World\") # create","Article.objects.filter(published=True) # read","Article.objects.get(id=1).save() # update","Article.objects.get(id=1).delete() # delete","```","","Out of the box, Django also ships an auto-generated admin interface, session-based authentication and permissions, a built-in test runner, and defenses against XSS, CSRF, and SQL injection."]},{"key":"prose","heading":null,"lines":["## Deploying a Django app","","Django's own `runserver` command is for local development only — production deployments front the app with a **WSGI** or **ASGI**-compliant server behind Apache or Nginx.","","```bash","pip install gunicorn","gunicorn myproject.wsgi:application","```","","From there, teams typically pick one of three paths:","","- A manually configured **virtual machine** — full control, full responsibility","- A **platform-as-a-service** like Heroku — push to a git repo and it handles the rest","- A **Docker container**, run at scale with an orchestrator like Kubernetes","","Django is database-agnostic — PostgreSQL, MySQL, MariaDB, Oracle, and SQLite are all supported, so the choice comes down to durability, scale, and hosting needs rather than framework compatibility."]}],"features":[],"purpose":[],"scope":[],"techStack":[],"notes":[],"prose":"$2d"},"media":{"photos":[],"videos":[]}},{"id":"containers-docker-and-kubernetes-fundamentals","name":"Containers, Docker, and Kubernetes Fundamentals","month":"Sep","year":2026,"topic":"Study Notes","tags":["Docker","Kubernetes","Containers","Orchestration","DevOps"],"thumbnail":{"url":"https://res.cloudinary.com/ddilbzpki/image/upload/v1790009803/docker_bsoaki.jpg","isVideo":false},"sections":{"blocks":[{"key":"prose","heading":null,"lines":["## What containers are, and why Docker won","","A **container** packages application code with every library and dependency it needs, so it runs unchanged from a laptop to production — whether the host is bare metal, a VM, or the cloud.","","- Faster deployment through automation, lower cost, better resource utilization","- Portable across environments, and a natural fit for microservices","- Downsides: a compromised host OS affects every container on it, and managing thousands of them adds real operational complexity","","| Platform | Known for |","|---|---|","| **Docker** | Most widely adopted, simple architecture |","| **Podman** | Daemon-less, more secure by design |","| **LXC** | Preferred for data-intensive workloads |","| **Vagrant** | Maximum isolation on a single machine |"]},{"key":"prose","heading":null,"lines":["## Docker architecture","","Docker follows a client-server model: the **Docker client** sends commands over the CLI or REST API to a host running the **Docker daemon** (`dockerd`), which builds, runs, and distributes containers, pulling and pushing images from a **registry** like Docker Hub.","","```dockerfile","FROM node:20-slim","WORKDIR /app","COPY package*.json ./","RUN npm install","COPY . .","EXPOSE 3000","CMD [\"node\", \"server.js\"]","```","","Each instruction becomes a read-only image layer; `docker build` packages them into a tagged image, and `docker run` starts a writable container from it:","","```bash","docker build -t my-app:v1 .","docker run -p 3000:3000 my-app:v1","docker ps # list running containers","docker images # list local images","```"]},{"key":"prose","heading":null,"lines":["## From containers to orchestration","","Once you're running more than a handful of containers, container **orchestration** automates their lifecycle — deployment, networking, scaling, and availability — instead of leaving it to scripts.","","| Tool | Notes |","|---|---|","| Marathon | Open-source cluster manager |","| Nomad | Lightweight, supports many workload types |","| Docker Swarm | Built into Docker, simplest to adopt |","| **Kubernetes** | The de facto standard |","","**Kubernetes (k8s)**, originally built by Google and now maintained by the CNCF, manages containerized applications *declaratively*: you describe the desired state, and Kubernetes continuously works to make reality match it — automated rollouts and rollbacks, storage orchestration, and horizontal scaling based on real metrics."]},{"key":"prose","heading":null,"lines":["## Kubernetes objects and kubectl","","Every Kubernetes object has a **spec** (what you want) and a **status** (what's actually happening):","","| Object | Role |","|---|---|","| **Pod** | The smallest unit — one or more tightly coupled containers |","| **ReplicaSet** | Keeps a set number of identical Pods running |","| **Deployment** | Manages rollouts and updates on top of ReplicaSets |","| **Namespace** | Isolates groups of resources within a cluster |","","```yaml","apiVersion: apps/v1","kind: Deployment","metadata:"," name: my-app","spec:"," replicas: 3"," selector:"," matchLabels: { app: my-app }"," template:"," metadata:"," labels: { app: my-app }"," spec:"," containers:"," - name: my-app"," image: my-app:v1"," ports: [{ containerPort: 3000 }]","```","","```bash","kubectl apply -f deployment.yml","kubectl get pods","kubectl describe deployment my-app","kubectl scale deployment my-app --replicas=5","```"]},{"key":"prose","heading":null,"lines":["## Configuration, secrets, and self-healing","","Apps get their configuration and sensitive data through dedicated objects:","","```bash","kubectl create configmap app-config --from-literal=timeout=5000","kubectl create secret generic app-secret --from-literal=password=hunter2","```","","A **Service** or **Ingress** then exposes a set of Pods to other workloads or external traffic. Underneath it all, the control plane relies on **etcd** as the cluster's source of truth, the **kube-scheduler** to place new Pods, and the **kubelet** on every node to keep containers running and healthy.","","> **Key idea:** this is what gives Kubernetes its defining trait — **self-healing**. It doesn't just run your containers; it continuously restarts, reschedules, or replaces them so the cluster's actual state always converges back to what you declared."]}],"features":[],"purpose":[],"scope":[],"techStack":[],"notes":[],"prose":"$2e"},"media":{"photos":[],"videos":[]}}],"certificates":[{"id":"ibm-ai-apps-python-flask","name":"Developing AI Applications with Python and Flask","issuer":"IBM","month":"Sep","year":2026,"file":"/certificates/Coursera XH218W84PGOA.pdf","verifyUrl":"https://coursera.org/verify/XH218W84PGOA"},{"id":"ibm-django-sql-databases","name":"Django Application Development with SQL and Databases","issuer":"IBM","month":"Sep","year":2026,"file":"/certificates/Coursera NT63N7EB6ZSN.pdf","verifyUrl":"https://coursera.org/verify/NT63N7EB6ZSN"},{"id":"ibm-containers-docker-kubernetes","name":"Introduction to Containers w/ Docker, Kubernetes & OpenShift","issuer":"IBM","month":"Sep","year":2026,"file":"/certificates/Coursera 4WHAJTHXASGT.pdf","verifyUrl":"https://coursera.org/verify/4WHAJTHXASGT"},{"id":"vanderbilt-claude-code","name":"Claude Code: Software Engineering with Generative AI Agents","issuer":"Vanderbilt University","month":"Sep","year":2026,"file":"/certificates/Coursera BLRWAB68TL3H.pdf","verifyUrl":"https://coursera.org/verify/BLRWAB68TL3H"},{"id":"ibm-microservices-serverless","name":"Application Development using Microservices and Serverless","issuer":"IBM","month":"Sep","year":2026,"file":"/certificates/Coursera HTMD089DOGAW.pdf","verifyUrl":"https://coursera.org/verify/HTMD089DOGAW"},{"id":"microsoft-cpp-programming-fundamentals","name":"C++ Programming Fundamentals","issuer":"Microsoft","month":"Mar","year":2026,"file":"/certificates/Coursera J9HN85FNUZV9.pdf","verifyUrl":"https://coursera.org/verify/J9HN85FNUZV9"},{"id":"microsoft-oop-cpp","name":"Object Oriented Programming with C++","issuer":"Microsoft","month":"Jun","year":2026,"file":"/certificates/Coursera 0XUT0TJSKME7.pdf","verifyUrl":"https://coursera.org/verify/0XUT0TJSKME7"},{"id":"ibm-intro-software-engineering","name":"Introduction to Software Engineering","issuer":"IBM","month":"Jul","year":2026,"file":"/certificates/Coursera ZBHEFVBFORO8.pdf","verifyUrl":"https://coursera.org/verify/ZBHEFVBFORO8"},{"id":"ibm-intro-cloud-computing","name":"Introduction to Cloud Computing","issuer":"IBM","month":"Aug","year":2026,"file":"/certificates/Coursera DKZY733X41DP.pdf","verifyUrl":"https://coursera.org/verify/DKZY733X41DP"},{"id":"ibm-html-css-javascript","name":"Introduction to HTML, CSS, & JavaScript","issuer":"IBM","month":"Aug","year":2026,"file":"/certificates/Coursera 8UJZX29OVTLA.pdf","verifyUrl":"https://coursera.org/verify/8UJZX29OVTLA"},{"id":"ibm-git-github","name":"Getting Started with Git and GitHub","issuer":"IBM","month":"Aug","year":2026,"file":"/certificates/Coursera JRVFY2VFRZPC.pdf","verifyUrl":"https://coursera.org/verify/JRVFY2VFRZPC"},{"id":"ibm-front-end-react","name":"Developing Front-End Apps with React","issuer":"IBM","month":"Aug","year":2026,"file":"/certificates/Coursera DA60M3AVXSYJ.pdf","verifyUrl":"https://coursera.org/verify/DA60M3AVXSYJ"},{"id":"ibm-back-end-node-express","name":"Developing Back-End Apps with Node.js and Express","issuer":"IBM","month":"Aug","year":2026,"file":"/certificates/Coursera QXXJUFVFCLO5.pdf","verifyUrl":"https://coursera.org/verify/QXXJUFVFCLO5"},{"id":"ibm-python-data-science-ai","name":"Python for Data Science, AI & Development","issuer":"IBM","month":"Aug","year":2026,"file":"/certificates/Coursera 2ZL1UHQO477D.pdf","verifyUrl":"https://coursera.org/verify/2ZL1UHQO477D"},{"id":"microsoft-intermediate-cpp","name":"Intermediate C++ Programming Techniques","issuer":"Microsoft","month":"Apr","year":2026,"file":"/certificates/Coursera 1VIMGWXM36ZD.pdf","verifyUrl":"https://coursera.org/verify/1VIMGWXM36ZD"}],"milestones":"$19:props:contents:3:milestones","bcit":{"terms":[{"year":2023,"label":"Winter 2023","program":"Applied Web Development","credits":8,"courses":"$19:props:panelData:0:bcit:terms:0:courses","cumulativeCredits":8,"thisYear":false,"ahead":false},{"year":2023,"label":"Spring/Summer 2023","program":"Computer Systems","credits":7,"courses":"$19:props:panelData:0:bcit:terms:1:courses","cumulativeCredits":15,"thisYear":false,"ahead":false},{"year":2023,"label":"Fall 2023","program":"Computer Systems","credits":6,"courses":"$19:props:panelData:0:bcit:terms:2:courses","cumulativeCredits":21,"thisYear":false,"ahead":false},{"year":2024,"label":"Winter 2024","program":"Computer Systems","credits":7,"courses":"$19:props:panelData:0:bcit:terms:3:courses","cumulativeCredits":28,"thisYear":false,"ahead":false},{"year":2024,"label":"Spring/Summer 2024","program":"Computer Systems","credits":7,"courses":"$19:props:panelData:0:bcit:terms:4:courses","cumulativeCredits":35,"thisYear":false,"ahead":false},{"year":2024,"label":"Fall 2024","program":"Computer Systems","credits":4,"courses":"$19:props:panelData:0:bcit:terms:5:courses","cumulativeCredits":39,"thisYear":false,"ahead":false},{"year":2025,"label":"Winter 2025","program":"Computer Systems","credits":8,"courses":"$19:props:panelData:0:bcit:terms:6:courses","cumulativeCredits":47,"thisYear":false,"ahead":false},{"year":2025,"label":"Spring/Summer 2025","program":"Computer Systems","credits":4,"courses":"$19:props:panelData:0:bcit:terms:7:courses","cumulativeCredits":51,"thisYear":false,"ahead":false},{"year":2025,"label":"Fall 2025","program":"Computer Systems","credits":6,"courses":"$19:props:panelData:0:bcit:terms:8:courses","cumulativeCredits":57,"thisYear":false,"ahead":false},{"year":2026,"label":"Winter 2026","program":"Computer Systems","credits":3,"courses":"$19:props:panelData:0:bcit:terms:9:courses","cumulativeCredits":60,"thisYear":true,"ahead":false}],"totalCredits":60,"transcriptFile":"/bcit/transcript.pdf","credential":"$19:props:panelData:0:bcit:credential","credentialEarned":true}}],"initialYear":2023,"children":"$L2f"}] 1c:null

Projects

BCIT

Certificates