Hackolade - SoftBlues

Challenge

The existing website was designed in 2016 and got manually adapted along the way as the product evolved. At some point, the look has become

stale while its non-CMS implementation limited the evolvement potential.

Thus, the initial plan of Mr. Pascal was a migration to a Git-based Headless CMS to facilitate future evolution and effortless maintenance and creation of the data.

Solution

The elegant solution was found based on Headless CMS. After the series of tweaks, we’ve made sure the outcome meets all the prediscussed requirements. Here are the key Objectives outlined by a client:

– Means of centralized management of common sections such as menus and footer;

– New menu structure to access the enlarged sitemap;

– Full website redesign to make it look up-to-date but keep the distinctive formal styling;

– Implementation of a fully block-based structure to achieve a high level of flexibility in content management;

– New tech stack to provide lightning-fast loading speed for website pages https://prnt.sc/116c9aw (these are still waiting for some final minor improvements from the SoftBLues team);

– Improved SEO capabilities which were accomplished with better markup, increased loading speed, thought-out page structure for the easier read of search engines, etc.

– Two options for editing website content: by changing the page file directly to GitHub repo or/and from the CMS admin panel;

– CI/CD with GitHub repo, AWS storage, and AWS CDN

Front end achievements

We used React with Gatsby framework, the fastest frontend technology for modern web applications.
We use a core React library along with a set of high-quality React components and plugins (like react-helmet, react-markdown, react-google-maps, etc).
We utilized the Gatsby framework combined with the most popular plugins:
gatsby-plugin-google-analytics for the smooth integration of google analytics to our site,
gatsby-plugin-mailchimp – to subscribe new email addresses via Mailchimp email list,
gatsby-plugin-sass – to provide drop-in support for Sass/SCSS stylesheets,
gatsby-plugin-webfonts – to handle cdn, base64,
self hosted webfonts, and a number of other plugins.
We also used native React hooks and the most popular tools to provide the highest page speed and SEO optimization (such as React.lazy() for secondary components, loading the external scripts after page scroll, lazy-load images for sliders)
Finally, we worked on SASS(SCSS) stylization with BEM methodology (all .scss files are sorted by names and components).

Back-end achievements

NetlifyCMS with Gatsby is responsible for the minimalistic back-end of the website and allows for easy scaling. The whole website configuration is condensed into a single YAML file to minimize the need for elaborate back-end development.
GraphQL as a query language for API to enhance the independence of front-end and back-end developers from each other.

Scaling and Security

The backend is plain, with all site’s configuration in 2 files. The backend logic applies only to page generation.
Git -> CodeShip -> AWS AutoDeploy to automate software deployment, eliminating the need for error-prone manual operations.

Technology

Team composition

Project Manager/Business Analyst
ReactJS Developer
HTML/CSS Developer
NodeJS Developer
UI/UX Designer
QA Engineer

Partnership period

May 2020 – Present