Dev Team Tool

Overview

This project involved building an Electron JS application designed to improve productivity across multiple teams at 1Point21 Interactive (1P21). It was a highly rewarding experience that allowed me to develop and deploy a tool that streamlined various workflows.

Dev Bro Image 01 Please Note: For all images going forward, I’ve removed any proprietary elements of the application from the images. Retaining only the visual elements releveant for demonstration. So, that’s why you’re seeing big white blocks in places.

Project Overview

Purpose: The application is a desktop tool that enables team members to quickly set up WordPress sites. It automates the creation of temporary domains on the servers, installs WordPress, configures it with company-specific settings, and includes proprietary plugins, all within seconds.

Role: I served as the Full-Stack Engineer and was the sole developer on this project. I led the entire process from design and development to distribution, collaborating with each internal team to identify and address their specific needs.

Duration: Approximately two months.

Technology Stack: The application was primarily built with Electron and incorporated Node.js, React, Material UI, and several ZSH scripts.

Key Features

  • Instant configuration of WordPress sites.
  • Automatic application of proprietary 1P21 configurations during installation.
  • Ability to apply bespoke designs to live sites.
  • Two operational modes:
    • Standard Mode: A straightforward “one-click” setup, as requested by the CEO.
    • Dev Mode: A mode with advanced options for the development team, offering greater control over the installation process.
  • Easily extensible by the dev team for adding new features.

Development Process

To streamline workflows, I collaborated with each team in the company to identify common tasks that could be automated. The result was an application that simplifies setting up WordPress sites on various domains. The primary use cases included staging sites with specific themes for client design previews and enabling dev team members to quickly launch sites for custom theme development.

The key challenges faced during development were:

  • Integrating with five different servers
  • Managing around 50 WordPress themes, ranging from legacy to modern versions
  • Applying bespoke client designs to the selected WordPress themes
  • Ensuring a seamless, one-click setup process

Ultimately, some compromises were made in ease of use. A dev team member is required to configure certain aspects, such as API keys, for the other teams. This setup is quick, allowing the one-click system to function smoothly. I believe this outcome was beneficial, as it fostered valuable cross-team collaboration that might not have happened otherwise.

Technical Details

The solution was straightforward. The application retrieves all necessary information, including WordPress themes, designs, and other miscellaneous data. Once this data is gathered, the application configures the server and uploads everything to the now-prepared server.

    flowchart TD
    A[Application]
    B[Server]
    C[Github]
    CA[WordPress Theme]
    CB[Design Document]
    A <-- retrives --> C
    C --- CA
    C --- CB
    A --> B
  

A key feature I built into the application is its extensibility, which functions similarly to a plugin system. Each action within the application is a separate code bundle that can be executed independently. For example, if a dev team member wanted to add a new feature like “Create New Admin User,” they could develop it independently of the main codebase by following a set of guidelines. This approach allows for easy integration of new ideas, though it does come with the trade-off of increased code overhead over time. I discuss this further in the Outcome and Reflection section.

User Experience

Design: The interface is a simplified panel of buttons, driven by feature requests that streamlined design options. A simple dashboard guides the user through the process, helping to reduce development time.

The user flow is intentionally linear:

  • Select whether you are a standard user or a dev team member
  • Choose the action you want to take
  • Fill in the necessary fields for that action
  • Hit start, and the application takes care of the rest

A status box next to the start button provides user feedback, displaying console outputs such as “now installing WordPress,” along with any warnings or errors.

Outcome and Reflection

The application was warmly received, and while it met its primary goals, it also delivered additional benefits. Here’s a closer look:

Plugin System: I embraced the trade-off of increased code overhead for the flexibility the plugin system provided. The dev team was also on board with this approach. Given the diverse skill levels within the team, the plugin system offered a low-pressure environment where both junior and senior developers could contribute and personalize the application. Since the application wasn’t intended for commercial use, this setup fostered collaboration and skill development without the stringent requirements typical of production code.

I’m particularly pleased with how this turned out. In contrast to the often linear and high-pressure nature of production development, this application created a collaborative space where ideas could be realized with minimal red tape. The result was an application that built confidence, established camaraderie, and enhanced productivity for everyone involved—a win all around.

Oh, look at you!

With your fancy 2K|4K monitor.