Selection Tool App Architecture

Overview

The Motor Selection App is a single-page application (SPA) built using React. It's integrated with a WordPress site using the ReactPress plugin. The app recommends suitable motors to customers based on their input through various calculations and comparisons with motor data located in the assets folder.

Core Technologies

React

React is the core library used for building the user interface of the application. The UI is built using React components, which are reusable pieces of code that can be used to build user interfaces.

WordPress and ReactPress

The app is hosted on WordPress using the ReactPress plugin. ReactPress allows us to embed the React app within the WordPress environment without creating a custom WP theme.

Recharts

Recharts is used for creating drawing graphs within the app. It is a composable charting library built on React components and allows for the easy creation of interactive graphs.

Tailwind CSS and Headless UI

Tailwind CSS is a utility-first CSS framework used for building custom designs. Headless UI is utilized for creating accessible UI components without styles, which can then be styled using Tailwind CSS.

Application Structure

All core logic for the application is located in the app.js file. This includes filtering, scoring, energy calculation, etc.

Component Hierarchy

Assets Folder

The assets folder contains essential data for the application, including motor dyno datasheets and custom efficiencies. This data is fetched and used in various parts of the application, such as generating graphs with Recharts. There are three subfolders within the assets folder:

• dyno: Contains the dyno datasheets for each motor.
• graphData: Contains the data used to generate graphs.
• catalog: Contains all the catalog data for every motor.