Why I Started This Project
Two reasons.
First, personal branding in the AI era.
It's been two years since ChatGPT launched. Now anyone can write decent prose, generate code, and create designs. Paradoxically, in such an era, I felt the need for a space to prove "who I am." A single resume or a few PowerPoint slides aren't enough. I needed my own space to showcase the depth of my thinking, the breadth of my interests, and my perspective on problems.
Second, I just enjoy building things.
I could have set up a blog on Medium or Substack in five minutes. But living as a tenant on someone else's platform felt constraining. I wanted full control over how my content looks and feels. So I decided to build my own house.
Development Context
Duration: 3 days (after work + weekend)
Investment: Vercel Pro subscription, domain costs
Coding experience: I know JavaScript and Java are different languages. That's about my level.(LoL)
Experiencing the Power of AI
Honestly, what shocked me most about this project wasn't the result I built—it was the capability of AI.
Three days. Someone who barely knows how to code. Built a full-stack blog with a custom editor, dark mode, PWA support, and an admin dashboard. This would have been impossible two years ago.
I used Claude, Gemini Pro, ChatGPT, and Antigravity in combination, depending on the situation.
Tool | Usage |
|---|---|
Claude | Code architecture design, complex logic implementation, debugging. Excellent at understanding context with precise explanations. |
Gemini Pro | Rapid prototyping, idea brainstorming. Sometimes offers unexpected approaches. |
ChatGPT | Documentation, error message interpretation, general development questions. |
Antigravity | No-code platform for non-developers. Used for initial structure. |
I learned that each AI has different strengths. Claude excels at deep code work, Gemini at divergent thinking, and ChatGPT at general-purpose queries. Orchestrating them together allowed me to produce something respectable on my own.
Key Features
Custom Rich Text Editor
A WYSIWYG editor built on Tiptap. Supports autosave, slash commands, bubble menus, and image/video embedding. I believed the writing experience itself needed to be pleasant to encourage consistent writing.
Design System
Defined design tokens based on SCSS variables, applied consistently across the site. Implemented dark mode that follows system preferences. Responsive layout designed mobile-first.
PWA Support
Made the site installable as a Progressive Web App. However, I disabled the install prompt on first visit as I felt it hurt UX.
Admin Dashboard
A private area for managing posts, drafting content, and viewing analytics. Secured with JWT-based session management.
Tech Stack
Layer | Technology | Rationale |
|---|---|---|
Framework | Next.js 14 (App Router) | SSR for fast loading and SEO optimization |
Database | Vercel Postgres | Serverless, auto-scaling, minimal configuration |
Styling | Sass (SCSS) Modules + CSS Variables | Modular styling with global theming |
Editor | Tiptap (ProseMirror-based) | Full customization capability |
Auth | Jose (JWT) + Bcrypt | Lightweight self-managed auth, minimal external dependencies |
Deployment | Vercel | Automated CI/CD, global edge caching |
Challenges & Lessons
1. The Importance of Environment Isolation (The Database Leak)
Early in development, test posts created locally started appearing on the production site. The cause: my local environment was connected to the production database. I completely restructured the environment variable architecture and added explicit environment verification logic to the database connection.
Lesson: Dev/Prod environment separation must be established early in the project. Fixing it later is costly.
2. Responsive Image Handling
When resizing images in the editor, inline styles with fixed values were applied, breaking layouts on mobile viewports. I forced max-width: 100% and height: auto in CSS while maintaining aspect-ratio.
Lesson: Don't trust the markup generated by the editor. Apply defensive styling at the rendering layer.
3. Recognizing the Limits of AI Collaboration
AI isn't omnipotent. Large-scale refactoring is particularly risky. When trying to restructure multiple files at once, the AI loses context and existing functionality can break. It's safer to make incremental changes in small units.
Insights
Development in the AI era is a combination of "prompt engineering + architecture understanding."
The ability to write code line by line matters less than the ability to design the overall structure and give clear instructions to AI. Like an orchestra conductor.
The era of solo development has arrived. But.
Building something, operating it, and making money from it are entirely different domains. AI has lowered the barrier to development, but creating a good product remains difficult.
Personal branding is no longer optional.
In an era where AI churns out generic outputs, differentiation comes from "your unique perspective." Having a space to accumulate and showcase that perspective will be a significant long-term asset.
Closing
Three days. Less than 100 hours.
Is it perfect? No. There's a mountain of things to fix. But now I have a space for my thoughts. And the fact that I built it with my own hands feels pretty satisfying.
With AI, if you have an idea, you can build it. Of course, you still need googling skills, the ability to ask good questions to AI, and the persistence to keep going until it works.
In my next post, I'll dive deeper into how I actually combined these AI tools in practice.
Leave a comment