Back to projects

braintrust-clone

ReactTailwind CSSTypeScript

In October 2025, I connected with a designer in the early startup space. Because I was looking to develop my front end skills, I asked for his opinion on a high quality front end product I could replicate, he mentioned braintrust.dev.

The challenge before me was straightforward: Use proper HTML, CSS, React, powered by AI to get this done. Just one problem remained: Since learning to code I tinkered with various web frameworks, and in recent years I invested heavily into AI-assisted programming, which got me pretty far in website building. But I ended up skipping over a few HTML/CSS fundamentals since that was not part of my work responsibilities at the time. And I knew that the caliber of professional front end work I wanted to do required rock solid foundations. So I took Front End Development course on Scrimba, spent a few weeks practicing on smaller projects, at the end I took on the task of cloning braintrust.dev.

A bit about how I structured this project: Braintrust is no simple SPA. It is an high definition, professional front end product. I on the other hand, am a simple person. Left with enough time and no end in sight, I will work on something until it is fully done. So in the interest of time I did a "hackathon" across 3 days to work on this particular clone. I wanted to demonstrate 2 things with this project:

1. Usage of react components and passing data.
2. Attention to detail.

To do this, I cloned the entire overview dashboard. From the sidebar to button interactions, I kept true to the design and UX. Then, I mocked out a partial logs page, where I could demonstrate my understanding of data and state management in react, showing how the Log trace from the overview page directs to a detailed view in the log page, maintaining clean React code. Throughout the project this was my process:

1. Set out the project plan in CLAUDE.md
2. Prompt Claude Code for the next feature in auto-edit mode.
3. Fix, improve.
4. Repeat from step 2.

In the end I got a clone that looked close to the original design. In true hackathon fashion, I'll answer the question, "What would you do if you had more time to work on this?" One, finish up another page or two, probably starting with the Prompts page. Two, While I spent a little bit of time on tailwind/css refactoring, there are some inconsistent usages of margins/padding and I would like to clean up my box model patterns.

For better or worse, as a fun way to close out this project, I asked Claude how it was like to work with me. Pretty good feedback, looking to resolve some of the critique by baking it into my Claude agents:

Claude Code feedback on working together during the braintrust-clone project development