Recently we launched our new product Bit Social, a plugin that is used for sharing your WordPress content on social media. While many plugins offer similar functionality, we wanted to create something that stands out for its user-friendly design and robust feature set. Bit Social is continually evolving, with new features being added regularly based on community feedback, which has been overwhelmingly positive. Bit Social and our other popular products like Bit Form and Bit Integrations, have also gained significant traction for their speed and intuitive interfaces. With this in mind, we wanted to share the tech stack behind our products and the reasons why we chose these technologies.
In this article, we will discuss the technologies we used to create Bit Social and why we chose them. We will also provide some insights into how we use these technologies to create a seamless user experience.
In WordPress, there is no specific framework or de facto standard for plugin structure. While this flexibility is one of WordPress's strengths, it can also be daunting for developers who are new to building plugins. Despite the lack of a set architecture, there are fundamental principles, best practices, and essential security measures that developers should follow.
From our experience with Bit Form, we believe it’s important to maintain a reusable and maintainable codebase. To streamline future development, we’ve decided to create a boilerplate/framework that includes reusable components and follows best practices, ensuring consistency and efficiency in our upcoming products.
The primary goal of a boilerplate or framework is to offer a strong foundation for developing WordPress plugins. It speeds up development, enhances code structure, and simplifies long-term maintenance and testing. Also using a framework ensures consistency across different plugins, providing a significant advantage.
Our frontend architecture is built using React, a widely-used JavaScript library for developing user interfaces. React’s speed, simplicity, and flexibility make it ideal for building dynamic, interactive web applications. With TypeScript integrated into our React codebase, we benefit from robust type checking, which helps catch potential errors during development, ensuring cleaner, more maintainable code before deployment.
For our design system, we leverage Ant Design, a popular React UI library that offers a comprehensive set of pre-built components and styles. Combined with our custom design guidelines, Ant Design helps us deliver a consistent, visually appealing user interface, ensuring a seamless experience across all our products.
State management plays a critical role in modern front-end development. While Redux has been a long-standing choice for many, we’ve opted for Recoil.js and Jotai for managing the application state. These libraries introduce the concept of atomic stores, making state management more modular and intuitive. Their lightweight nature and React-like syntax provide a more readable, flexible, and efficient solution compared to Redux, making them an ideal fit for our application architecture.
To provide a seamless user experience, we focus heavily on data fetching and caching. In contrast to traditional WordPress plugins, which reload entire pages and re-fetch data with every navigation, our single-page application (SPA) design enhances the user experience by avoiding full-page reloads. We utilize React-Query (from Tanstack), a powerful tool for managing data fetching and caching, which allows us to optimize performance by fetching only necessary data, caching it for future use, and handling pagination and error states efficiently. This ensures users don’t experience unnecessary delays when navigating through our products.
To maintain high code quality and enforce best practices, we integrate ESLint and Prettier into our workflow. `ESLint` helps catch potential issues and enforce coding standards, while Prettier ensures consistent code formatting across the entire codebase. Additionally, we employ Git hooks like Lefthook and Commitlint to enforce quality checks before each commit, ensuring clean, reliable code is pushed to production.
For bundling and build optimization, we rely on Vite, a next-generation front-end tool that offers fast builds, hot module replacement, and optimized production bundles. Vite’s modern approach significantly speeds up development and streamlines our build process, making it easier to deploy and maintain our products efficiently.
This architecture not only ensures a smooth development experience but also allows us to deliver high-quality, performant, and maintainable products to our users.
At the core of our WordPress backend development, we adhere to the WordPress Plugin Guidelines and follow industry best practices to ensure top-notch compatibility, security, and performance. To enhance readability and code quality, we’ve adopted a modular architecture inspired by the popular PHP framework Laravel. This approach enables us to isolate key components into reusable packages, allowing us to maintain consistency, reduce duplication, and streamline plugin development. Some of these packages are open-sourced and available on our GitHub repository.
Some Components of Our Architecture:
We've developed a set of core components to handle essential tasks such as data retrieval, caching, and API requests. Central to this is our wp-kit package, a collection of reusable, flexible components that simplify plugin development. By utilizing wp-kit, we ensure consistent, high-quality code across various plugins, speeding up development and enabling the creation of robust, feature-rich solutions.
Data integrity and security are critical in plugin development. For handling requests, we leverage the WordPress REST API and wp_ajax. To further enhance data security, we use wp-validator, an open-source validation package inspired by Laravel’s elegant validation system. With a clean and expressive syntax, the wp-validator allows developers to define reusable validation rules and messages, simplifying the process of maintaining data validation across different endpoints.
For database interactions, we've built the wp-database package, designed to simplify CRUD operations and streamline database management. It abstracts common database tasks like querying, inserting, updating, and deleting records, making it easier to work with WordPress tables and custom post types. Additionally, it offers CLI commands for database migration and seeding, bringing a modern approach to managing WordPress databases.
To ensure we maintain a clean, maintainable codebase, we integrate tools like PHP-CS-Fixer and PHPStan. These tools enforce coding standards and perform static analysis, catching potential issues early. By automating these processes, we ensure that every plugin we deliver is reliable, secure, and aligned with modern development standards.
Our modular backend approach enables us to quickly build scalable, secure, and high-quality plugins. We’re committed to sharing more of our open-source work, providing the community with tools that simplify WordPress plugin development.
Testing plays a vital role in our development process, ensuring the highest standards of quality and reliability across our products. On the backend, we use PHPUnit for unit testing but are in the process of migrating to Pest, a more modern and developer-friendly framework that enhances both efficiency and the developer experience.
For the front-end, Vitest is our go-to tool for unit and integration testing, ensuring that every React component is thoroughly checked and free from bugs. This rigorous testing helps us catch issues early, contributing to the overall stability of our applications.
In addition to unit and integration testing, we rely on Cypress for end-to-end testing. With Cypress, we're able to simulate real user interactions and test our applications across a variety of browsers and devices, giving us the confidence that the user experience remains consistent and reliable under different conditions.
To complement our testing approach, we also use Storybook for component testing and visual regression. Storybook allows us to isolate and test individual UI components, making it easier to catch design inconsistencies and potential issues before they affect the overall user interface.
By combining these powerful tools, we maintain a strong focus on code quality and product robustness, ensuring that our applications are well-tested, visually consistent, and reliable for our users.
When deploying plugins, we use WordPress.org's Plugin Repository as our primary platform to ensure broad accessibility for WordPress users worldwide. This repository is the central hub for WordPress plugin distribution, allowing millions of users to discover, download, and install plugins directly into their WordPress installations.
To maintain high-quality standards, we strictly follow the WordPress Plugin Guidelines. These guidelines cover everything from code quality and security to proper plugin documentation, ensuring that our products meet the highest benchmarks for compatibility, performance, and security. Adhering to these guidelines helps us avoid potential issues like conflicts with other plugins or updates to the WordPress core.
To manage the development and deployment process, we use GitHub Actions to automate continuous integration and continuous deployment (CI/CD). This approach allows us to streamline the plugin release cycle. With CI/CD in place, each change in our codebase is automatically tested, built, and prepared for release. This automation minimizes human error and guarantees that our plugins remain updated and perform reliably for users.
This seamless workflow means that users always have access to the latest features, performance improvements, and security patches without delay. By leveraging these systems and best practices, we ensure that our plugins provide an excellent user experience while remaining secure, compatible, and well-maintained over time.
Our commitment to delivering high-quality, user-friendly products is reflected in the technologies we use and the development practices we follow. By leveraging modern tools and frameworks, we create robust, performant, and maintainable solutions that meet the evolving needs of our users. Bit Social is the first product that we have built using our boilerplate and we are excited to continue refining and expanding our products to provide even more value to our users.
EN 
ES 
FR 
DE 
PT 
IT 
NL