Creating a responsive website for a pet boarding company in California, USA

About the project

Wag Hotels is a chain of luxury boarding and daycare resorts for dogs based in California, USA. The company was looking for a web development team that would bring its complex project to life using innovative technologies that match key business requirements. 

Solution

The Rumble Fish team used React and Material UI to rebuild the website. The site is pre-rendered server-side and delivered through a CDN. We also delivered a custom Content Management System (CMS), and a modern back-end API built using the Serverless framework and run by an API Gateway service.

The team at Rumble Fish developed a solid back office for third-party integrations used by hotels and an innovative reservation flow for the services offered by the company across its different locations. Finally, our team created a private user dashboard which displayed the details of past and future visits.

Technology

One of our client’s key goals was functional content management on the website, together with other objectives ensuring that the site is responsive, looks great on both desktop and mobile screens, and is indexed correctly by search engines. These goals proved challenging to reconcile.

Addressing the SEO requirements

A modern, responsive site required equally innovative technology. That’s why our team used React and Material UI. In the production environment, React is rendered from the code bundle, so SEO crawlers get only the relevant JavaScript to run and evaluate. This should work well, but one look at the Google Search Console was enough to see that the SPA websites didn’t index that well.

To remedy this, our team employed an additional layer of server-side pre-rendering; a custom script written in Node.js, executed on the ECS Fargate cluster. It cycles through the known URLs and generates an index.html file with the HTML markup and the link to the code bundle of the React app. Thanks to this trick, the SEO crawler is served a readymade HTML markup for analyzing and indexing.

How does this solution impact user experience? When a user loads the page in a browser, they first see the pre-rendered content, followed up by downloading the code bundle. Once the bundle is loaded, the React app starts and undergoes the process of hydrating the DOM to initiate regular operations.

Serverless framework

Instead of choosing the commonly-used approach of having a VPS server running the back-end, our team decided to deploy the back-end code on AWS Lambdas. Using Lambdas for back-end infrastructure offers several advantages that match the unique business requirements of our client. By using a serverless approach, the company doesn’t need to take care of any server maintenance and relies on AWS to do its job.

Rapid development

React-admin is an open-source solution that allows for the rapid development of admin applications. It comes with a powerful component called “dataProvider” that ties into the back-end API service. As a result, developers can easily express relations between resources and present them to the front-end user. The AWS Cognito service keeps the user data safe and handles authentication. Our team decided to use it because it’s advisable to delegate the sensitive task of managing private information to a GDPR-compliant third-party service.

Database security

Our team implemented an RDS service running PostgreSQL and separated from the public internet with the help of a VPC. Protecting access to the database by making it available only from the VPC is a standard security feature of AWS cloud applications. The client’s legacy system previously used the MS SQL database running in some datacenter. It was available on the public internet, which could lead to a range of problems. We decided to use the PostgreSQL database and have it managed by the RDS AWS service. Thanks to an out-of-the-box RDS, we get handy features such as database backups and recovery, monitoring, and alarms. Scaling the database size in the future will be very easy.

I really like the way they thought outside the box to accommodate my requests.

Kristen Rau

CMO of Wag Hotels Inc