AI Story Generator
Problem: Streaming RAG story generator with agents, guardrails, and evals.
Stack: Vercel AI SDK · pgvector · Neon · TypeScript
Alejo Castillo
Full-stack Developer
Front-end focused, fast shipping, clean UX.
I design and build full-stack apps with auth, resilient APIs, E2E-tested flows, and UX that holds up in production.
Projects
Read more
Fake E-commerce
Problem: Auth-aware storefront with resilient APIs and CI-backed checkout.
Stack: Next.js · Clerk · TypeScript · Playwright
Mini Job Board
Problem: Vanilla job board with testable filters and shareable URL state.
Stack: HTML · CSS · Vanilla JS · Playwright
Saravá — Espacio Cultural
Problem: Zero-cost cultural hub for live radio and community archival.
Stack: Next.js · TypeScript · GitHub Pages
La Plata, Buenos Aires, Argentina
About Me
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.
Skills
Frontend
- React
- Next.js
- TypeScript
- Tailwind CSS
- SSG/ISR
- Context API
- Custom hooks
- Error Boundaries
- JavaScript
Backend & Auth
- Node.js
- REST
- GraphQL
- Clerk
- Serverless
- Redis
- Neon pgvector
- Vercel AI SDK
- WebSockets
Reliability & State
- HTTP resilience
- State management
- Loading/error UI
- Sentry
Testing & Delivery
- Vitest
- Testing Library
- Playwright
- GitHub Actions
- Vercel
- GitHub Pages
- Engineering docs
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.
- Clone a featured repo, then
npm ci. - Run
npm run cifor the core pipeline (same steps as CI minus E2E). - Run
npx playwright install chromiumonce, thennpm run ci:fullto include E2E—ornpm run test:e2eafternpm run ci.
- mini-ecommerce — lint, type-check, Vitest, production build
- mini-job-board — JS syntax, JSON schema validation, filter unit tests
- ia-stories — typecheck, Vitest (64 tests), .env.example validation; E2E in ci:full
Workflow files live in .github/workflows/ci.yml in each repo; READMEs repeat these commands for reviewers.
Open Source
Contributing to vercel/ai — improving v6 tool error handling docs (draft PR #16869).
Roadmap
What I'm building next — completed items link to the proof on GitHub.
Phase 1Completed
Phase 1.1
- mini-job-board — README case study + CI + validation checks
- mini-ecommerce — README case study + CI (lint, type-check, test, build)
- ia-stories — README case study + CI + env/syntax/test checks
Phase 1.2
Phase 1.3
- Resilient HTTP client (http-client, AppError, ApiState, tests)↗
- Clerk auth — protected routes, per-user orders, admin demo↗
- Next.js rendering — SSG/ISR catalog + PDP↗
- Custom hooks — useDebouncedValue, useAsyncResource, useApiMutation↗
- Observability — Sentry, error boundaries, structured logging↗
- Engineering docs — DoD, testing strategy, PR template↗
- Playwright checkout E2E in GitHub Actions↗
- Auth E2E — middleware redirect + public sign-in/up pages↗
- Input validation hardening on all public API routes↗
- Lighthouse + accessibility pass (a11y 100 on key pages)↗
- Vercel — Clerk env vars on Preview + Production↗
Phase 1.3.1
- Client HTTP resilience (http.js) + tests + README troubleshooting↗
Phase 1.4
- GitHub Actions billing — substitute local CI + README badges↗
- CI badges in all featured repo READMEs↗
- mini-job-board — local CI + Pages badges + billing note↗
- sarava — local CI + Pages badges + CI commands in README↗
- Repo hygiene — MIT LICENSE + homepage + topics (all 5 repos)↗
- Screenshot compression — WebP <100KB across featured repos↗
- Legacy PNG cleanup after WebP conversion↗
- ia-stories — API rate limiting + input validation + safe 500s↗
Phase 1.4.1
Phase 1.4.2
Phase 1.4.3
- mini-ecommerce — delete dead code (cart.ts, products.ts, navbar.tsx)↗
- ia-stories — multi-turn story continuation in UI↗
- ia-stories — E2E fallback path (mock 402)↗
- ia-stories — expand check:syntax to all frontend modules↗
- sarava — per-page SEO (generateMetadata)↗
- sarava — README Decap CMS / public/admin cleanup↗
- sarava — UI refactor (dynamic hero, archive components)↗
- mini-job-board — saved-jobs apply flow parity↗
- mini-job-board — document Playwright E2E in README↗
Phase 2Completed
Phase 2.1
Phase 2.2
- Case study page (mini-ecommerce) with Postgres migration story↗
- Case study page (mini-job-board) — filter module, URL state, vanilla depth↗
- Case study page (ia-stories) — AI orchestration, fallback, rate limiting↗
- Case study page (sarava) — static export, dynamic [slug] routes, Zod content pipeline↗
- Card “Read more” links to dedicated pages↗
- Portfolio link checker in CI↗
- Page polish — close mobile nav on anchor click + i18n copy-email feedback↗
- Page checks in GitHub Actions (html-validate + linkinator on push)↗
- Fix check-pages CI — bump Node 20 → 22 for html-validate fs.globSync↗
- Shared layout — generate <head>/header/footer from one source (build-layout.mjs)↗
Phase 2.3
Phase 2.4
Phase 2.5
- De-flake checkout E2E + harden order flow (retry 5xx, safe auth, error logging)↗
Phase 2.5.1
Phase 2.6
Phase 2.6.1
Phase 2.7
- 1 merged PR in a public JS/TS repo
- Open Source section on portfolio
Phase 3Completed
Phase 3.0
Phase 3.1
- TypeScript migration — make ia-stories TS end-to-end↗
- Add Vercel AI SDK + provider abstraction↗
- Stream generation — streamText / streamObject↗
- Zod structured output — story turn schema↗
- Provider abstraction seam for tests (createHandler)↗
- Update API + fallback tests for new stack↗
- Free-tier provider swap — Groq (llama-3.3-70b-versatile) replaces Replicate↗
- Story history UX — per-item delete + clear all (localStorage)↗
Phase 3.2
Phase 3.3
Phase 3.4
Phase 3.5
Phase 3.6
- Server Action — syncCartAction for cart persistence (cart-store + docs)↗
Phase 4In progress
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 — Evolving AI Story Generator from an LLM wrapper into streaming + RAG on Neon pgvector, with Zod guardrails, eval graders, and a deterministic fallback when 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.
Contact
Open to full-time roles, contract work, and collaborations. Email is the fastest way to reach me.
alejoworkstuff@gmail.com