Logo Cinquin Andy Signature

Nature Paysage Laheux

Developer Freelance - Cinquin Andy
Développeur Freelance - Logo

Project summary

A very nice project!
I've been thinking for a while that I'd like to try Payload CMS. I was already familiar with Pocketbase and Strapi, and I'd tried other CMSs, but Payload, with its promise of native integration into the project, really appealed to me.
That's why I started developing the website for Nature Paysage Laheux, a landscaper, in Next.js with Payload CMS as the backend.
A PostgreSQL database on Coolify, the site itself also on Coolify, a few environment variables, and the setup is complete: ultra simple, ultra fast, ultra practical. I drew some inspiration from Dribbble to choose "Hero" designs that I liked and designed a few myself, with AI assistance from 21st and custom components.
I tinkered with a component for the map, retrieving data from surrounding villages and towns, while creating a small algorithm to rank the most relevant ones based on size and population in order to target the referencing of these elements. Then, I created the map component with OpenStreetMap and the city's coordinates via the French government's API (which is free and open to everyone). This allowed me to easily draw the areas on the map.
In addition to this, with Payload, all you have to do is create the specific types. Here, I integrated the details of all the strings on the site directly into Payload so that everything could be modified. A nice tutorial in PDF format and a physical presentation are planned for delivery. In short, it's a complete, turnkey service. With several small points and photos taken in the field, I was able to create clean, customized elements to enable the editing of the entire site: every text, image, and element is directly editable in Payload.
I took the opportunity to code a plugin for ForVoyez and Gemini to automatically generate "SEO-proof" texts and image descriptions, which are purely technical elements that the landscaper and his wife don't need to know how to manage.
This allows them to manage the blog, edit elements directly, and add their latest work.
A project with all the best practices: motion, design, custom elements everywhere... an ultra-premium site like they don't make anymore!
In short, go and take a look for yourself, I think it looks great! :D
50 / 50

The technologies used

icon-3d
(Next.js)
icon-3d
(Typescript)
icon-3d
(Biomejs)
icon-3d
(Payloadcms)
icon-3d
(React)
icon-3d
(Googlegemini)

The sites and the associated resources.

DEVELOP YOUR PROJECTS TOGETHER

An idea, a project? I'm here to answer your questions and help you.
I'd be delighted to discuss your project with you!
Landscaping website: Next.js & Payload CMS case study