[{"data":1,"prerenderedAt":121},["ShallowReactive",2],{"project-\u002Fprojects\u002Fharper-studio":3,"projects-featured-nav":108},{"id":4,"title":5,"body":6,"category":85,"description":86,"extension":87,"featured":88,"image":89,"links":92,"meta":95,"navigation":88,"order":96,"path":97,"role":98,"seo":99,"stack":100,"stem":105,"year":106,"__hash__":107},"projects\u002Fprojects\u002Fharper-studio.md","Harper Studio",{"type":7,"value":8,"toc":77},"minimark",[9,14,18,26,30,63,67,70,74],[10,11,13],"h2",{"id":12},"overview","Overview",[15,16,17],"p",{},"Harper is a distributed database and application platform. Studio is the interface developers use to manage it: organizations, clusters, databases, tables, applications, and deployments, all from the browser.",[15,19,20,21,25],{},"I architected and built the new Studio, a distributed ",[22,23,24],"strong",{},"DBMS UI and orchestration layer",", from the ground up with React and the TanStack libraries, while keeping the legacy database management interfaces running and optimized during the platform transition.",[10,27,29],{"id":28},"what-i-built","What I built",[31,32,33,40,51,57],"ul",{},[34,35,36,39],"li",{},[22,37,38],{},"The foundation."," Routing, data fetching, and state built on TanStack, structured so new management surfaces could ship without re-plumbing the app.",[34,41,42,45,46,50],{},[22,43,44],{},"Database browsing that respects real data."," Rendering JSON objects directly in table cells instead of flattening them to ",[47,48,49],"code",{},"[object Object]",".",[34,52,53,56],{},[22,54,55],{},"Application lifecycle flows."," Import and create package improvements, a redeploy package reference modal, and guarding the create flow against duplicate submissions.",[34,58,59,62],{},[22,60,61],{},"Access management."," SSH key management with validated forms and correctly wired authorization links during application import.",[10,64,66],{"id":65},"documentation-alongside-the-product","Documentation alongside the product",[15,68,69],{},"Shipping the UI was half the job. I also wrote the matching docs in Harper's documentation repo: Studio itself, organization management, application and database management, Grafana, cluster editing, and the API tab, so the product and its docs launched together.",[10,71,73],{"id":72},"outcome","Outcome",[15,75,76],{},"Studio became the primary way developers interact with Harper clusters, and the codebase is open source. I merged more than 50 pull requests into it across the build and the following iterations.",{"title":78,"searchDepth":79,"depth":79,"links":80},"",2,[81,82,83,84],{"id":12,"depth":79,"text":13},{"id":28,"depth":79,"text":29},{"id":65,"depth":79,"text":66},{"id":72,"depth":79,"text":73},"Production","A distributed database management UI and orchestration layer for Harper, built from the ground up with React and TanStack. Harper Studio is the interface developers used to manage Harper clusters.","md",true,{"src":90,"alt":91},"\u002Fimages\u002Fprojects\u002Fharper-studio","Harper Fabric Studio sign-in and platform interface",{"live":93,"code":94},"https:\u002F\u002Ffabric.harper.fast\u002F#\u002Fsign-in","https:\u002F\u002Fgithub.com\u002FHarperFast\u002Fstudio",{},1,"\u002Fprojects\u002Fharper-studio","Developer Experience Engineer",{"title":5,"description":86},[101,102,103,104],"React","TypeScript","TanStack","DBMS UI","projects\u002Fharper-studio","2024 – 2026","x5cNdpRaH_iPYGZmqewONpm-AR0RxPMeuR03SC1c_h4",[109,110,113,117],{"title":5,"path":97,"order":96},{"title":111,"path":112,"order":79},"Agentic DevRel Content Pipeline","\u002Fprojects\u002Fagentic-devrel-pipeline",{"title":114,"path":115,"order":116},"MetaMask Documentation","\u002Fprojects\u002Fmetamask-docs",3,{"title":118,"path":119,"order":120},"Evry Health","\u002Fprojects\u002Fevry-health",4,1792003718147]