V Table is a small project — but it started from a big technical challenge.
This project began as a clone of a popular open-source repository:
https://github.com/raycast/ray-soray.so is a polished product by Raycast, a well-known company focused on developer tools — specifically, generating beautiful code snippet images.
I chose this repo not just because the UI matched what I wanted, but because I was curious:
How does a real company structure, design, and ship a product-quality open-source project?
The challenge wasn’t cloning it.
The challenge was changing its core purpose entirely.
Instead of code snippets, I wanted the output to be dynamic, styled tables.
And that changed everything.
Why Tables?
This came from a very real, very personal problem.
I was working on a slide deck.
The typography looked great.
The layout felt modern.
Then I added a table.
It instantly broke the entire design.
It looked like something from an early-2000s spreadsheet — rigid, lifeless, and completely out of place.
That moment sparked a simple but frustrating question:
“Why does everything look modern… except tables?”
Reworking a Solid Foundation
V Table wasn’t built from zero.
It was built by reworking a clean, mature codebase that was originally designed for something else entirely.
I had to:
- Understand how ray.so rendered and exported code snippets
- Identify which abstractions could be reused
- Replace static code blocks with fully customizable table structures
- Preserve the smooth UX and export flow — without breaking the architecture
The UI stayed familiar.
The mental model changed completely.
That’s where the real difficulty was.
Learning by Reading Real Code
This was the first time I truly experienced how valuable reading great code can be.
I spent almost a full week doing very little “building” — just reading.
Line by line.
File by file.
Trying to understand why things were written the way they were.
That process taught me more than any tutorial:
- How real projects are structured
- How abstractions stay simple but flexible
- How restraint is often a sign of good engineering
It was slow.
It was frustrating.
And it reshaped how I approach code to this day.
Why This Project Matters
V Table isn’t the biggest project I’ve shipped.
But it was the project that made everything feel real.
It showed me that:
- Small tools can still be meaningful
- You don’t need a huge idea to ship something useful
- Open source is one of the fastest ways to level up
- Understanding existing systems is just as important as creating new ones
Most importantly, it gave me confidence that I could take a real product, understand it, and bend it toward a completely new goal.
Tech Stack (at a Glance)
- Framework: Next.js
- UI: Radix UI + Tailwind
- State Management: Jotai
- Animations: Framer Motion
- Image Export: html-to-image
V Table was the beginning.
Not because it was perfect —
but because it proved that I could learn from real-world code, reshape it, and ship something meaningful.