We often glorify adding new features, shipping fast, and "getting things done." But sometimes, the most productive thing you can do is stop, look at your codebase, and admit: "This is a mess."
For the past few months, I've been building DotShare, a VS Code extension that helps developers share code snippets to social media. It works great. Users love it. But under the hood? It was a nightmare.
This is the story of how I refactored a massive 2000+ line monolithic file into a pristine Clean Architecture in 24 hours.
🎥 The Transformation (Watch in 30s)
Words are cheap. Here is the actual footage of deleting 2,000 lines of spaghetti code. Pure satisfaction.
🍝 The Problem: The "Monolithic Class" Trap
I fell into the classic trap. I started with one file: DotShareProvider.ts.
At first, it was 200 lines. "Manageable," I thought.
Then I added LinkedIn support. Then Telegram. Then AI caption generation.
Before I knew it, I was staring at a 2000-line beast.
- The logic was tightly coupled with the UI.
- Authentication tokens were being handled in the same class as UI rendering.
- Debugging meant scrolling... and scrolling... and scrolling.
🧹 The Solution: Clean Architecture
I decided to stop "patching" and start "engineering." I spent 24 hours rewriting the core architecture from scratch.
1. Breaking the Monolith
I moved away from the single-file approach and adopted a modular structure based on Single Responsibility Principle (SRP).
-
Services:
HistoryService,AnalyticsService(Pure logic). -
Handlers:
PostHandler,ConfigHandler(Bridge between UI and Services). -
UI:
DotShareProvider(Strictly for rendering).
The Result?
Instead of one file doing everything, I now have 9 focused files. Each one does exactly one thing well.
🛡️ The Security Upgrade
This was the most critical part. Previously, I stored tokens in globalState (plain JSON).
I migrated everything to VS Code's SecretStorage API.
typescript
// Old Way (Insecure)
this.context.globalState.update('linkedinToken', token);
// New Way (Enterprise Security)
await this.context.secrets.store('linkedinToken', token);
Top comments (0)