Shapeshift Technology Stack Overview

This document provides an overview of the technology stack used in Shapeshift. The stack is designed to be highly adaptable and scalable, with a focus on delivering a robust, performant, and seamless learning experience.

Core tech stack

Shapeshift is made up of several components that together form a comprehensive yet flexible system. Each subsystem has a distinct purpose and feature set.

Front end

React

Our primary JavaScript library for building user interfaces. React enables us to create engaging and responsive web applications using a component-based architecture.

Key advantages:

  • Speed: The virtual DOM improves rendering performance.
  • State management: Scalable and efficient through React’s internal mechanisms or external libraries.
  • Industry adoption: A trusted, well-supported ecosystem.
  • Rich community and ecosystem: A vast set of tools, packages, and documentation.

Back end

Node.js (Strapi)

We use Strapi, an open-source, Node.js-based headless CMS, as the backbone of Shapeshift. While Strapi uses Express.js under the hood, our direct interaction is primarily with Strapi’s admin and API layers, making content management and distribution straightforward.

Key advantages:

  • Flexibility and customization
  • Headless architecture
  • API-first design with auto-generated but fully customizable endpoints
  • Extensible plugin system
  • Active community and long-term support

Custom Shapeshift libraries

Both the front end and back end make use of internally maintained libraries developed by Plume. These libraries support the React and Strapi repositories that are handed over to clients.

NPM (Node Package Manager) manages these libraries for installation, versioning, and dependency control. This approach ensures compatibility across any platform capable of hosting JavaScript services.

Benefits:

  • Continuous updates and improvements from the Shapeshift team
  • Reusability and time savings
  • Tested across multiple client implementations
  • Easy customization
  • Plug-and-play flexibility
  • Future potential for community-driven plugins

Complementary technologies

In addition to the core stack, we use several tools to enhance development, maintain quality, and standardize workflows:

  • TypeScript: Provides strong type-checking and a stable coding environment. All exposed library elements include definitions for IntelliSense and validation.
  • Jest: The preferred JavaScript testing framework, ensuring reliability and code quality.
  • Rollup: A module bundler used primarily for building shared libraries and compiling modular code into production-ready bundles.
  • ESLint: Enforces consistent coding style and detects programming issues early.
  • Babel: Used via Create React App, allowing us to use next-generation JavaScript features.
  • Webpack: Managed by Create React App, it handles the bundling and optimization of front-end assets.

Deployments

Shapeshift can be deployed anywhere. Because JavaScript is universally supported, clients have the flexibility to host applications in environments that best fit their needs—ranging from traditional servers to modern cloud platforms.

Version control

Both the front end and back end repositories use Git for version control, enabling efficient collaboration, history tracking, and rollback capabilities. Git ensures complete visibility into code changes over time, supporting debugging and iterative development.

Package hosting

Shapeshift libraries are hosted on npm, adhering to industry standards and ensuring easy integration and dependency management.

Versioning

We use Semantic Versioning (SemVer), structured as MAJOR.MINOR.PATCH :

  • MAJOR: Breaking changes
  • MINOR: Backward-compatible new features
  • PATCH: Backward-compatible bug fixes

This structure gives teams precise control over dependency management and safe upgrade paths.

Release communications

We maintain clear communication through release channels. Clients are notified of new features, bug fixes, and security patches through release notes, helping them make informed decisions about updates.

Rollbacks

Rollbacks are straightforward using Git and npm.

  • Git: Revert to any previous commit or branch.

  • npm: Switch between dependency versions.

    We recommend performing a database backup before any major release for additional safety.

Dependencies

Shapeshift is a web-based solution built on React and Node.js. Dependencies can be hosted on any compatible infrastructure, allowing for high flexibility and scalability.

Core dependencies

  • React: Primary JavaScript library for the user interface.
  • MUI: Styling framework for consistent design and components.
  • tss-react (TSS): TypeScript styling solution integrated with MUI.
  • npm: Manages package installation, version control, and dependencies.
  • Strapi: Headless CMS for flexible content management and delivery.

Development tools

  • Jest: Testing framework.
  • Rollup: Module bundler for library builds.
  • ESLint: Code linting and formatting.
  • Babel: JavaScript compiler for modern syntax support.
  • Webpack: Bundler managed through Create React App.

This list covers the primary technologies currently in use. Additional tools may be integrated as project requirements evolve.