Short Explanation
Dimension is an AI work assistant that connects to tools like email, calendar, Slack, docs, and project systems to help teams reduce busywork.
This is a product that I work with professionally. We pivoted from the previous product, and had to build this project from the ground up for around 7 to 8 months until launching time.
What I Work With
It's a very fun project. I worked with a cool designer who developed a really good-looking design system. For this project, I am responsible for the whole front-end side of the app. This includes setting up the monorepo with all the configurations and infrastructure.
Since we had a previous product, we already had the base setup we needed like OAuth, testing, and GitHub Actions configurations. I also developed several complex components, like a text editor using TipTap.
App Demos
It's quite hard to explain what this application does, so let me just show you a video of a few use cases!
Here's an example of Dimension AI browsing through my Drive folders. It can smartly search for the needed data and return it either in a table or even create a document for you. I especially love the design of our tables — they're so beautiful.
There's also more to it. It can do a lot of things like sending emails and showing generative UIs, which is very interesting to code. I have to build components that the agent might call, so users can see them nicely rendered. It's been a really novel experience for me.
Curated Works
Here are a few curated works that I would love to highlight.
Design System
Building design systems is one of my favorite things to do. It's such a fun challenge because when you're actually building them, you need to look ahead and think about how they will be used.
When building the components, I try to balance between the ability to customize them, while also keeping the props strict enough so we can minimize usage errors.
Here's a generated summary of the components that we built:
🎨 SYSTEMATIC DESIGN
├─ 8 Tab Variants → frost, glowy, landing, light, neumorphic,
│ sky-light, transparent, white-underline
├─ 6 Button Variants → colored, frost, colored-frost, normal, text, pill
└─ Design Tokens → Neumorphic + Glassmorphism aesthetic
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✏️ RICH TEXT EDITORS
├─ TipTap with @mentions → 15 integrations (Airtable, GitHub,
│ Google Suite, Linear, Notion, Slack)
├─ Markdown Editor → Full markdown support
└─ HIL Editors → Human-in-Loop AI interactions
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🤖 AI-FIRST COMPONENTS
├─ Generative UI → AI-generated interfaces
├─ HIL Components → Human-in-Loop interactions
└─ AI Form Inputs → Gen-aware form controls
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📝 ADVANCED FORMS
├─ Multi/Single Combobox → Search & multi-select
├─ Date/Time Pickers → Range, single, timezone support
├─ RRule Picker → Recurring schedule builder
├─ Phone Input → International country codes
└─ 15+ Input Variants → Text, OTP, pill, neumorphic, etc.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎭 VISUAL EFFECTS
├─ Glassmorphism → Fluted glass, frosted containers
├─ Neumorphic → Soft 3D shadows (container, pagination)
├─ Animations → Shooting stars, sparkles, glowing
└─ Weather Effects → Dynamic weather videos
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📊 DATA DISPLAY
├─ Markdown Renderer → Full HTML element styling
├─ Spreadsheet → Excel-like grid (Univer)
├─ PDF Viewer → In-app PDF display
└─ Code Blocks → Syntax highlighting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎯 NAVIGATION
├─ Command Palette (⌘K) → Full cmd+k interface
├─ Context/Dropdown Menu → Right-click menus
└─ Keyboard Shortcuts → Visual shortcut display
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━Microinteractions
Specializing in design engineering, I try to implement a high level of detail and care into my components. For these interactions, I usually 'eyeball' them with my taste and preferences. Although these things look small and insignificant, they highly elevate the user experience.
Here are two of my favorite interactions:
Search Dialog
This is a search dialog that integrates with Command K. The loading indicator was really fun to make. I used that effect again several times throughout the app. This component also has keyboard navigation, supported by the cmdk library.
Upload Animation
It's a delightful little interaction, this was inspired by t3-chat.
Rich Text Editor
I think building the TipTap editor was one of my trickiest challenges. It's quite complex and I had to do a lot of customization since it doesn't fully support our use cases. One of our use cases was to make a mention picker. While TipTap has a default mention extension, it doesn't support custom interactions such as filtering and additional API calls for search.
I also implemented a folder system inside the mention picker so users can browse and search more easily. For the loading indicator, we tried to make it as slick as possible with some cool animations.
The list also has virtualization for performance using virtua, my favorite library for virtualization.
Detail Attentions
Whenever I'm building something, I try to pay close attention to the details that people usually forget. You know those little things that make an app feel complete? Like proper loading skeletons, thoughtful placeholder text, empty states that actually guide you, and making sure every interaction has feedback.
When you check my works, you'll notice I don't just implement the base feature. I make sure to handle loading states, add placeholders that make sense, and think through all the edge cases. These details might seem small, but they really add up to create a polished experience.
This includes making all actions accessible through multiple paths, dropdowns, right-click context menus, and keyboard navigation. I also like to create shortcuts for quick actions because power users love them.
Here's an example from our todo list feature. You can change the priority and category of a todo item from two different places: either by clicking the item itself or through the context menu. Having multiple ways to accomplish the same task makes the app feel more intuitive because users can work the way they prefer.
It's my passion and joy to learn what people feel when using the app, and to figure out how we can make it more seamless and enjoyable to use.
Lessons Learned
From my almost three years in Dimension, I learned a whole lot. Maintaining a project especially on the front-end side was the main thing. Since this is a pivot product, I got the chance to actually curate the component signatures and use an actually well-built component. There's a subtle art of picking flexibility and guardrails. But overall it's a really fun job.
I also learned a lot about animations. This project has quite a high standard for the design and interactions. I took a few well-known courses and learned to animate on the job, which turned out pretty satisfying. I got more comfortable writing frontend code, especially with my experience of adding advanced frontend features like virtualization, and good usage of primitive component libraries like Radix.
I think I remember having to either patch or fork and update the Radix code to make sure it worked the way we needed.
Customizing Radix
One use case I still remember doing is popper positioning, getting the floating UI to land in the right spot depending on space around the anchor.
Radix didn't support this out of the box, while the underlying library floating-ui already supported it. I ended up making an npm patch to expose the property. There were also cases where a library needed some tweaking, I'd fork it and put it inside our monorepo.
That was fun to do. I finally felt like an experienced engineer doing that, hahaha. It's the type of weird stuff that the seniors do to make it happen. Having that succeed was super satisfying.
This also highlights that I'll go out of my way to make sure the user experience is perfect and up to standard.
But all in all, I've learned a lot from this project, way more than I'd get from courses alone. I'm very grateful I get to learn all this while still making a living.