Full-stack Developer

Front-end focused, fast shipping, clean UX.

I build bold, user-first products that ship fast and scale clean.

I design and build full-stack apps with auth, resilient APIs, E2E-tested flows, and UX that holds up in production—not just happy-path demos.

About this portfolio: a simple, hand-coded site focused on clarity, speed, and proof you can ship real product work.

Projects

IA Story Generator main page

AI Story Generator

Problem: Generate coherent short stories from minimal user input without breaking when API credits run out.

Stack: Vercel Serverless Functions, Replicate API (Llama 3), Vanilla JavaScript, Playwright, GitHub Actions.

Outcome: Production-minded AI feature with explicit API contracts, resilient client HTTP, and deterministic fallbacks.

  • AI API — Serverless Replicate integration with tone/length controls and explicit HTTP contracts (402 when credits fail).
  • HTTP resilience — fetchWithResilience: AbortController timeout, retry on 429/502/503, typed HttpError.
  • Fallback — Deterministic local story generator plus transparent session notice when AI is unavailable.
  • CI + E2E — GitHub Actions (syntax, API/fallback tests) and Playwright generate flow with mocked API.

Impact: Users always get a story—even when API credits run out or the provider returns transient errors.

ReplicateHTTP ResilienceFallbackPlaywright
Read more
Quick summary

Engineering decisions on the card—AI contracts, client resilience, fallbacks, and CI—not just a demo that works on a good day.

Mini Ecommerce main page

Fake E-commerce

Problem: Build a production-grade storefront—not a static catalog—with auth, API resilience, and CI-backed checkout flows.

Stack: Next.js App Router, React 19, TypeScript, Clerk, Tailwind CSS, Sentry, Playwright, GitHub Actions.

Outcome: Production-grade storefront with auth-aware flows, resilient APIs, and CI-backed checkout.

  • Auth — Clerk sign-in, protected routes, per-user orders, and admin role demo.
  • HTTP resilience — Typed client with timeout/retry and AppError for user-facing failures.
  • Rendering — SSG/ISR catalog and PDP for fast loads with fresh product data.
  • CI — GitHub Actions (lint, type-check, tests, build) plus Playwright checkout E2E.

Impact: Recruiters can sign in, browse, and complete a tested checkout—not just click through a mock UI.

ClerkSSG/ISRHTTP ResiliencePlaywright
Read more
Quick summary

Engineering decisions spelled out on the card—auth, resilience, rendering, and CI—not just a screenshot and stack list.

Mini Job Board main page

Mini Job Board

Problem: Simulate hiring-platform workflows—search, filters, saved jobs, detail views—without a framework or build step.

Stack: HTML, CSS, Vanilla JavaScript, JSON data source, Playwright, GitHub Actions.

Outcome: Interaction-heavy job board with tested filter logic, multi-page flows, and CI-backed quality gates.

  • Filter logic — Pure filter/sort module decoupled from the DOM; unit-tested in Node.
  • Product flows — Search, filters, saved jobs, detail modals/pages; theme and grid/list prefs in localStorage.
  • CI — GitHub Actions: JS syntax checks, JSON schema validation, and filter unit tests.
  • E2E — Playwright happy path: search → save job → saved jobs modal.

Impact: Recruiters can search, filter, save jobs, and verify the flow via Playwright—not just scroll a static list.

Vanilla JSUnit TestsPlaywrightCI
Read more
Quick summary

Engineering decisions on the card—testable filter architecture, product flows, CI, and E2E—not just a styled job list.

Saravá Radio Streaming mockup

Saravá — Espacio Cultural

Problem: A grassroots cultural center needed a unified digital hub for live radio streaming and project archival without recurring infrastructure costs.

Stack: Next.js (Static), React, TypeScript, GitHub Pages.

Outcome: Delivered a high-performance platform with zero hosting costs, featuring a custom audio player and modular content loaders for community events.

  • Static export — Next.js App Router with output: export for GitHub Pages; zero server cost in production.
  • Content pipeline — JSON posts, novels, and events with typed loaders; editors ship copy through Git.
  • Site shell — Reusable header/footer, hero carousel, and section routes for radio, podcast, club, and cultural space.
  • CI — GitHub Actions lint + production build before docs/ deploy.

