Keyboard Part Custom Builder (Ui/Ux Design + Development)

Keyboard Part Picker is an interactive web application that lets users build custom mechanical keyboards by selecting compatible parts in real time. Think PCPartPicker, but purpose-built for the mechanical keyboard community.

Building a custom mechanical keyboard involves navigating dozens of component types (switches, keycaps, PCBs, cases, stabilizers) with complex compatibility rules. Enthusiasts were stuck cross-referencing spreadsheets and forum posts. There was no single tool that combined part selection, compatibility checking, and live pricing in one interface.

Interactive Parts Configurator A step-by-step builder that guides users through selecting each component. The interface updates in real time, filtering out incompatible parts as selections are made and showing running price totals.

Real-Time Compatibility Engine Built a backend compatibility matrix that validates part combinations against known specs (switch type, PCB layout, case form factor, etc.) and surfaces warnings or blocks for incompatible selections.

Pricing & Availability Live pricing updates as users configure their build, with links to purchase individual components.

UX/UI Design System Designed the full experience in Figma: user flows, wireframes, component library, and high-fidelity prototypes. The design prioritizes clarity for both beginners exploring their first build and experienced builders who want speed.

Design: Figma

Frontend: React

Backend: Flask (Python)

Database: MySQL