My Tech Stack
Tools and technologies I use to design, build, and ship thoughtful, accessible, and scalable digital products.
From design systems to production code—my complete workflow.
My Design → Code Workflow
0. Research
Jupyter Notebook, miro, and Notion for data analysis, user research, and documentation about the design process, including user personas and journey maps.
1. Design
Figma for wireframes, prototypes, and design systems. Components with properties, variants, and tokens.
2. Document
Storybook for component documentation, testing, and developer handoff. Live, interactive specs.
3. Test
Chromatic for visual regression testing and design QA. Catch UI bugs before production.
4. Ship
React + TypeScript for production-ready components. Deployed with Next.js and Tailwind CSS.
Design Tools
Figma
My primary design tool for everything from wireframes to high-fidelity UI. I use Figma not just for visuals, but for system thinking — components, variants, tokens, and collaborative handoff with devs.
Adobe Creative Suite
Primarily Illustrator and Photoshop for custom illustrations, vector assets, image editing, and visual polish beyond UI needs.
Development Tools
React + TypeScript
My go-to stack for building interactive interfaces and component libraries. I use TypeScript for type-safe, predictable code and better developer experience.
What I use it for: Component development, design system implementation, interactive prototypes, production applications.
Next.js
React framework for building performant, SEO-friendly web applications. Powers this portfolio and my side projects.
What I use it for: Portfolio website, documentation sites, personal projects.
Tailwind CSS
Utility-first CSS framework for rapid, scalable styling. I define custom color tokens and maintain consistency across projects.
What I use it for: User interface and component styling, responsive design, design system implementation.
React Flow
Library for building node-based interfaces and interactive canvas systems—especially useful for data-driven or visual workflows.
What I use it for: Flowchart builders, data visualization, AI agent mapping, process diagrams.
Design System & Documentation
Storybook
Essential for documenting, testing, and validating React components in isolation. This is how I bridge design and development—giving developers interactive, explorable component specs.
What I use it for: Component documentation, variant exploration, accessibility testing, design system handoff, developer collaboration.
Chromatic
Visual regression testing and design system CI/CD. I integrate it with Storybook to catch UI inconsistencies before they reach production.
What I use it for: Visual testing, design QA, catching unintended changes, design system versioning, collaboration with developers.
Version Control & Collaboration
Git + GitHub
Version control, code reviews, and team collaboration. I use feature branching and conventional commits to keep everything clean and maintainable.
What I use it for: Code versioning, pull requests, design system releases, collaboration with developers, open-source contributions.
Data & Analysis
Jupyter Notebooks
I analyze behavioral and product data using Python, Pandas, and Matplotlib. Essential for making informed design decisions with real usage data.
What I use it for: User behavior analysis, A/B test evaluation, feature usage tracking, data-driven design decisions.
Currently Learning
Advanced React Patterns
Deepening my understanding of hooks, state management, and component architecture to write cleaner, more maintainable code.
Why: To think like a developer and build production-ready components.
Database Structures
Learning MySQL and MongoDB to understand data architecture. Getting better at writing queries and creating JSON structures from scratch.
Why: To design better data-driven interfaces and understand backend constraints.
API Development
Learning REST and GraphQL to build efficient APIs. Focusing on authentication, data fetching strategies, and API design principles.
Why: To build real, data-connected products—not just static prototypes.
