Brandon Hedrick

A NextJS app built with the goal of being a simple and elegant digital logbook to track my sailing adventures, this project allowed me to illustrate my skills in building a simple full stack application with a modern technology and practices.

The project is designed with two major user personas in mind: viewers and logbook keepers (aka me). The design of the app allows for anyone to view the logbook, but only logbook keepers can add, edit or delete entries. In order to attain this behavior, I implemented authentication and authorization to protect API routes and conditionally renders components based on the user’s role.

The app is primarily built with Chakra UI components and where the form heavy pages exists (logbook entry and edit pages), I used React Hook Form to handle the form state and validation. All the data is validated using a shared Zod schema on both the client and server side to guarantee consistency.

The data is stored in a NeonDB database on Vercel and is accessed using Prisma as the ORM layer. The GET endpoints all support pagination and sorting which you can see if you visit the activities page in particular. All components and routes are tested using Jest and React Testing Library to ensure the app is robust and reliable. The app is deployed on Vercel and the source code is available on Github. You can check out the app here and the source code here.

A client-side financial planning application built with React, TypeScript, Tremor and modern web technologies. This project provides four specialized calculators to help users explore different aspects of financial planning and retirement scenarios

From a design perspective, this project presented unique challenges in balancing presenting useful data with an experience that would not overwhelm users. Financial calculations can be intimidating and mundane, so I focused on creating an interface that was pleasant, approachable. I used default values that were relatable and showed how possible financial independence can be through small contributions over a long period of time.

Interactive charts and forms provide immediate feedback, helping users understand the impact of their inputs in real-time and subtle debouncing ensures that the experience is smooth and reactive without thrashing on user inputs. The entire experience is designed to build confidence in users who might be intimidated by financial planning.

I’d encourage you to check out the source code on Github

This is a project I worked on at Redox. It’s a comprehensive documentation site for the Redox API usage, contracts and general user documentation.

This project had some really interesting engineering challenges as the dedicated documentation team wanted a way to manage the content in one location and share in several different contexts. In addition to this, they wanted to easily add, remove and reorder content, pages and navigation all while keeping the presentation separated from the content. We also wanted to be able to deliver some UX that would be statically rendered from API contract definitions that the engineering team maintained but still allow these pages to be reordered and supplemented with additional content from the documentation team. Finally everything needed to be searchable and easily navigable. Unfortunately, Docusaurus didn’t exist at the time (it also can’t do everything we needed) so we had to forge our own solution.

To address these challenges we decided to use React, Gatsby, TypeScript and a headless CMS, Contentful to deliver the site. This set of technologies was essential to allowing our content team to easily add, remove and reorder content, pages and navigation while keeping the presentation separated from the content. Delivering a custom implementation meant that the dedicated team could avoid the limitations of a third party solution and the engineering team could deliver highly custom UX that was tailored to the needs of the documentation team. Search was implemented using a client-side FlexSearch plugin and custom indexing logic that allowed a page to be indexed by its title and author-controlled tags/keywords. (Please note that this site is not optimized for mobile devices and also this project has been out of my custody for some time so the experience may have changed)

This website! I created my new portfolio website fresh for 2024 (and refreshed in 2025). I wanted to focus on building something minimal but still pleasant to interact with. Responsiveness and fluidity were top of mind for this project since I believe in a mobile-first approach and a great experience on all devices.

The design process began with market research and competitive analysis - studying other portfolios I admired and identifying what made them effective. I then moved to wireframing and user flow mapping, thinking through how visitors would navigate and consume information. This engineering mindset of considering user journeys early in the process informed every design decision.

In Figma, I created high-fidelity mockups that balanced aesthetic appeal with functional clarity. The design emphasizes readability, clear information hierarchy, and smooth interactions. I paid particular attention to micro-interactions and transitions - the subtle animations that make the experience feel polished and fun. The dark/light mode implementation using mix-blend-mode was an elegant solution to a common UX consideration.

Built using React, TypeScript, NextJS and Tailwind CSS and deployed on Vercel, the technical implementation directly supports the design goals and my original composition decisions with few deviations.

You should check out the source code on Github and see how it was built!

Just a fun one-day project I whipped up with Vite, React and Framer Motion to make something fun, colorful and inspired by Bauhaus design. I love Bauhaus shapes and motifs and wanted to create some simple code to generate tiling patterns with them randomly.

You should check out the source code on Github and see how it was built!