Claude Code: Learning by Building

My day job in a government agency has forbidden the use of AI tools. With AI fluency becoming a basic expectation in product design, I wanted hands-on experience I could speak to directly. Instead of waiting for policy changes, I started a personal project where I can experiment safely and document what I learn. I chose to tackle deployment and API integration specifically because they were outside my comfort zone, despite having no prior experience with either.

Most job tracking tools are too generic to reflect how an individual actually evaluates opportunities. This project set out to fix that: a personalized, AI-powered tracker I could use daily and deploy publicly, built without prior development experience. The constraint I set for myself was that it had to be genuinely useful, not a demo. That meant treating the project like a learning lab for Claude and Claude Code, focusing on security, prompt strategies, and deployment experience.

Goal 1

Ship a functional tool I can use frequently, with a clear primary job to be done and a working end-to-end flow.

Goal 2

Document my Claude Code learnings, including prompting patterns, debugging approaches, and security decisions, as a foundation for future work.

The Process

I structured the project in phases, starting with core functionality before touching visual design. Each feature was scoped as a discrete prompt to Claude Code, tested in the browser, and refined before moving to the next. When something did not work as expected, I used browser developer tools and direct follow-up prompts to diagnose and fix the issue rather than starting over. Security and deployment decisions were made deliberately before going live, including restructuring the API integration to protect credentials. Throughout, I documented decisions and patterns as I went, treating the project as both a functional tool and a learning record.

UI Design

The interface was designed to support fast iteration, with a simple and readable layout that kept the focus on functionality over visual polish. The import feature was structured deliberately around a clear input and output flow: paste a job description, receive a filled card with a fit score, and refined through repeated testing in the browser. Consistent typography and spacing were carried over from my existing portfolio to keep the experience visually coherent and easy to scan. Every design decision prioritized clarity over complexity, reflecting my belief that a tool you actually use is worth more than one that looks impressive but creates friction.

Technical Skills

Claude: Learned to write effective prompts by treating them like design specs, with clear inputs, expected outputs, and constraints, to get reliable and specific results.

Claude Code: Learned to build and iterate on a functional web app through natural language instructions, including debugging unexpected outputs and managing project files without prior development experience.

Netlify: Learned to deploy a live web app from a local project folder, configure environment variables securely, and manage redeployments after making changes.

Serverless functions: Learned why and how to move sensitive API calls off the browser and onto a server, keeping credentials secure while enabling AI features in a deployed app.

Browser development tools: Learned to inspect and debug CSS issues directly in the browser, including diagnosing a grayscale filter conflict that was overriding color styles on child elements.

Learnings

Building with AI is a design skill. Communicating clearly to Claude Code required the same precision as writing design specs. Broad or vague prompts gave vague results; specific prompts built the right thing.

Security and privacy as foundational thinking. Building this tool meant learning to navigate unfamiliar tools (deployment, etc.) while simultaneously considering how to handle sensitive data responsibly. Starting with installing Claude Code, and including API key management, security was a consideration before a single line of code was written.

Personalization as a design strategy. By building the fit score system around configurable inputs like resume, salary expectations, and excluded industries, I created a tool anyone can tailor to their own needs, saving the time and effort of manually evaluating every opportunity.

Next Steps

• Expand theming options so other users can personalize the visual style to their preferences, with all themes meeting AAA accessibility standards from the start.
• Improve the job description import feature to handle a wider range of posting formats and sources more reliably, reducing manual correction after import.
• Test with other job seekers to validate whether the personalization model generalizes, and refine the fit scoring criteria based on real feedback.