Case study for software architect

Problem Description


We have two separate applications that we would like to integrate together. One is a WYSIWYG application for generating static websites. The other is an admin application for managing an online shopping site. We would like to be able to use the features of the Website Builder to design pages in the Webshop. In addition, we would also like to be able to manage product details (name, price, images, etc.) while updating Webshop pages in the Website Builder.

Website Builder Details

The Website Builder is a single page app written in React. It is mostly served by a monolithic backend with a few services for select features. The app follows a component-driven architecture using Redux for application state management. Each static page in a user’s website is composed of components. Each component is responsible for rendering the view within its container and for supplying the callbacks for displaying its settings panel. The settings panel is unique per component but may share various individual controls for certain
settings (eg: background color, fonts).


When the user is ready to publish their site, the publication service will generate static assets for each page. The Webshop is one component in the Website Builder. When a Webshop is included on a page, a JavaScript snippet is included in the generated HTML.

Webshop Details


The Webshop has 2 parts: the admin portion is a single page app written in KnockoutJS. It is in the process of being rewritten in React. The second portion is the public-facing shop front, also a Knockout application written in KnockoutJS. The admin application lists products, orders, and other management details. The Webshop backend is quite similar to the Website Builder – monolithic aside from a few minor services for certain features.

The documentation is HERE

Cheers


Osama

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.