About Allocator

This project came about foremost as a learning exercise for myself. I wanted not just to teach myself React.js but also to gain experience with general application architecture, local and global state management, Gatsby.js, react-query, react-spring, react-three-fiber, styled-components, and a bit of “serverless” infrastructure.

I built and rebuilt this project multiple times. First, as a command-line tool to make sure I had the basic allocation logic down. Then I built a simple version of Allocator using Create React App, Next.js, and, ultimately, Gatsby.js. I had a pretty good experience with Gatsby’s plugin system and documentation, so I stuck with it.

I learned how to sync the global state with the component state, how to use context providers to dispatch events to reducers, how to rely on component composition, how to build a portal for modals and panels, how to integrate spring animations with view transitions, how to respond to fetch requests, how to create a state-dependent declarative Three.js scene, how to build an extendable component-centric design system and a whole lot more.

My secondary motivation for this project was to move my personal asset management out of the spreadsheet I had been using for years. It’s a simple document that tells me how “off” my asset allocation is. Allocator does the same thing now but in a much more interactive, fun, and informative way. I can take a glance and instantly know how much is required to stay on track. Intuitive asset management is a very tricky problem. I had fun trying to solve it for myself.

The final goal was to build something new and useful. By making a side project appear as much as a real digital product as possible I’m hoping to show there are still plenty of opportunities to create compelling, unbridled app-like experiences on the web.

About the stack and infrastructure

Here are some of the technologies used to create Allocator. I’m using Gatsby.js with two context providers. One “Portfolio” provider wherein its reducer handles the asset value and allocation investment distribution. The other is a React Query cache provider that pulls in stock charts and symbol search validation via a serverless function. The stock data (time series and company info) is cached in a Firebase database to reduce my queries to IEX Cloud.

All of the static pages are generated by Gatsby.js. The “engine” is all custom-built components. The WebGL canvas on the onboarding welcome view is a series of recursively constructed box meshes using react-three-fiber. I was pleasantly surprised by how well React handles SVGs as the graphs are very quickly dynamically generated line and curve paths.

Almost all the animations are done in react-spring. CSS Grid and flexbox were instrumental in laying out the UI. I wrote a custom FLIP animation solver to handle transition states when the main grid items are added or removed.

Product & marketing design

Conceptually, I wanted this to feel like somewhat of a futuristic dashboard calculator. All of the wireframes, mockups, UI components, iconography, type specs, branding, and even this marketing page were created completely in Figma. The only other design tool I used was Blender to model and render the custom device frames for the hero of this page.

Next steps

This app more than meets my needs already but if more people find it useful then there are a few things I'd like to fix and improve. If you'd like to keep up with future versions be sure to follow @allocator_app.

In summary

This project started as a way to teach myself React.js but it turned into something much more. I had a lot of fun putting this thing together. If you enjoyed using it or have comments or questions, send me an email or contact me on Twitter.