Green Custard

Super-fast B2B Jamstack Website With Gatsby js and Headless Sanity.

About The Client

Green Custard is a cloud-native professional services company and AWS Advanced Tier Services Partner, helping clients innovate and deliver value back to the end-users and customers.

Green Custard works across multiple sectors and with a broad range of client sizes, from entrepreneurs and tech start-ups to global enterprises and public sector organisations.

They are focused on the four key disciplines: IOT, Cloud infrastructure, Apps and Cloud Operations.

Challenge

When Green Custard reached us, their existing website was already built with Jamstack. The User Experience wasn’t bad, but because of the chosen tech stack, they struggle with scalability, new page creation and content management.

They wanted to get a new, one-of-a-kind website that would reflect their knowledge of the latest technologies and wide experience in that field.

Project Requirements

Easy Content Management

Super-fast website

High Scalability

Secure Data Migration

Want to Build A Super-Fast Jamstack Website?

Tell us about your challenge, and let's get the ball rolling.

talk to our expert. IT'S FREE.

Solution

We started the project with the discovery phase, where we determined all the essential components based on the customer requirements and site map.

We delivered a document covering the components and available options for each and every page, so the customer could get acquainted with the scope of work and confirm that all the requirements would be met.

The customer didn’t establish the design, so our UI designer proposed two different style scapes accordingly to the brand visual concept.

The chosen style scape was the foundation for the components library and wireframes that we created to present the UI and UX design.

The team of four was delegated for the project delivery. It consisted of the JavaScript Developer, UI developer, Project Manager and a Tester. To run the development phase smoothly, we run the daily meetings to check the work progress and quickly deal with any blockers that could impact the delivery of the sprint.

Apart from our internal meetings we met the customer every other week for status meetings to keep him up to date with the progress.

Technologies chosen for the project

Jamstack

Gatsby.js

Sanity

Netlify

Why Gatsby.js?

While choosing the tech stack, we were also considering Next.js. We found Gatsby.js more appropriate for this project because most of the Green Custard website (besides the Contact form) can be statically generated and it’s not updated very frequently.

Our general approach at Pagepro is to choose Gatsby for smaller, less frequently updated marketing websites. Gatsby allows building highly performant websites that are easy to maintain. It also allows us to use a leverage of rich plugins ecosystem.

Even though Next and Gatsby are quite similar, they differ in the use cases they are best suited for. We’ve created an article on which one to choose and when. If you’re not feeling like reading, check out the video:

Why Sanity?

Sanity was the best choice for this project because it provides full flexibility in content management. It was Green Custard’s primary requirement because employees from different departments were about to collaborate during content distribution.

Live previews were another important factor for the customer. Green Custard didn’t have this option in the previous CMS, so content management was time-consuming and ineffective. Live previews in Sanity enable you to keep an eye on the overall look of the content during creation. Just take a look:

WHY DID WE CUT THE WEBSITE’S HEAD?

We decided to go headless because this is the best solution for flexible content management in future-proof projects like this one. The headless approach decouples content management from the presentation layer, which brings many benefits, like:

  • Flexibility

  • High Security

  • Reusability

  • Easy Content Management

Delivery

We split the development process into 4 phases:

  • Initial Works

  • Static Version Development

  • Headless CMS Integration

  • Finalization

Initial Works

Initial works

  • Checking the requirements

  • Creating Project Backlog

  • Setting up testing environment

  • Headless CMS Initial configuration

OUTCOME

Complete project backlog + New look and feel of the website + blank Gatsby site running on the test URL

Static Version Development

Static Version Development

  • Preparing a basic project style guide

  • React components and core blocks creation

  • Quality Assurance

  • Project Management and Communication

OUTCOME

Complete list of static components + Core Website Pages released on Gatsby test URL

Headless CMS Integration

Headless CMS Integration

  • Data modelling

  • Integration with Jamstack website

  • Managing pages

  • Quality Assurance

  • Project Management and Communication

OUTCOME

Fully dynamic Gatsby website on test URL

Finalization

Finalization

  • Speed Optimization

  • Data migration

  • Google Tag Manager implementation

  • Technical SEO Optimization

  • Going live

  • Quality Assurance

  • Project Management and Communication

OUTCOME

Fast and flexible website on production address

Results

As a result, we provided an extremely fast website that is easily manageable by the customer's team. Jamstack approach in static sites like this provides an amazing website performance, just take a look at those stats:

Check out how does this website looks like:

  • testimonials

  • testimonials

  • testimonials

  • testimonials

  • testimonials

  • testimonials

  • testimonials

  • testimonials

  • testimonials

We chose Pagepro because they passed our technical test, and their offer matched how we wanted the website to be done. In addition, we liked the flexibility of their package. Pagepro’s team was accommodating, and they did small tasks outside of our contract.

  • James Green

    Owner & Director

  • the form

  • the form

  • the form

  • the form

  • the form

  • the form

  • the form

  • the form

  • the form

HIRE TOP JAMSTACK DEVELOPMENT COMPANY

It's always good to talk to an expert. It's free!

  • Not sure which technology to choose?

  • Need advice on the next steps?

  • Hesitating on how to plan the execution?

Book a free consultation call with one of our experts and get help with your next moves.