Theme Platform with a Browser Extension

Overview

Mochaburg is a startup that allows users to create, manage, and share CSS themes via a browser extension called Layers. The platform empowers both content creators (those who design and upload themes) and content consumers (those who apply themes to customize their web experience). This project has been entirely developed by me as the founder and software engineer.

Problem Statement

The problem we’re solving is the lack of flexibility and personalization in web design. Most websites have a fixed design set by the UI/UX developers, and users have limited control over these choices. Whether it’s accessibility concerns, such as font sizes or color contrasts, or simply personal preferences for aesthetic design, Layers gives users the ability to customize their browsing experience at a granular level.

Technical Overview

Frontend Components: I created a custom Rsbuild plugin to compile and bundle TypeScript, Preact, and SolidJS for the Mochaburg browser extension, streamlining the build process and optimizing frontend performance. The frontend of the Layers extension is made up of four main components that communicate via the browser’s messaging API:

1. Popup:

   • Technologies Used: Typescript, Preact, Redux, TailwindCSS
   • Description: The popup appears when users click on the extension icon. It allows users to browse available themes, subscribe to them, and toggle them on or off across any website. The popup uses Redux for state management to track active themes and user preferences.

2. Dashboard:

   • Technologies Used: Typescript, SolidJS, Zag, TailwindCSS, CodeMirror
   • Description: The dashboard enables content creators to build and upload CSS themes. It features a CSS editor powered by CodeMirror, providing syntax highlighting, auto-completion, and a smooth user experience for creating and managing themes. Additionally, the dashboard integrates with Mochaburg APIs to allow content creators to upload and share their themes with the community. Users can manage multiple theme versions and seamlessly publish them to the platform.

3. Content Script:

   • Technologies Used: Typescript
   • Description: The content script manages the injection and removal of CSS on websites based on active themes. It enables real-time updates to web pages without requiring a page reload.

4. Background Script:

   • Technologies Used: Typescript
   • Description: The background script handles communication between the popup, dashboard, and content script. It manages theme state, ensures synchronization with the cloud, and performs background tasks such as theme updates.

Offline-First Approach:

The extension is designed to be offline-first, leveraging Dexie to store both locally created themes and metadata about subscribed themes. This allows users to continue using their themes even if there is an interruption with the Mochaburg network or APIs. The themes are delivered as CSS files through Cloudflare CDN, ensuring fast and reliable delivery to users, with caching capabilities to improve performance and reduce load times.

Per-Tab Theme Control:

Users can enable themes globally or apply them per browser tab. This flexibility enables users to have different themes active on different websites or tabs, allowing for a more personalized browsing experience.

Backend Architecture:

The backend is built around a microservices architecture, using Typescript with the Hono framework for APIs and Prisma ORM for database management. Here are the key backend components:

1. API Layer:

   • Technologies Used: Typescript, Hono, Prisma ORM, PostgreSQL
   • Description: The APIs manage theme subscriptions, user authentication, and content uploads. Hono is used for its lightweight, performance-oriented nature, ideal for real-time, high-frequency API calls. The database is powered by PostgreSQL, and Prisma ORM handles database interactions with ease. Liquibase is employed to manage schema migrations and keep track of database changes.

2. Authentication:

   • Technologies Used: Ory Kratos, Twilio SendGrid
   • Description: Authentication is handled via Ory Kratos, an open-source identity management tool. Users authenticate through one-time email codes sent by Twilio SendGrid. This simple, secure method allows for easy login and account recovery.

3. File Storage:

   • Technologies Used: Cloudflare R2 (S3-compatible), Cloudflare CDN
   • Description: Themes are stored on Cloudflare R2, an S3-compatible object storage service. Cloudflare CDN ensures quick delivery of assets across the globe, enhancing performance and reducing latency.

4. Containerization & Deployment:

   • Technologies Used: Podman, GitHub Actions
   • Description: The backend services are containerized using Podman for efficient deployment and scalability. A GitHub Actions CI/CD pipeline automates testing, building, and deployment, ensuring smooth updates across both frontend and backend systems.

5. Scaling and Future Infrastructure:

   • Technologies Considered: Apache Kafka, Kubernetes
   • Description: As the user base grows, there are plans to integrate Apache Kafka for queue management and use Kubernetes to manage scaling automatically. This will allow the platform to handle large-scale traffic and high content upload rates, ensuring high availability and performance.

Key Milestones and Achievements

• Launched the alpha version of the Layers extension on the Chrome Web Store.
• Conducted initial user testing with a limited set of users to gather feedback and refine features.
• Successfully implemented an offline-first model, ensuring that users can continue to use their themes even when the Mochaburg network is temporarily unavailable.
• Built a scalable backend infrastructure capable of handling millions of users, ensuring smooth operation across the platform.
• Set up a comprehensive CI/CD pipeline using GitHub Actions, ensuring smooth and continuous deployment of updates to both the frontend and backend.

Challenges and Learnings

• Offline-First Implementation: Ensuring the extension worked smoothly offline was challenging but critical to the user experience. I had to carefully design the storage and synchronization mechanisms using Dexie to make sure themes persisted even without network connectivity.
• Theme Management: Managing theme versions, allowing users to upload multiple versions, and ensuring compatibility across browsers and tabs added complexity to the platform. The integration of CodeMirror for the dashboard editor helped streamline this process, providing content creators with a smooth interface for building themes.
• Cross-Component Communication: Efficiently handling communication between the popup, content script, and background script was essential for seamless operation. Using the messaging API and ensuring reliable state management was key to making the extension functional and responsive.
• Scaling the Backend: As the platform grows, I need to ensure that the backend can scale to handle a high number of theme uploads, user subscriptions, and real-time interactions. This led to the decision to incorporate microservices, which can scale independently based on load.

Future Plans

As the platform grows, the following enhancements are planned:

• JavaScript Support for Themes: Adding JavaScript support to themes will allow content creators to add dynamic behaviors to their themes, although security and performance considerations will limit the scope of JavaScript functionality.
• Paid Content: A monetization system will be introduced to allow content creators to charge subscription fees for premium themes.
• Scaling Improvements: As traffic grows, Apache Kafka and Kubernetes will be integrated to handle the increased load and ensure high availability.