reactour VS foodadvisor

Never used it but this seems pretty popular https://github.com/elrumordelaluz/reactour

Something like this? https://reactour.js.org/

I was able in FoodAdvisor to include a Preview button in the content manager and to create a guided tour plugin using react-tour package. Without it, I should have waited for these features to be released.

Try https://reactour.js.org/ you should be able to restyle it to fit your needs.

In this tutorial I will show you how to create your own plugin on Strapi (version 3.4.6) and more precisely how to use reactour to create a guided tour which can be very useful for content managers out there who will have to master Strapi's admin to manage their content.

If you use React, try reactour. It is extremely simple to use and you can see an example of it in my open source cross browser extension - TabMerger.

We are using reactour, and we have made a guided-tour plugin in the app. You can see how it works here: https://github.com/strapi/foodadvisor/tree/master/api/plugins/guided-tour Feel free to give it a try or event contribute to it ;)

FoodAdvisor is the official Strapi demo application; you can learn a lot about Strapi by studying the repo.

💡 Tips: Instead of creating all your components from scratch, you can pick up examples directly from the strapi.io website and the official FoodAdvisor Demo.

Strapi is an open-source headless CMS. It’s 100% JavaScript and fully customizable. To see firsthand how it performs, Strapi provides an official demo app called FoodAdvisor that can be previewed on Strapi’s website or deployed locally or in the cloud.

In this guide, we'll use Strapi's demo application, Food Advisor.

Don't worry if you don't have the same result as me. Indeed everything depends on your Strapi project. I use for this tutorial our demo FoodAdvisor :)

It's true, why make an SEO plugin? I could have improved our FoodAdvisor demo application or updated our outdated tutorials on v4!

Strapi is an open-source tool written with Node.js that offers unparalleled customizations and a super-fast headless CMS. To see firsthand how it performs, Strapi provides an official demo app called FoodAdvisor that can be previewed in Strapi’s website or deployed locally or in the cloud. The FoodAdvisor app shows a listing of different restaurants and serves as a demo of the capabilities of Strapi.

It was a lot of fun to update this official demo! We hope this new version will give you a better idea of what can be achieved with Strapi. Feel free to give it a try on our website by requesting a private instance, directly on your computer, or even on Gitpod!

This is the code that is implemented on FoodAdvisor, our live demo which has a Next.js front-end. First of all we get modifiedData and layout from useContentManagerEditViewDataManager hook. The first is an object containing your entry data, and the second has more interesting information about your entry (apiID, kind of content-type, metadatas etc...)

I encourage you to send this article that I wrote to your technical team concerning some good SEO practices in Strapi. These are just the basics, feel free to go further in customization. These are practices that we have obviously used in our website as well as on Foodadvisor, our live demo.