evaluate.market
I was with evaluate market from May 2021 - June 2022 and it was exciting and interesting, to say the least. When I joined, I dove head first into the web3 space having no prior knowledge of it. When I first joined, the original version of the web application was live and user's found it be very useful. A few months after I started, we decided to hired a design agency to totally revamp the website. This led to architectural discussions on how to make both client and server side logic as reusable as possible since the first iteration was thrown together pretty quickly having a decent amount of technical debt. One of my most proud accomplishments since working at em, was introducing the idea (and implementation) of an internal UI component framework for expedited UI development and reusability. Let's walk through that...
Type
Full Time
All the Tech I've Worked With
React
Typescript
Next
node.js
express
apex-charts
Show MoreView It
Link
Details
The design agency was completely rebranding em between a new site design, styleguide, logo, and color refesh. The styleguide gave us a framework to know what each state of each component needed to look like. With the existing filesystem structure, there wasn't much opportunity for reusability. It would require the majority of the React components to be re-written. This is where Headless UI comes in.
Headless UI is an unbiased UI library that comes with functional and accesible components ootb while giving engineers full control over the design and states. Since accesiblity is (and should be) an important KPI for web standards, especially trying to perform well in Google's performance metrics, this was and ideal library to use. Given that we were using Materail UI as our UI component library, I proposed Headless UI to mirror the styles of Material UI using Tailwind CSS so we can build an framework of interal components to reuse across the application.
My Notable Contributions
Along with the interal components built with Headless UI, I extended the framework to have additional reusable components that were built on Materail UI given Headless UI is a bit limited in terms of the scope of the API.
I also implemented a simple lazy loading architecture for any imported file to be dynamically imported. An example could be a lazy loaded component or a helper that is asynchronously imported if it's only used when a function is invoked. This simple architecture reduced the overall production bundle size by ~36%.
I was also tasked to implement an enhanced analytics sytem to identify how user's were interacting with our site. These are just a few things I've worked on since joining the team.
Problems and Lessons Learned
Unnecessary React re-renders are costly when it comes to writing a performant web application. After implementing the lazy loading architecture, I noticed awful flickering whenever a route would change or an initial page load. This was caused by not adding additional React.Suspense fallbacks deeper down the component tree where files were being lazy/dyamically loaded. It didn't take long to implment a fix but it was sure a learning leasson when shipping a product to a large user base.