[{"data":1,"prerenderedAt":185},{"projects-shop8-cms-en":2},{"id":3,"title":4,"body":5,"description":166,"extension":167,"image":168,"link":169,"links":170,"meta":171,"navigation":172,"path":173,"position":174,"role":175,"seo":176,"stem":177,"tags":178,"type":183,"__hash__":184},"projectsEn\u002Fen\u002Fprojects\u002Fshop8-cms.md","Shop8 CMS",{"type":6,"value":7,"toc":156},"minimark",[8,22,32,45,83,93],[9,10,13,18],"div",{"className":11},[12],"row",[14,15,17],"h2",{"id":16},"context","Context",[19,20,21],"p",{},"Shop8 is a custom e-commerce solution for mid-sized e-shops. The goal was to build a complete administration in which clients control every part of their e-shop the way they need.",[9,23,25,29],{"className":24},[12],[14,26,28],{"id":27},"my-role","My role",[19,30,31],{},"I worked with colleagues who taught me a lot about the overall system architecture, and I was part of both the backend and the frontend team.",[9,33,35,39,42],{"className":34},[12],[14,36,38],{"id":37},"challenge","Challenge",[19,40,41],{},"The administration includes many modules for running an e-shop: user accounts, shipping, payments, branches, discount coupons and more. The content section manages categories and custom events, but above all products – with version history, variants and language versions.",[19,43,44],{},"The same modules also had to serve multiple clients, each with their own configuration.",[9,46,48,52],{"className":47},[12],[14,49,51],{"id":50},"solution","Solution",[53,54,55,59,62,65,68,71,74,77,80],"ul",{},[56,57,58],"li",{},"We moved the project into an Nx monorepo so it scales better and finished modules can be reused for multiple clients.",[56,60,61],{},"React Router handles navigation; native fetch with GraphQL and React Query handles communication with the API.",[56,63,64],{},"Data lists in each module are Material Table tables that support searching, filtering and sorting and automatically save their last state.",[56,66,67],{},"Detail screens for creating and managing content are built on forms with React Hook Form and the TinyMCE editor.",[56,69,70],{},"Core components and the admin layout use Material UI and custom SCSS styles.",[56,72,73],{},"Each app has its own configuration for the client's internal needs and styling, for example an admin in the client's brand colours.",[56,75,76],{},"The dashboard uses Chart.js to show order charts and an overview of CMS records.",[56,78,79],{},"I first wrote automated E2E tests in Jest and later moved to Cypress, which worked better for me.",[56,81,82],{},"The code is written in TypeScript, with ESLint for code quality and Prettier for formatting.",[9,84,86,90],{"className":85},[12],[14,87,89],{"id":88},"result","Result",[19,91,92],{},"A fully functional administration with an API that adapts to the needs of each project. The admin keeps evolving: we add new features, and I regularly update libraries and refactor older code.",[9,94,96,100],{"className":95},[12],[14,97,99],{"id":98},"technologies","Technologies",[53,101,102,105,108,111,114,117,120,123,126,129,132,135,138,141,144,147,150,153],{},[56,103,104],{},"React (TypeScript)",[56,106,107],{},"Nx monorepo – for scalable, consistent code across apps",[56,109,110],{},"React Router",[56,112,113],{},"React Query",[56,115,116],{},"React Hook Form",[56,118,119],{},"i18n (i18next)",[56,121,122],{},"React Hot Toast",[56,124,125],{},"React Player",[56,127,128],{},"Cypress (E2E)",[56,130,131],{},"ESLint + Prettier",[56,133,134],{},"Material UI (MUI)",[56,136,137],{},"Ant Design (antd) – especially Tree",[56,139,140],{},"Chonky (data grid)",[56,142,143],{},"React DnD",[56,145,146],{},"Chart.js",[56,148,149],{},"dayjs",[56,151,152],{},"GraphQL",[56,154,155],{},"Webpack",{"title":157,"searchDepth":158,"depth":158,"links":159},"",2,[160,161,162,163,164,165],{"id":16,"depth":158,"text":17},{"id":27,"depth":158,"text":28},{"id":37,"depth":158,"text":38},{"id":50,"depth":158,"text":51},{"id":88,"depth":158,"text":89},{"id":98,"depth":158,"text":99},"A custom platform powering e-shops for multiple clients. I built admin modules in React with GraphQL, moved the project into an Nx monorepo and wrote E2E tests in Cypress.","md","\u002Fimages\u002Flogo-code8.svg","https:\u002F\u002Fwww.shop8.cz",null,{},true,"\u002Fen\u002Fprojects\u002Fshop8-cms",3,"Frontend developer in a team, contributions to the backend",{"title":4,"description":166},"en\u002Fprojects\u002Fshop8-cms",[179,180,152,181,182],"React","TypeScript","Nx","Cypress","E-commerce platform · React","jp00N3bLczHQ7r5EcyMvRDFoad0nzcGCaoc7l8hkcio",1792435547094]