I used to use my own CMS before but figured the best way to learn React was by re-coding my website with it. And I chose Cockpit as my back-end. I truly love it!
2 Likes
i have a question?
did you built a HTML first and then integrate it into cockpit?
The HTML can be built any time, the key is the data source (API endpoints).
You can build your HTML and make it pixel-perfect with some dummy data, then fetch the real data from API by using Cockpit or etc.
Or you can first get your API (or your Cockpit in our case) first and have your data ready, build your front-end and start consuming data right away. No difference.
Thanks for sharing @zeknoss, well done! It looks amazing.
Only a few doubts regarding the FE bits, you did it in plain React (e.g. using create react app)? Or you used a static generator? Asking because it can be a caveat for SEO…
Also would be better to transform urls like https://burakgurbuz.com/en/projects/5e8d20246ca073666527ba92/aircosy by removing cockpit ids from the URL
1 Like
Hi Paulo,
I created the project using create-react-app tool and it’s got deployed on Netlify automatically from a certain branch.
The SEO is not going to be a problem since I also supply a sitemap to Google and Yandex using another PHP consumer that connects to the cockpit.
I think I can remove the ID and just fetch the data using a slug filter. This is just a two days’ work learning both the React and Cockpit, so I apologize for some quirks 
Thank you for your kind words, cheers!
1 Like
Yes, but for the best SEO optimization a sitemap is not enough, that’s the main issue with client side applications, for example if you try to share the a page in twitter or facebook they will not be able to digest your metatags. Unless you have a pre-rendering service (e.g. https://docs.netlify.com/site-deploys/post-processing/prerendering/) or you build your pages with a static site generator (e.g. Gatsby), SEO will be always an issue. Check what happens for example by using https://cards-dev.twitter.com/validator.
In such case for two days work is already something.
1 Like
Oh, I see your point Well, I’ve given up that amount of SEO long time ago. Most of my business is come through whisper-marketing or my CV available on several platforms.
My only concern right now is to show my client my talents in coding and design.
If I were to promote a product I would go with a Nuxt project or even better, a PHP+Vue project.
Thanks again for your kind words pal!
Looks very good. I actually did the exact same thing (https://atcs.de) and I truly love React as well as Cockpit as a CMS.
Can you maybe also give some insights on how you structured the data in Cockpit? Like are you using Singeltons or Collections and how do you “combine” them?
1 Like
Hi Terence,
Thank you for your kind words. Yes, I love Cockpit however coding with React after working with Vue.JS felt like a downgrade
About my usage case of Cockpit, my setup is pretty simple.
I have one collection for the projects which has some multi-lingual and mono-lingual fields. I populate the projects content from that colletion.
And for singletons I have a “settings” singleton, in there I store the “About Me” content as a multi-lingual HTML format, store the CV data as an asset link and also setup a field called “social links” which is in repeater format with each item having multiple fields (title, url).
That’s it.