<!--
title: General Architecure
description: 
published: true
date: 2021-05-17T20:59:30.600Z
tags: 
editor: undefined
dateCreated: 2021-02-01T22:58:30.946Z
-->

<p>This&nbsp;website was outsourced and built by Pixel2Html. It's using&nbsp;Wordpress&nbsp;as&nbsp;a&nbsp;CMS&nbsp;and&nbsp;using&nbsp;the&nbsp;REST&nbsp;endpoints&nbsp;it&nbsp;generates:&nbsp;https://developer.wordpress.org/rest-api/&nbsp;&nbsp;For&nbsp;the&nbsp;front-end.&nbsp;We&nbsp;first&nbsp;built&nbsp;the&nbsp;components&nbsp;using&nbsp;Sass,&nbsp;Pug&nbsp;and&nbsp;jQuery&nbsp;which&nbsp;in&nbsp;turn&nbsp;were&nbsp;translated&nbsp;to&nbsp;React&nbsp;Components.&nbsp;The&nbsp;backbones&nbsp;of&nbsp;the&nbsp;react&nbsp;stuff&nbsp;it's&nbsp;built&nbsp;with&nbsp;Next.js&nbsp;​https://github.com/zeit/next.js&nbsp;&nbsp;It's using wpapi https://www.npmjs.com/package/wpapi to perform the necessary queries. Components&nbsp;hold&nbsp;all&nbsp;the&nbsp;stateless&nbsp;rendering&nbsp;functions&nbsp;(meaning&nbsp;they&nbsp;don't&nbsp;do&nbsp;anything&nbsp;else&nbsp;than&nbsp;rendering&nbsp;themselves&nbsp;and&nbsp;don’t&nbsp;deal&nbsp;with&nbsp;ajax&nbsp;or&nbsp;anything&nbsp;else)&nbsp;&nbsp;Containers&nbsp;wrap&nbsp;a&nbsp;bunch&nbsp;of&nbsp;containers&nbsp;together&nbsp;by&nbsp;page,&nbsp;they&nbsp;also&nbsp;pass&nbsp;the&nbsp;data&nbsp;the&nbsp;components&nbsp;need&nbsp;which&nbsp;is&nbsp;obtainer&nbsp;in&nbsp;the...&nbsp;&nbsp;Pages&nbsp;here&nbsp;we&nbsp;perform&nbsp;the&nbsp;initial&nbsp;ajax&nbsp;requests&nbsp;and&nbsp;transform&nbsp;them&nbsp;into&nbsp;data&nbsp;which&nbsp;we&nbsp;pass&nbsp;to&nbsp;the&nbsp;containers&nbsp;so&nbsp;they&nbsp;pass&nbsp;it&nbsp;to&nbsp;the&nbsp;components.&nbsp;&nbsp;All&nbsp;the&nbsp;data&nbsp;flow&nbsp;is&nbsp;unidirectional&nbsp;top&nbsp;to&nbsp;bottom&nbsp;so&nbsp;its&nbsp;easier&nbsp;to&nbsp;reason&nbsp;about.&nbsp;&nbsp;This&nbsp;also&nbsp;means&nbsp;that&nbsp;just&nbsp;creating&nbsp;a&nbsp;new&nbsp;page&nbsp;on&nbsp;wordpress&nbsp;doesn’t&nbsp;mean&nbsp;a&nbsp;new&nbsp;page&nbsp;is&nbsp;added&nbsp;on&nbsp;the&nbsp;frontend&nbsp;since&nbsp;the&nbsp;frontend&nbsp;is&nbsp;de-coupled&nbsp;from&nbsp;the&nbsp;CMS.&nbsp;So&nbsp;pay&nbsp;attention&nbsp;to&nbsp;that&nbsp;kind&nbsp;of&nbsp;details.&nbsp;&nbsp;To&nbsp;prevent&nbsp;500&nbsp;page&nbsp;errors&nbsp;more&nbsp;conditional&nbsp;logic&nbsp;should&nbsp;be&nbsp;added&nbsp;to&nbsp;when&nbsp;an&nbsp;undefined&nbsp;option&nbsp;is&nbsp;presented&nbsp;the&nbsp;rendering&nbsp;doesn't&nbsp;break.</p>
<p>&nbsp;&nbsp;</p>
<figure class="image"><img src="/content.png"></figure>