[{"data":1,"prerenderedAt":84},["ShallowReactive",2],{"project-\u002Fportfolio\u002Fecommerce\u002Fgranite-setts-direct":3},{"id":4,"title":5,"archived":6,"body":7,"carousel":62,"category":63,"description":64,"displayOrder":65,"extension":66,"featured":67,"features":68,"fullImage":62,"image":75,"imageAlt":76,"meta":77,"mockup":78,"navigation":67,"path":79,"repo":62,"seo":80,"stem":81,"subhead":82,"url":22,"__hash__":83},"projects\u002Fportfolio\u002Fecommerce\u002Fgranite-setts-direct.md","Granite Setts Direct",false,{"type":8,"value":9,"toc":57},"minimark",[10,15,27,30,45,54],[11,12,14],"h2",{"id":13},"server-side-rendered-headless-e-commerce-application","Server-side Rendered Headless E-Commerce Application",[16,17,18,19,26],"p",{},"I was approached by Granite Setts Direct Ltd to develop an e-commerce website to\nsell ",[20,21,25],"a",{"href":22,"rel":23},"https:\u002F\u002Fwww.granitesettsdirect.co.uk",[24],"nofollow","granite setts in the UK",".",[16,28,29],{},"On review of their competitors websites, we felt that there was a real opportunity\nto make the online buying process faster and more enjoyable for the customer. Traditional\ne-commerce platforms felt slow and cumbersome to navigate so the aim was to create a\nfast and straight forward and uncluttered user experience.",[16,31,32,33,38,39,44],{},"After our initial discussions with the client we agreed that we would use Vue to create\nthe UI and the ",[20,34,37],{"href":35,"rel":36},"https:\u002F\u002Fnuxtjs.org\u002F",[24],"Nuxt JS"," framework to take advantage of server-side rendering. In order to\nintegrate the e-commerce functionality without the weight of a full blown E-Commerce\nframework, we integrated the ",[20,40,43],{"href":41,"rel":42},"https:\u002F\u002Fwww.elasticpath.com\u002F",[24],"ElasticPath"," headless E-Commerce API which made the overall site very\nlight-weight, fast and responsive. This also allowed us to take full control of the\nflow of the buying process.",[16,46,47,48,53],{},"Alongside the shop, the site's pages and blog are managed in\n",[20,49,52],{"href":50,"rel":51},"https:\u002F\u002Fprismic.io\u002F",[24],"Prismic",", a headless CMS, so the team can keep content up to\ndate and publish new articles without needing a developer.",[16,55,56],{},"To design the site I worked closely with the client to create a clean, uncomplicated\nvisual experience to allow to customer to focus on the product itself.",{"title":58,"searchDepth":59,"depth":59,"links":60},"",2,[61],{"id":13,"depth":59,"text":14},null,"ecommerce","A headless ecommerce website application designed and developed for Granite Setts Direct Ltd using a headless E-Commerce API",1,"md",true,[69,70,71,37,43,72,73,74],"HTML5","Tailwind CSS","Vue JS","Netlify","Prismic CMS","Ecommerce","\u002Fimages\u002Fprojects\u002Fweb-application\u002Fgranite-setts-direct.jpg","Granite Setts Direct - Headless Ecommerce Website",{},"\u002Fimages\u002Fprojects\u002Fweb-application\u002Fgranite-setts-direct-mockup.png","\u002Fportfolio\u002Fecommerce\u002Fgranite-setts-direct",{"title":5,"description":64},"portfolio\u002Fecommerce\u002Fgranite-setts-direct","E-Commerce Website","znOPu-gXiRkiRmKtJKlT17lAHBMdzKdhwH6aNb_oCwg",1794400655195]