Close

Let's talk about your project

This message will be delivered directly to the team you have chosen. The information you provide on this step helps the team to get to you fast.

Moving To Jamstack With Headless WordPress & Gatsby JS
PagePro
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Moving To Jamstack With Headless WordPress & Gatsby JS

PagePro
for
FLAT WORLD

Build an ultra performant & converting website that meets high demand of tech-savvy visitors to increase company revenue.

ABOUT THE FLAT WORLD
How to connect the world’s best IT Specialists with ambitious and fast-growing companies?

Flatworld is on a mission to disrupt the world of remote work and enable companies to build and scale their business by finding them the best match for their needs and the company’s DNA.

They hone a broad understanding of the psychology of candidates and organizations, stringent technical vetting, and a killer algorithm that they have developed for automating and accelerating the locating and matching of remote top amazing talent for their clients.

Flatworld matching process is aimed to be seamless, fast, easy, and spot-on.

OUTGROWING MONOLITHIC WORDPRESS
FlatWorld customers are fast growing startups, and a slowly working website was not something that could exist in this ecosystem.

On a first conference call Gilad pointed the main issues with the current FlatWold WordPress site:
- Decreasing conversion rates because of low performance and bad user experience of outdated user interface.
- Decreasing organic traffic because of performance issues and weak technical SEO optimisation.
- Low Google PageSpeed Insights results and no chances to improve on the current WordPress site
- Outdated, hard to manage technology stack, full of weighty plugins like Elementor

ADOPTING A HEADLESS WORDPRESS ARCHITECTURE
FlatWorld was using WordPress for the last several years and they liked many of the existing functionalities.

That’s why we decided to keep WordPress working as a headless CMS for the new JAMstack website.
On top of that, saying with WordPress was also a good idea, as we didn’t have to worry about any content migration.

ADMIN PANEL & ACF PRO PLUGIN
Almost all marketers and content editors know WordPress admin panel. This is because it’s popular and super easy to use.
ACF Pro plugin allows to quickly enhance the admin panel by adding new editable features in a flexible way. It also provides API endpoints that can be easily integrated with JAMstack websites.

JOB LISTINGS PLUGIN
Thanks to Job Listings plugin, Flatworld can manage his Job board very easily.
We had to enhance the plugin a little bit to add some new fie wlds and also make them accessible in the API.

YOAST SEO PLUGIN
The most popular SEO optimisation plugin allows to adjust title, meta tags and open graph tags very easily.

Flatworld wanted to keep this flexibility in a new JAMstack website.
We had to include Yoast SEO data in GraphQL responses.

Why WordPress?
- User-friendly
- Huge open-source community
- Used by over 30% of Web
- Easy to operate

Why Gatsby?
- Great User Experience
- Easy to scale up down
- Great Performance
- Huge open-source community

PROJECT DELIVERY
What’s important is the fact that Flat World needed all this to be done in a timely manner.
We quickly assembled tema needed, sit down on the internal meeting and made a step by step scope and execution plan, made out the following steps:

STEP 1 KICK OFF
First step was to prepare a project backlog and set up the infrastructure.
We’ve listed all data sources (editable contents) and made sure we can develop a solid API to feed the Gatsby Website.
Together with the client we decided to use Netlify for hosting of the JAMStack website and select Kinsta as a managed WordPress solution.

STEP 2 CUTTING OFF THE WORDPRESS HEAD
We’ve updated the WordPress to the latest version and cleaned it up by removing old custom code and non mandatory plugins.
At this stage we also enabled GraphQL API for core WordPress features and also for our bespoke enhancements.
The deliverable of this stage was a modern WordPress headless CMS ready for feeding a brand new JAMstack website.

STEP 3 DESIGN HANDOFF
We were included in the UX & UI design phase and we submitted some feedback to make sure that the final effect will be aligned with our demands.
After design delivery, Michal - our UI developer double checked all the files to be sure that based on that we can produce a library of design consistent, performant and reusable React components.

STEP 4 DEVELOPING JAMSTACK GATSBY STATIC WEBSITE
Usually we start developing a JAMstack website by creating a boilerplate containing TypeScript, styled-components and Preact. This magic mix allows us to produce a lightweight and performant Gatsby Website.
After the boiler plate we started to produce React (Preact) components, following atomic design principles.
When the user interface was ready we could start preparing custom data sources to get contents from headless WordPress and build whole Gatsby pages and routes.

STEP 5 OPTIMIZATION
On this stage we did on-site technical SEO including supporting headless Yoast SEO plugin, Rich Snippets implementation and resolving all issues displayed in SEO & Accessibility tabs in Lighthouse Audit tool. While working with a headless WordPress you need to remember about setting right redirects from old to new URLs on JAMstack website and also disallowing robots to index a headless WordPress API.

STEP 6 SAFE RELEASE
FlatWorld is an active business with a strong network of customers and freelance developers willing to work with. That’s why the release had to be well planned and super safe. After the launch, we ran a bunch of audits (Ahrefs, Seo Frog), monitored communications in Google Search Console and metrics in Google Analytics.
All warnings and issues were resolved in urgency, making sure the user experience of visitors is high and currently running paid ad campaigns are trackable and profitable.

Main technology

Gatsby JS
Headless CMS

Industry

Human resouces

Supporting technologies

Gatsby JS
Headless Wordpress
Netlify
Preact
GraphQL
Styled Components

Scope

JamStack development
Gatsby JS development
SEO optimization
Wordpress as a Headless CMS

Rates

$$

Other project delivered by

PagePro

What is TeamFinder?

TeamFinder is a showcase directory for companies delivering solution based on JavaScript.
There’re thousands of technology companies and no place to quickly find and evaluate them. TeamFinder extracts what’s best at each company - the teams that work hard on projects.

Why focus on team?

An established team has its energy - everybody knows who is the best at and they together can deliver outstanding results. It’s like a music band - Malcolm Gladwell once explained the success of The Beatles using the 10k hours rule.