Motherboard
Chrome extension for note-taking using ReactJS, Redux, and Tailwind. Developed an internal file system with data storage via LocalStorage and IndexedDB.
- Chrome Extension
- TypeScript
- ReactJS
- Redux
- Tailwind
- LocalStorage | IndexedDB
What is Motherboard?
Motherboard is a browser extension I built to create and manage notes and project resources directly inside the browser—completely offline and without any complex setup. Unlike traditional apps, since it's an extension, you don’t need to "open" it separately; it just lives within your browser, always accessible, even without internet.
Core Features:
- Filesystem-like structure to manage notes as files
- Auto-save (never lose your work again!)
- Support for Markdown and plain text
- Project management tools: Kanban board, Gantt chart, To-do lists
- Offline-first approach
- Completely free
- Super quick one-click install
The Inspiration
I was an avid user of a Chrome extension called Papier. It was simple—you could jot down markdown notes right on the new tab page. But as I kept using it, things started getting messy. There was just one giant note, and finding older thoughts became frustrating. Scrolling endlessly to find that one line I wrote weeks ago? Painful.
One day, while trying to clean up that mess, I accidentally deleted something important. That was the last straw. I thought—what if I could create multiple files inside the same space? Organize things a bit. And that’s how the idea of Motherboard started.
Building Motherboard
I started small—basically replicating Papier’s core idea, but as my own Chrome extension. I was completely new to extension development, but once I got the hang of it, things started moving fast.
I used:
- ReactJS + Redux for state management
- TailwindCSS for styling
- LocalStorage and IndexedDB for offline data storage
How VSCodium Inspired Me
Once I got the basic single-file editor working, I wanted to scale it to support multiple files. But designing the UI for this? That was a challenge.
I toyed with ideas like color-coded dots, dropdowns, even storing the last scroll position temporarily—but none of it felt right.
Then it hit me—I’d been using VSCodium (a de-bloated version of VSCode) almost every day, even while developing Motherboard. And I realized: VSCodium’s file explorer is fantastic. Why not use that as inspiration?
Accidentally Creating a Filesystem
While building support for multiple files, I stumbled onto an even cooler concept. Initially, I just planned on buttons labeled with filenames. But the more I worked on it, the more it started resembling an actual filesystem—with directories, file extensions, and all.
Soon, I could map specific file extensions to React components. Want to render a Kanban board? Just open a .kb file. A markdown note? .md. The system took care of rendering, reading, saving, even auto-saving—automatically.
It wasn’t planned, but it turned into a pseudo-filesystem, and honestly, I was so proud of that accidental discovery.
Adding More Functionalities
One of the best parts of how I structured Motherboard was how easy it became to extend. Because of the pseudo-filesystem setup, adding new features was just a matter of mapping a new file extension to a React component.
So, I naturally started experimenting—quickly adding features like:
- Markdown file support
- Kanban boards
- Gantt charts
- Simple to-do lists
It wasn’t about trying to serve everyone or cramming in tools just for the sake of it. The architecture made it effortless to test out new ideas, and I wanted to see how far I could take it.
Future of Motherboard
There’s still a long road ahead. I’m thinking about:
- File sharing and backups
- More file types (like a Google Sheets-style table)
- Maybe even cloud sync (if it makes sense)
And sometimes, I still ask myself—should a browser extension really be doing all this? But then again, that’s half the fun, right?