💡 Project Overview
“From Solo Project to Core Business Model”
CameraFi Studio is a web platform that allows users to apply overlays, such as scoreboards and subtitles, to sports matches or broadcast feeds. Starting as a solo developer, I designed the frontend architecture from scratch and grew the project into the company’s second main revenue stream.
Targeting a global market, I implemented Internationalization (i18n) and an Integrated Payment System (Paddle), and improved web application performance through Webpack configuration optimization.
🛠 Tech Stack
- Framework: Next.js, TypeScript
- Styling: MUI (Material UI) + Styled-components
- Infrastructure: Firebase (Auth, Firestore, Hosting)
- Payment: Paddle
- Optimization: Webpack, Bundle Analyzer
💻 Key Technical Challenges
1. 15% Bundle Size Reduction (324KB → 277KB)
- Tree Shaking: Reduced build size by removing unused modules from heavy libraries like
lodash. - Dynamic Import: Changed heavy components not needed for initial entry (e.g., charts, modals) to load asynchronously.
Through this, I reduced the main bundle size by approximately 15% (47KB), significantly shortening the TTI (Time to Interactive).
2. Secure Integrated Authentication System
Rather than relying solely on libraries, I designed a secure login process combining Firebase Custom Tokens and Cookies.
I enhanced security by synchronizing the authentication state between client and server via cookies and built a separate Integrated Login Page to establish a foundation for Single Sign-On (SSO) across future services.
3. Scalable Global Architecture
I adopted an i18n system from the early stages to support global users.
Additionally, I combined MUI and Styled-components to build a Global Theme System. This created a flexible UI structure capable of adapting to design requirement changes, such as brand color updates or Dark Mode implementation.
4. Custom Compliance Implementation (Cookie Consent)
To comply with global web standards like GDPR without relying on third-party tools, I developed the Cookie Consent banner and control logic from scratch.
By implementing this directly, I prevented page speed degradation caused by loading unnecessary external scripts.
💬 Retrospective: “From Solo Developer to Architect”
1. Initial Design Considering Scalability
I was wary that a poor initial structure in a solo project could lead to unmanageable technical debt later.
Instead of rushing feature implementation, I strictly adhered to Next.js folder structure principles and applied strong TypeScript typing. I focused on building a solid codebase that would remain robust even as the team expanded.
2. Experience with Monetization (Paddle)
I gained experience in building a ‘revenue-generating service’ beyond simple feature development.
By integrating the Paddle payment module, I developed a deep understanding of the entire payment lifecycle, including subscription state management and renewal processing via Webhooks.