Create holiday landing pages to feature Publix recipes. Holidays include Thanksgiving and Christmas. The client also request the consumer be able to switch between English and Spanish language.
I assisted the UX team with the wireframes in Sketch and InVision. I worked closely with the UX team to make sure there were no technical issues with the layouts and interactivity especially on mobile.
I setup the development environments in React. In addition, since the website content and recipes do not require real-time updates, I used Gatsby’s static-site generation to my advantage. GraphQL was used to pull data for the recipe pages. No CMS was used at this stage because there were a set number of recipes.
Components were used for efficient use of reusable sections on the pages.
The recipe pages were also setup with Schema.org structure data format. A little more effort but well worth it.
A multi-language (i18) plugin was used on these landing pages so the consumer can switch between English and Spanish language. All components were able to be used for both languages.
The landing pages load very quickly since all the pages are static. No necessary calls to CMS to get the content and render the pages.
Recipe search results on Google appear nicely since it is formatted accordingly to Schema.org specs. Consumers are also able to view the recipes on their smart speakers.
Thanksgiving: https://thanksgiving.publix.com/
Christmas: https://christmas.publix.com/
Note: As of this post, the framework has been converted to use Vue.js