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.
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.