• Learning workspace. I brought structured lessons, practice problems, code drafts, progress tracking and collaborative study into one browser experience.
• Isolated code execution. I ran Python through Pyodide in a Web Worker, with cancellation and time limits so a stalled exercise does not block editing or navigation.
• Conflict-aware persistence. I designed account-scoped progress storage with schema validation and revision-checked SQL writes, protecting newer drafts when tabs or devices save concurrently.
• Permission-based collaboration. I implemented study rooms with distinct membership, viewing, sharing and editing permissions, including checks when a write reaches the database.
• Learner privacy. I built learner discovery, opt-in recommendations and profile-photo processing with revocable visibility controls.
• Contextual AI assistance. I connect the site assistant and lesson tutor to the OpenAI Responses API, grounding requests in course content, editor code and console output. Optional WebLLM inference offers a separate on-device path.
• Controlled corrections. I checked source freshness and response completeness before applying generated code. Undo also checks for subsequent edits before restoring a previous version.
• Adversarial regression tests. I maintain a documented 139-test regression suite, alongside focused checks for account isolation, stale writes, membership races, revoked grants and malformed image uploads.

CodeTrail by SWOT & Study combines a vanilla JavaScript interface with Cloudflare Workers, D1 / SQLite and context-aware AI assistance.

Execution isolation

Python runs in a dedicated Worker rather than on the interface thread. The browser can terminate a run without losing the surrounding learning workspace. The Java learning path uses editing and code downloads.

Optimistic concurrency

Progress writes include the expected revision. SQL updates only the matching account and revision, then advances the revision; conflicting requests receive the current state instead of silently overwriting it.

Authorization at write time

Shared-editor operations check the current room membership, enrollment, blocking state and edit grant. This addresses the gap between a user opening an editor and permissions changing before a later save.

Private-by-default collaboration

A learner's own study buffer starts private. Sharing a buffer and granting another member editing permission are separate operations, and revocation prevents old grants from reappearing after rejoining.

Google identity and sessions

Google OAuth / OpenID Connect uses the authorization-code flow with PKCE and ID-token verification. Expiring server-side sessions, secure cookies and revocation on logout keep identity separate from client-supplied data.

Server-side AI integration

The OpenAI Responses API powers contextual assistance using course material, editor code and console output. The design includes per-user and site-wide usage limits and a shared AI budget. Optional WebLLM inference remains a separate browser-based capability.

Safe editor integration

A proposal is bound to the lesson, language and code snapshot used to generate it. Incomplete replies and stale snapshots do not become editor changes; undo preserves edits made after an applied correction.

Regression coverage

The project documents 139 regression tests. Focused data-boundary suites exercise concurrent mutations, access revocation and invalid media without depending on live learner data.

Core engineering concepts

Worker isolation, WebAssembly integration, OAuth / OpenID Connect, session security, optimistic concurrency, backend authorization, contextual AI integration and regression testing.

• Connected storefront. I built a routed React experience for product discovery, onboarding, profile preferences and a persistent shopping bag.
• Application APIs. I developed Express endpoints and Mongoose models for products, users, preferences and newsletter subscriptions.
• Identity and access. I implemented password hashing, JWT authentication, Google sign-in and administrator checks for catalog operations.
• Media workflows. I connected product and profile imagery to Amazon S3, including multi-image uploads for product administration.
• AI integration. I integrated Amaya through a server-side OpenAI endpoint, with suggested prompts and client-side recovery for failed requests.
• Shopping state. I centralized bag state in React Context and retained quantities in localStorage so refreshes preserve the browser's shopping session.
• Interface composition. I used styled-components and Framer Motion across product discovery and account journeys.

Application structure

React Router organizes the user-facing journeys, Express handles application operations and Mongoose defines persisted user and catalog structures.

State boundaries

React Context coordinates the active shopping bag. localStorage retains its browser-local contents, while MongoDB holds account, preference and product records.

Identity and authorization

Local credentials use password hashing, Google sign-in provides another identity path, and protected routes distinguish account operations from administrator catalog access.

Media pipeline

Multer handles incoming uploads and S3 stores product and profile imagery. Application records associate those images with their products or profiles.

AI request flow

Amaya uses a per-message request/response flow from React through Express to OpenAI. The interface supplies suggested prompts and handles request failures.

Core engineering concepts

Component composition, client state management, REST API design, document modeling, authentication and object-storage integration.

• Connected gifting experience. I developed a TypeScript and React application around wishes, occasions, families and gift coordination.
• Backend privacy rules. I modeled ownership, accepted connections, family membership, field audiences and blocking as access rules.
• Surprise-preserving views. I separated recipient-facing responses from private reservation state so coordination does not reveal a gift.
• Concurrent reservations. I used guarded SQL updates and uniqueness constraints to resolve competing gift claims at the database boundary.
• Private coordination. I built connection-gated messaging with reactions, edit and unsend, authorized media retrieval and privacy-aware read states.
• Revocable address sharing. I implemented explicit shipping-address grants instead of including delivery details in public profiles.
• Controlled product imports. I added product-link import with hostname and redirect checks, bounded downloads and manual entry when a retailer preview is unavailable.
• Privacy-aware PWA. I delivered an installable responsive web experience while keeping messages and personal data out of offline caches.

Policy-centered data access

Server checks combine ownership, relationship status, field audiences and blocking. Interface visibility reflects these rules rather than defining access.

Concurrency at the database boundary

Reservation updates carry conditions that must still hold when SQL executes, backed by uniqueness constraints. A disabled interface button is not the final arbiter of who reserves a wish.

Audience-specific responses

Giver coordination and recipient views receive different information. The application can support planning without returning private reservation details to the recipient.

Authorized messaging and files

Message updates use polling with access checks. Media retrieval is also authorized, with private objects held separately from public presentation.

Controlled external input

Product import constrains retailer hostnames and redirects and bounds downloads. Manual entry keeps the workflow usable when extraction is unavailable.

Privacy-aware delivery

The responsive PWA supports installation, while authenticated personal content remains network-only rather than entering the offline cache.

Core engineering concepts

Relational modeling, backend authorization, concurrency control, audience-specific API responses, controlled URL fetching, private object storage and cache boundaries.