Project description:
My client needed a quick portfolio page, but the project was complicated by the need for content management. He wanted to independently change the text of the image on his site in order to save certain resources in the future. Since if the site was made only on pure Gatsby.js, the client would have to constantly hire a developer for small minor changes.
For the Front end side, I decided to use Gatsby.js as one of the most proven and fastest🚀 solutions on the market. But choosing the right headless cms was not an easy task. Popular solutions such as Strapi, Sanity, or Contentful look a bit bulky and inconvenient for such a small project.
Then I found Dato CMS which was a great plugin integrated into Gatsby.js. I could not even imagine how much it would make development easier for me. Since Gatsby.js is largely based on GraphQL, to get some data from Dato CMS, I needed a short useStaticQuery (Gatsby.js) function. Also, of all Headless CMS, it has the simplest and most pleasant interface, but most importantly, it has everything you need (models for repeating components, required data to be filled in, etc.).
After discussing and identifying all the main needs of the client, a Wireframe prototype was developed, then a design in Figma. Once the design was approved, the final development and testing process followed.
Build with Gatsby.js - fast website
With Gatsby.js, the website is super fast and optimized.
Easy to manage
Dato cms is very easy to configure and fits perfectly with Gatsby.js
Responsive design
The website is absolutely responsive on all devices.
Technology:
- Gatsby.js
Gatsby.js is a free and open source framework based on React that helps developers build blazing fast websites and apps.
- Dato CMS
DatoCMS is a headless CMS that gives you a central hub for managing content across all your projects.
- React.js
React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.
- GraphQL
GraphQL is an open-source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data.
- Styled Components
Styled Components is a CSS-in-JS library that enables developers to write each component with their unique styles.
Result:
In the end, we get a site with an individual design, very safe and fast, since it is a static site that receives data from the API, which is Dato CMS.
In this project, I use a convenient date cms interface, the client can change any content from images to text. The only thing that he cannot change is the natural structure of the site, that is, the design.
Why should I use this technology and not choose WordPress development?
The answer is very simple: If you want to use a unique design for your site, you will also need to develop a WordPress theme. The time spent is roughly comparable to the development on Gatsby + Dato CMS. Also the speed and security of your site will never be on par with Gatsby.js
- Project URL:
- Technology:Gatsby.js + Dato CMS
- Location:Paris, France
- Project type:Landing page
- Duration:5 day