Impact: Client-ready cultural hub deployed on GitHub Pages with CI-backed builds.

Next.jsStatic ExportClient Work
Read more
Quick summary

Engineering decisions on the card—static export, JSON content pipeline, modular sections, and CI—not just a cultural landing page.

Skills

Frontend

React, Next.js App Router, TypeScript, Tailwind CSS, SSG/ISR, Context API, Custom hooks, Error Boundaries, Vanilla JavaScript

Backend & Auth

Node.js, REST & GraphQL, Clerk auth, Serverless, Redis, WebSockets, Replicate AI integration

Reliability & State

HTTP resilience (timeout, retry, typed errors), State management, Loading/error UI, Sentry

Testing & Delivery

Vitest, Testing Library, Playwright E2E, GitHub Actions CI, Vercel & GitHub Pages deploy, Engineering docs (DoD, PR templates)

Engineering Practices

How I ship: tests at every layer, CI on every push, auth and secrets treated seriously, and observability plus docs so the next person (or future me) isn't guessing.

Testing

  • Vitest unit tests on pure logic and React components
  • CartContext integration tests on checkout flows
  • Playwright E2E across all four featured repos

CI / Delivery

  • GitHub Actions: lint, type-check, test, build on every PR
  • Vercel previews + production; GitHub Pages for static sites

Auth & Security

  • Clerk OIDC sign-in with session-aware middleware
  • Protected routes and per-user order scoping
  • Secrets hygiene: .env.example, gitignored keys, no creds in client bundles

Observability & Docs

  • Sentry, structured logger.ts, and React error boundaries
  • Definition of Done and PR templates in repo docs

Verify CI locally

Every featured repo ships a GitHub Actions workflow (lint, tests, build, and Playwright E2E) that runs on every push and pull request. You can also run the exact same pipeline locally with the steps below.

  1. Clone a featured repo, then npm ci.
  2. Run npm run ci for the core pipeline (same steps as CI minus E2E).
  3. Run npx playwright install chromium once, then npm run ci:full to include E2E—or npm run test:e2e after npm run ci.
  • mini-ecommercelint, type-check, Vitest, production build
  • mini-job-boardJS syntax, JSON schema validation, filter unit tests
  • ia-storiessyntax checks, API/fallback tests, .env.example validation

Workflow files live in .github/workflows/ci.yml in each repo; READMEs repeat these commands for reviewers.

Roadmap

What I'm building next — completed items link to the proof on GitHub.

How I use AI in development

I use AI tools to accelerate scaffolding, ideation, and refactoring—not to skip thinking. Every change still goes through the same bar I'd use on any team: tests, type-checks, and manual review before it ships.

  • Development workflow — Draft boilerplate, explore refactors, and speed up docs; I review and edit everything before merge.
  • Product integration — Built AI Story Generator with Replicate, client timeouts, and deterministic fallbacks when credits or providers fail.
  • Quality guardrails — CI (lint, type-check, tests, E2E where it matters) catches regressions whether code came from me or an assistant.
  • Ownership — I own architecture choices, error handling, and production readiness—not the tool.

About Me

Alejo Castillo

La Plata, Buenos Aires, Argentina

I build end-to-end web products with the depth junior portfolios usually skip: authentication, resilient API layers, observability hooks, and automated tests in CI. I ship fast, but I also ship things that survive real usage.

  • Full-stack focus — Next.js, React, TypeScript, Node.js, and serverless APIs with real auth and checkout flows.
  • Production habits — HTTP resilience, Sentry, Playwright E2E, and GitHub Actions CI on featured projects.
  • UX that holds up — loading states, error boundaries, and flows that work when APIs fail—not just on the happy path.

Focus: product UI, auth-aware flows, and CI-backed quality—not tutorial-level demos.

Contact

Open to full-time roles, contract work, and collaborations. Email is the fastest way to reach me.

alejoworkstuff@gmail.com

Application materials

Documents open in a new tab — use your browser’s print dialog to save as PDF.