OG 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-so
ray.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
OG 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
OG 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
OG 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.