05
Powerhouse Company is an award-winning architecture office based in Rotterdam, the Netherlands. They asked Build in Amsterdam to update their identity and create a matching website.
The Powerhouse website is build on the Node, Express on the back-end and React and Redux on the front-end. The client can use the Wordpress CMS to manage their content. Wordpress is used as a headless CMS in this stack where a custom Node gateway connects the Website to the content.
In the website we use multiple techniques for animations. A big one we use is ThreeJS to render the cloud on the homepage. This is used in combination with a custom request animation frame loop to let the 3d context respond to user input and redraw the cloud. The moment the cloud is out of sight, we remove the animation from the loop so we don't waste performance. On other parts of the website we use this same loop for scroll based animations.
Loading when needed, before it's required
A big highlight of the website the the cloud on the homepage, this features all of the projects Powerhouse decides to show on their website. For all of these cases we needed to load some essential data to show the items in the cloud and render the intro of the case itself. This way we can load the entire case data while the user is navigating from the cloud to the detail page. On desktop/laptop computer we can start with fetching the data when the user is hovering the cards.
When the user starts scrolling the case page the odds are really high that the data is loaded. This gives a seamless experience in the users eye.
Another important functionality of the Powerhouse website are the overlays. Almost every Case contains a link to either a designer overlay or to a related story. This information is fetched async when a case is loaded. This is because we don’t need the data serverside and it makes the cases easier to fetch and render on the server.
Once a visitor opens an designer overlay or story we update the url so that the user can share the link to the overlay. Another challenge of this sections was that these overlays could contain links to different overlays, and those overlays link to different one etc.
This was made a lot simpler thanks to client side rendering and Redux. Every time an overlay is opened in the TeamMember component we check in Redux if we have the data for the required data. If we do we render it and if we don’t we fetch the data we need and it’s saved in Redux.<br/>The next time we need this data we already have it and we don’t have to fetch it twice.
