{"componentChunkName":"component---src-pages-contentful-projects-title-tsx","path":"/hiempsal-e-commerce/","result":{"data":{"contentfulProjects":{"id":"71ffed32-ff2c-5696-bbae-64ad70376c0a","title":"Hiempsal E-commerce","isFreelanceWork":true,"thumbnail":{"gatsbyImageData":{"images":{"sources":[{"srcSet":"//images.ctfassets.net/zk1zaxgr0lvi/2amjoO9j2wJIj0hxUgo4F6/186ac9b1ef143c802548711b31eae4e1/Frame_4.png?w=750&h=537&q=50&fm=webp 750w,\n//images.ctfassets.net/zk1zaxgr0lvi/2amjoO9j2wJIj0hxUgo4F6/186ac9b1ef143c802548711b31eae4e1/Frame_4.png?w=1080&h=773&q=50&fm=webp 1080w,\n//images.ctfassets.net/zk1zaxgr0lvi/2amjoO9j2wJIj0hxUgo4F6/186ac9b1ef143c802548711b31eae4e1/Frame_4.png?w=1366&h=978&q=50&fm=webp 1366w,\n//images.ctfassets.net/zk1zaxgr0lvi/2amjoO9j2wJIj0hxUgo4F6/186ac9b1ef143c802548711b31eae4e1/Frame_4.png?w=1400&h=1002&q=50&fm=webp 1400w","sizes":"100vw","type":"image/webp"}],"fallback":{"src":"//images.ctfassets.net/zk1zaxgr0lvi/2amjoO9j2wJIj0hxUgo4F6/186ac9b1ef143c802548711b31eae4e1/Frame_4.png?w=1400&h=1002&q=50&fm=png","srcSet":"//images.ctfassets.net/zk1zaxgr0lvi/2amjoO9j2wJIj0hxUgo4F6/186ac9b1ef143c802548711b31eae4e1/Frame_4.png?w=750&h=537&q=50&fm=png 750w,\n//images.ctfassets.net/zk1zaxgr0lvi/2amjoO9j2wJIj0hxUgo4F6/186ac9b1ef143c802548711b31eae4e1/Frame_4.png?w=1080&h=773&q=50&fm=png 1080w,\n//images.ctfassets.net/zk1zaxgr0lvi/2amjoO9j2wJIj0hxUgo4F6/186ac9b1ef143c802548711b31eae4e1/Frame_4.png?w=1366&h=978&q=50&fm=png 1366w,\n//images.ctfassets.net/zk1zaxgr0lvi/2amjoO9j2wJIj0hxUgo4F6/186ac9b1ef143c802548711b31eae4e1/Frame_4.png?w=1400&h=1002&q=50&fm=png 1400w","sizes":"100vw"}},"layout":"fullWidth","width":1,"height":0.7157142857142856,"placeholder":{"fallback":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='287'%20viewBox='0%200%20400%20287'%20preserveAspectRatio='none'%3e%3cpath%20d='M235%202h-2c-1-2-1%200-1%203h-2v1l-1%201v2l-2%202c1%201%201%201%200%200l-1%201c1%201%200%201-1%202l-2%201c1%202-1%204-4%204-1%201%201%201%204%201l-8%201%2072%201h88c1%201%202%20238%200%20241%200%202-9%202-85%202a15284%2015284%200%2000-240%203l-4%202h-1v1l-1%201v1h-2v3l-1%202-2%202-1%202-1%201-1%201h-1v1c-2%201%20167%202%20271%202h94V0h-82c-77%200-83%200-83%202M100%2024c-1%204-2%2052-1%2055s3%204%2037%2013l29%208c6%202%206%203%206-28%200-18-1-28-2-29l-67-21-2%202m2%2028l1%2027%204%201a298%20298%200%200025%206l-4-1-1-6c0-5%200-6%202-6l2%202c0%201%201%202%202%201%203-2%207%200%207%204%200%203%200%203-1%201-1-1-2-2-3-1v1l1%202%202%201v3c-2%202-2%202%200%202h4c-2-1-3-5-1-10%200-2%204-1%207%202l3%201c2-1%202%200%202%205%200%204%200%205-2%205l6%202v-1c-1%200-2-2-2-6-1-7-1-7%204-5l6%202c2%200%202%201%202%206l-1%206c-1%201-1%201%201%201l1-26-1-26a646%20646%200%2000-65-20c-1-1-1%205-1%2027m127-23v3l-3%209a5013%205013%200%2000-10%2031c-1%202%202%204%209%207%208%204%2010%204%2011%200l1-2%205%202c6%204%209%204%2010%201l1-3%205%203c6%203%209%203%2010-1l1-2%205%203c8%204%208%204%2013-18%206-24%206-22-1-27-6-3-9-4-10-1%200%205%200%205-1%204%200-2-10-7-12-7l-2%204-1%205a456%20456%200%2000-8%2024l-1-2-1%202v3l-1-3c-1-3-2-4-5-4-5-1-5-1-2-11%202-9%202-9%204-7%201%202%202%202%202%201l1-1%201%201c-1%202%202%203%203%203%201-1%203-10%202-11%200-3-4-4-6-3h-2c1-2%200-3-1-1-1%201%200%202%202%204%204%204%204%204%201%203-2%200-3-1-3-2%200-2-1-2-2%201s-1%203-1%201c0-3%200-4-4-6l-10-3m106%204c-4%205-4%205-6%203l-2-3-2-1-1%202c1%203-2%206-4%206-3%200-4-3-4-6%200-2-1-2-3-2h-3v7l-1%209-1%204c0%204%200%204%204%204l7-1%2013-2h11V41l1-12h-2l-7%204M56%2046L26%2060l-2%2029c0%2033-1%2032%208%2029l54-19%204-2V66c0-31-1-32-2-32L56%2046m0%203L27%2061l-1%2028v27l3-1%2053-19%205-2V66l-1-29-30%2012m-1%2018c-1%201-3%202-4%201-1%200-3%2011-2%2012%202%200%209-3%2010-5%201-8%200-10-4-8m257%205v1l-2%201c-1%200-2%201-2%203v2h32v-5h-14l-13-1v-1h-1m10%2014v18h4l4-1V80h-8v6m-122%208v10h25V83h-25v11m132-2c1%2012%201%2012%207%2012%205%200%207-1%204-2-2-1-2-3-2-10v-9h-9v9m-37-6c-8%202-8%202-8%208l-4%204c-4%202-5%201-5-3%201-11%201-11-12-9l-6%201-4%207c-5%2010-5%2010-1%2010%203%200%203-1%205-3l1-3v3c-1%203-1%203%203%203%203%200%204%200%204-3%200-4%201-4%201%200%200%203%200%203%205%203l4-1h1c3%203%2021%200%2018-3h2l1-1%202-1c0-4%201-4%202-5l1-5c0-5%200-5-10-2m-63%208v8l-3%201%206%201c12%200%2014-1%2014-5v-3l-6-1h-5v-4c0-4-1-5-5-5l-1%208m80-7l-1%207-1%208c-4%201-2%202%203%202%206%200%207-2%207-12v-6h-4l-4%201M36%20136l2%2045c1%201%2066-1%2067-1l-1-23v-22H70l-34%201m65%200l-32%201H38v10l1%2021%201%2010h10l53-2a222%20222%200%2000-2-40m211%2010l-34%205c-1%201%200%207%204%2023l5%2022-3%2011-3%2012-7-7c-5-7-9-10-9-7a393%20393%200%200031%2038c2%200%201-3-3-7-2-2-3-5-2-5l33%2012c30%2011%2033%2012%2035%2011%201-2%208-25%2013-49%203-14%203-16-2-16h-2l-1-14v-14l-8-1h-8l-1-8c-2-8-3-10-5-10l-33%204m-142%204l-33%207a724%20724%200%20008%2045c-2%201-7%2013-6%2015l3-6c2-6%202-7%205-7l61-4-2%2011-2%2010h-33c-32%200-33%200-32-2a244%20244%200%2001-13%2028l35%203%2035%203%207-2c6-2%206-2%204-3h38l-2-10a420%20420%200%2001-8-40c-1-1-1-7%201-23l3-23-16%202-16%203-2-7-1-7-34%207m32%201c0%202-4%203-15%205-6%200-6-1-2%2022l4%2017h10l11-1a445%20445%200%2000-8-43m-46%206c0%201-1%202-3%202-12%203-13%203-13%205l1%204h1l7-2%207-2%202%201-7%202c-6%200-7%200-6%202h14l-8%202-6%201%202%201h12l-8%201c-5%201-6%201-5%202l8%201h5l-6%201c-4%200-5%200-4%201s3%202%207%201c5%200%205%200%202%201l-8%201c-4-1-5-1-3%202%202%201%203%201%2012-1l3%201-8%202c-8%200-8%201-7%206%200%203%200%204%201%203l3-1c2%200%202%202%200%203-4%200-3%201%202%201l14-2c-1%200-2-4-6-27l-2-12c1-1%201-1-1-1l-2%201m137%2019l-10%2046c0%203%203%204%2017%209a5557%205557%200%200156%2020l2-4%2013-53c0-2%203-1-52-14-25-6-25-6-26-4M39%20186l-1%201c-1%200-15%2042-14%2043l60%2017a259%20259%200%200014-43%2010263%2010263%200%2001-60-18m259%2010l-3%204c-3%200-2%201%203%204l5%203%202-3%202-4%201-2c0-2-1-3-7-4-2-1-2-1-3%202m21%208c-3%205-3%209%201%208h1l2%201%203%201%204%201c1-2%204-9%203-10%200-2-5-3-6-2h-1l-1-2h-2c-1-2-2-1-4%203m-121%203h-6l-1%204-1%205%207%201h6l2-5c1-6%201-6-7-5m-21%203c-3%207-3%207%204%207s7%200%208-3l1-4c0-2%200-2-1-1h-3c-2-2-8-1-9%201m169%201c-1%201-2%203-1%205%201%204%201%204%202%203l2%202h4l1%201c2%200%206-6%205-7l-1-3-1-2-2-1c0-2-7-1-9%202'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e"}},"file":{"url":"//images.ctfassets.net/zk1zaxgr0lvi/2amjoO9j2wJIj0hxUgo4F6/186ac9b1ef143c802548711b31eae4e1/Frame_4.png"}},"content":{"tags":["Shopify","Nextjs","Responsive"],"stacks":["Nextjs","Typescript","Tailwind","MongoDB","React Testing Library","Cypress","Vercel"],"github_link":"https://github.com/Allek97/hiempsal","app_link":"https://hiempsal.ca"},"description":{"description":"Fully functional e-commerce online shop powered by Shopify Storefront API and my own nextjs express server. You have access to many functionalities such as authentification, cart,checkout, adding reviews, asking questions, wishlist, recently viewed products and a fully customizable account with your order history and more. It's mainly built using nextjs and typescript with a scalable, reusable and tested code with a modern UI."},"core":{"raw":"{\"nodeType\":\"document\",\"data\":{},\"content\":[{\"nodeType\":\"heading-1\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"What I made 💁‍♂️\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Fully functional e-commerce online shop powered by Shopify Storefront API and my own nextjs express server. You have access to many functionalities such as authentification, cart,checkout, adding reviews, asking questions, wishlist, recently viewed products and a fully customizable account with your order history and more. It's mainly built using nextjs and typescript with a scalable, reusable and tested code with a modern UI.\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"heading-1\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"What I used 🔷\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"unordered-list\",\"data\":{},\"content\":[{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"1. Nextjs/Typescript\",\"marks\":[{\"type\":\"italic\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"\\nI used Nextjs with typescript in this website to build the user interfaces and my own server API.\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"2. Tailwind/Emotion\",\"marks\":[{\"type\":\"italic\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"\\nI mainly used tailwind and emotion styled-components to design this e-commerce website.\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"3. React Testing Library\",\"marks\":[{\"type\":\"italic\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"\\nI used RTL for \",\"marks\":[],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"unit and integration testing\",\"marks\":[{\"type\":\"bold\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\".\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"4. Cypress\",\"marks\":[{\"type\":\"italic\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"\\nI used Cypress to write \",\"marks\":[],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"E2E tests\",\"marks\":[{\"type\":\"bold\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\" for authentication and payment.\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"5. CircleCI\",\"marks\":[{\"type\":\"italic\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"\\nCreate and maintain fully automated \",\"marks\":[],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"CI/CD\",\"marks\":[{\"type\":\"bold\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\" pipeline for code deployment using \",\"marks\":[],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"CircleCI.\",\"marks\":[{\"type\":\"bold\"}],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"6. MongoDB/Mongoose\",\"marks\":[{\"type\":\"italic\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"\\nI used MongoDB with mongoose to store and manipulate the data coming from my API such as reviews, wishlist, questions and more.\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"7. Vercel\",\"marks\":[{\"type\":\"italic\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"\\nI deployed it on Vercel.\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"8. Shopify Storefront API\",\"marks\":[{\"type\":\"italic\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"\\nThis website is mainly powered by the Shopify to handle the main functionalities such as products, cart, checkout, customers and more.\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"9. SWR\",\"marks\":[{\"type\":\"italic\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"\\nI've used SWR to manage fetching, caching and revalidating data that is coming from the server.\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"10. React Hook Form\",\"marks\":[{\"type\":\"italic\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"\\nExtensively used RHF for form validation.\",\"marks\":[],\"data\":{}}]}]}]},{\"nodeType\":\"heading-1\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"Finally 😎\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"During the process of building this website I've learned how to write cleaner, reusable and scalable code. I've learned how to write unit and integration tests using react testing library and implement end to end tests with cypress.\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"I dove deeper into react and leveraged all the benefits of nextjs such as using server-side rendering (getSeverSideProps) and static site generation (getStaticProps/getStaticPaths) to generate content on the server which optimizes SEO and performance. I took advantage of nextjs API routes to write my own rest API directly in the framework with express and mongoose.\",\"marks\":[],\"data\":{}}]},{\"nodeType\":\"blockquote\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"I also implemented a scalable and reusable hook architecture to handle the data coming from the server either from shopify storefront API or my own rest API. There are two types of server-side data handling hooks:\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"ordered-list\",\"data\":{},\"content\":[{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"1. SWRHooks : \",\"marks\":[{\"type\":\"italic\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"Fetches the data from the server and manipulate it with SWR which gonna stale (cache data with a unique key) and refetch (revalidate.) it. \",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"embedded-asset-block\",\"data\":{\"target\":{\"sys\":{\"id\":\"2iOoaIwG27TkoMIeq9Ap7E\",\"type\":\"Link\",\"linkType\":\"Asset\"}}},\"content\":[]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"embedded-asset-block\",\"data\":{\"target\":{\"sys\":{\"id\":\"2GynFNnzSStfKwKBNkGc8O\",\"type\":\"Link\",\"linkType\":\"Asset\"}}},\"content\":[]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"2. MutationHooks : \",\"marks\":[{\"type\":\"italic\"}],\"data\":{}},{\"nodeType\":\"text\",\"value\":\"Used to modify server-side data (add products, delete review, etc.) which mutate the SWRHook that was caching the specific data.\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"embedded-asset-block\",\"data\":{\"target\":{\"sys\":{\"id\":\"7eupvvzdVVwuvV2N44Xn3K\",\"type\":\"Link\",\"linkType\":\"Asset\"}}},\"content\":[]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"\",\"marks\":[],\"data\":{}}]}]},{\"nodeType\":\"list-item\",\"data\":{},\"content\":[{\"nodeType\":\"embedded-asset-block\",\"data\":{\"target\":{\"sys\":{\"id\":\"2UF01BdTtdLBtJgnknoLtr\",\"type\":\"Link\",\"linkType\":\"Asset\"}}},\"content\":[]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"\",\"marks\":[],\"data\":{}}]}]}]},{\"nodeType\":\"paragraph\",\"data\":{},\"content\":[{\"nodeType\":\"text\",\"value\":\"\",\"marks\":[],\"data\":{}}]}]}","references":[{"contentful_id":"2iOoaIwG27TkoMIeq9Ap7E","title":"use-customer-code","description":"useCustomer: Will handle customer query then call useSWRHook to fetch and cache data","gatsbyImageData":{"images":{"sources":[{"srcSet":"//images.ctfassets.net/zk1zaxgr0lvi/2iOoaIwG27TkoMIeq9Ap7E/3963159c6cf4d5345a6b55ffeb2a1127/use-customer-code.png?w=320&h=678&q=100&fm=webp 320w,\n//images.ctfassets.net/zk1zaxgr0lvi/2iOoaIwG27TkoMIeq9Ap7E/3963159c6cf4d5345a6b55ffeb2a1127/use-customer-code.png?w=640&h=1356&q=100&fm=webp 640w,\n//images.ctfassets.net/zk1zaxgr0lvi/2iOoaIwG27TkoMIeq9Ap7E/3963159c6cf4d5345a6b55ffeb2a1127/use-customer-code.png?w=1280&h=2712&q=100&fm=webp 1280w","sizes":"(min-width: 1280px) 1280px, 100vw","type":"image/webp"}],"fallback":{"src":"//images.ctfassets.net/zk1zaxgr0lvi/2iOoaIwG27TkoMIeq9Ap7E/3963159c6cf4d5345a6b55ffeb2a1127/use-customer-code.png?w=1280&h=2712&q=100&fm=png","srcSet":"//images.ctfassets.net/zk1zaxgr0lvi/2iOoaIwG27TkoMIeq9Ap7E/3963159c6cf4d5345a6b55ffeb2a1127/use-customer-code.png?w=320&h=678&q=100&fm=png 320w,\n//images.ctfassets.net/zk1zaxgr0lvi/2iOoaIwG27TkoMIeq9Ap7E/3963159c6cf4d5345a6b55ffeb2a1127/use-customer-code.png?w=640&h=1356&q=100&fm=png 640w,\n//images.ctfassets.net/zk1zaxgr0lvi/2iOoaIwG27TkoMIeq9Ap7E/3963159c6cf4d5345a6b55ffeb2a1127/use-customer-code.png?w=1280&h=2712&q=100&fm=png 1280w","sizes":"(min-width: 1280px) 1280px, 100vw"}},"layout":"constrained","backgroundColor":"#181818","width":1280,"height":2712},"__typename":"ContentfulAsset"},{"contentful_id":"2GynFNnzSStfKwKBNkGc8O","title":"use-swr-code","description":"useSWRHook: Fetch data and cache it with SWR using graphql query as key","gatsbyImageData":{"images":{"sources":[{"srcSet":"//images.ctfassets.net/zk1zaxgr0lvi/2GynFNnzSStfKwKBNkGc8O/f5d0f827e1e74aaf81bacde9094de499/use-swr-code.png?w=359&h=393&q=100&fm=webp 359w,\n//images.ctfassets.net/zk1zaxgr0lvi/2GynFNnzSStfKwKBNkGc8O/f5d0f827e1e74aaf81bacde9094de499/use-swr-code.png?w=717&h=784&q=100&fm=webp 717w,\n//images.ctfassets.net/zk1zaxgr0lvi/2GynFNnzSStfKwKBNkGc8O/f5d0f827e1e74aaf81bacde9094de499/use-swr-code.png?w=1434&h=1568&q=100&fm=webp 1434w","sizes":"(min-width: 1434px) 1434px, 100vw","type":"image/webp"}],"fallback":{"src":"//images.ctfassets.net/zk1zaxgr0lvi/2GynFNnzSStfKwKBNkGc8O/f5d0f827e1e74aaf81bacde9094de499/use-swr-code.png?w=1434&h=1568&q=100&fm=png","srcSet":"//images.ctfassets.net/zk1zaxgr0lvi/2GynFNnzSStfKwKBNkGc8O/f5d0f827e1e74aaf81bacde9094de499/use-swr-code.png?w=359&h=393&q=100&fm=png 359w,\n//images.ctfassets.net/zk1zaxgr0lvi/2GynFNnzSStfKwKBNkGc8O/f5d0f827e1e74aaf81bacde9094de499/use-swr-code.png?w=717&h=784&q=100&fm=png 717w,\n//images.ctfassets.net/zk1zaxgr0lvi/2GynFNnzSStfKwKBNkGc8O/f5d0f827e1e74aaf81bacde9094de499/use-swr-code.png?w=1434&h=1568&q=100&fm=png 1434w","sizes":"(min-width: 1434px) 1434px, 100vw"}},"layout":"constrained","backgroundColor":"#181818","width":1434,"height":1568},"__typename":"ContentfulAsset"},{"contentful_id":"7eupvvzdVVwuvV2N44Xn3K","title":"use-customer-update-code","description":"useCustomerUpdate: Will handle the customer mutation update then call useMutationHook to mutate SWR cached data ","gatsbyImageData":{"images":{"sources":[{"srcSet":"//images.ctfassets.net/zk1zaxgr0lvi/7eupvvzdVVwuvV2N44Xn3K/2d0825df13ca97e0363989b460db966d/use-customer-update-code.png?w=378&h=756&q=100&fm=webp 378w,\n//images.ctfassets.net/zk1zaxgr0lvi/7eupvvzdVVwuvV2N44Xn3K/2d0825df13ca97e0363989b460db966d/use-customer-update-code.png?w=755&h=1510&q=100&fm=webp 755w,\n//images.ctfassets.net/zk1zaxgr0lvi/7eupvvzdVVwuvV2N44Xn3K/2d0825df13ca97e0363989b460db966d/use-customer-update-code.png?w=1510&h=3020&q=100&fm=webp 1510w","sizes":"(min-width: 1510px) 1510px, 100vw","type":"image/webp"}],"fallback":{"src":"//images.ctfassets.net/zk1zaxgr0lvi/7eupvvzdVVwuvV2N44Xn3K/2d0825df13ca97e0363989b460db966d/use-customer-update-code.png?w=1510&h=3020&q=100&fm=png","srcSet":"//images.ctfassets.net/zk1zaxgr0lvi/7eupvvzdVVwuvV2N44Xn3K/2d0825df13ca97e0363989b460db966d/use-customer-update-code.png?w=378&h=756&q=100&fm=png 378w,\n//images.ctfassets.net/zk1zaxgr0lvi/7eupvvzdVVwuvV2N44Xn3K/2d0825df13ca97e0363989b460db966d/use-customer-update-code.png?w=755&h=1510&q=100&fm=png 755w,\n//images.ctfassets.net/zk1zaxgr0lvi/7eupvvzdVVwuvV2N44Xn3K/2d0825df13ca97e0363989b460db966d/use-customer-update-code.png?w=1510&h=3020&q=100&fm=png 1510w","sizes":"(min-width: 1510px) 1510px, 100vw"}},"layout":"constrained","backgroundColor":"#181818","width":1510,"height":3020},"__typename":"ContentfulAsset"},{"contentful_id":"2UF01BdTtdLBtJgnknoLtr","title":"use-mutation-code","description":"useMutationHook: Will mutate the SWR cached data","gatsbyImageData":{"images":{"sources":[{"srcSet":"//images.ctfassets.net/zk1zaxgr0lvi/2UF01BdTtdLBtJgnknoLtr/d7975b4e15b3fdb021386b1a58b8128d/use-mutation-code.png?w=293&h=205&q=100&fm=webp 293w,\n//images.ctfassets.net/zk1zaxgr0lvi/2UF01BdTtdLBtJgnknoLtr/d7975b4e15b3fdb021386b1a58b8128d/use-mutation-code.png?w=586&h=410&q=100&fm=webp 586w,\n//images.ctfassets.net/zk1zaxgr0lvi/2UF01BdTtdLBtJgnknoLtr/d7975b4e15b3fdb021386b1a58b8128d/use-mutation-code.png?w=1172&h=820&q=100&fm=webp 1172w","sizes":"(min-width: 1172px) 1172px, 100vw","type":"image/webp"}],"fallback":{"src":"//images.ctfassets.net/zk1zaxgr0lvi/2UF01BdTtdLBtJgnknoLtr/d7975b4e15b3fdb021386b1a58b8128d/use-mutation-code.png?w=1172&h=820&q=100&fm=png","srcSet":"//images.ctfassets.net/zk1zaxgr0lvi/2UF01BdTtdLBtJgnknoLtr/d7975b4e15b3fdb021386b1a58b8128d/use-mutation-code.png?w=293&h=205&q=100&fm=png 293w,\n//images.ctfassets.net/zk1zaxgr0lvi/2UF01BdTtdLBtJgnknoLtr/d7975b4e15b3fdb021386b1a58b8128d/use-mutation-code.png?w=586&h=410&q=100&fm=png 586w,\n//images.ctfassets.net/zk1zaxgr0lvi/2UF01BdTtdLBtJgnknoLtr/d7975b4e15b3fdb021386b1a58b8128d/use-mutation-code.png?w=1172&h=820&q=100&fm=png 1172w","sizes":"(min-width: 1172px) 1172px, 100vw"}},"layout":"constrained","backgroundColor":"#181818","width":1172,"height":820},"__typename":"ContentfulAsset"}]},"role":["Front-End Developer","Product Designer"],"team":["-"],"teamStack":["Nextjs","Typescript","Shopify Storefront API","Tailwind","MongoDB","React Testing Library","Cypress","Figma"],"timeline":"Ongoing"}},"pageContext":{"id":"71ffed32-ff2c-5696-bbae-64ad70376c0a","title":"Hiempsal E-commerce","__params":{"title":"hiempsal-e-commerce"}}},"staticQueryHashes":["4202924991","521632771"]}