{"id":31512685,"url":"https://github.com/diegolibonati/dshop","last_synced_at":"2026-04-10T13:30:53.896Z","repository":{"id":305044022,"uuid":"1014879631","full_name":"DiegoLibonati/DShop","owner":"DiegoLibonati","description":"This project is a fun project that allowed me to learn `MicroFrontends (MFEs)` with the `ModuleFederationPlugin`. We basically have six Microfrontends, one of which serves as the orchestrator for the rest, i.e., the `container` MFE.","archived":false,"fork":false,"pushed_at":"2025-09-06T23:08:43.000Z","size":1244,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-07T00:23:47.891Z","etag":null,"topics":["angular","css3","docker","reactjs","typescript","vue","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DiegoLibonati.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-06T15:33:28.000Z","updated_at":"2025-09-06T23:08:46.000Z","dependencies_parsed_at":"2025-07-18T03:30:24.360Z","dependency_job_id":"056fb527-d69d-405c-8ae0-78c0cf329839","html_url":"https://github.com/DiegoLibonati/DShop","commit_stats":null,"previous_names":["diegolibonati/dshop"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DiegoLibonati/DShop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DiegoLibonati%2FDShop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DiegoLibonati%2FDShop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DiegoLibonati%2FDShop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DiegoLibonati%2FDShop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DiegoLibonati","download_url":"https://codeload.github.com/DiegoLibonati/DShop/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DiegoLibonati%2FDShop/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278095164,"owners_count":25928960,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-02T02:00:08.890Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","css3","docker","reactjs","typescript","vue","webpack"],"created_at":"2025-10-03T00:46:31.444Z","updated_at":"2025-12-30T20:06:37.302Z","avatar_url":"https://github.com/DiegoLibonati.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DShop\n\n## Educational Purpose\n\nThis project was created primarily for **educational and learning purposes**.  \nWhile it is well-structured and could technically be used in production, it is **not intended for commercialization**.  \nThe main goal is to explore and demonstrate best practices, patterns, and technologies in software development.\n\n## Getting Started without Docker\n\n1. Clone the repository with `git clone \"repository link\"`\n2. Enter the share_core folder (MFE) and run `npm install` if the dependencies aren't installed. Then run the command `npm run dev`.\n3. Enter the share_angular folder (MFE) and run `npm install` if the dependencies aren't installed. Then run the command `npm run dev`.\n4. Enter the share_react folder (MFE) and run `npm install` if the dependencies aren't installed. Then run the command `npm run dev`.\n5. Enter the product_detail folder (MFE) and run `npm install` if the dependencies aren't installed. Then run the command `npm run dev`.\n6. Enter the home folder (MFE) and run `npm install` if the dependencies aren't installed. Then run the command `npm run dev`.\n7. Enter the container folder (MFE) and run `npm install` if the dependencies aren't installed. Then run the command `npm run dev`.\n\n## Getting Started with Docker\n\n1. Clone the repository with `git clone \"repository link\"`\n2. Join to `shared_core`, `shared_angular`, `shared_react`, `product_detail`, `home` and `container` folders (MFEs) and execute: `npm install` or `yarn install` in the terminal.\n3. Go to the previous folder and execute: `docker-compose -f dev.docker-compose.yml build --no-cache` in the terminal\n4. Once built, you must execute the command: `docker-compose -f dev.docker-compose.yml up --force-recreate` in the terminal\n\nNOTE: You have to be standing in the folder containing the: `dev.docker-compose.yml` and you need to install `Docker Desktop` if you are in Windows.\n\n## Description\n\nThis project is a fun project that allowed me to learn `MicroFrontends (MFEs)` with the `ModuleFederationPlugin`. We basically have six Microfrontends, one of which serves as the orchestrator for the rest, i.e., the `container` MFE.\n\n1. **Container - REACT JS**: The MFE Container is responsible for displaying the final result, as well as rendering the Home and Product detail pages, as well as various components.\n2. **Home - REACT JS**: The Home MFE is responsible for rendering the website's main home page. It receives the information to be rendered through props and also consumes components from other MFEs.\n3. **Product Detail - VUE 3**: The Product Detail MFE is responsible for rendering a specific product page on the website. It behaves similarly to the Home MFE, receiving the information to be rendered in props and also consuming components from other MFEs.\n4. **Shared React - REACT JS**: The Shared React MFE is an MFE that only consumes `Shared Core MFE` and is used to develop React-based components.\n5. **Shared Angular - ANGULAR 14**: The Shared Angular MFE is an MFE that only consumes `Shared Core MFE` and is used to develop Angular-based components.\n6. **Shared Core - REACT JS**: The Shared Core MFE doesn't consume any MFE. It's only responsible for exposing basic components for reuse in other MFEs, such as buttons, SVGs, cards, etc.\n\n## Technologies used\n\n1. Typescript\n2. React JS\n3. CSS3\n4. Docker\n5. Webpack 5\n6. Vue 3\n7. Angular 14\n8. Nginx\n\n## Libraries used\n\n### Container\n\n#### Dependencies\n\n```\n\"@babel/runtime\": \"^7.27.6\"\n\"axios\": \"^1.11.0\"\n\"react\": \"^19.1.0\"\n\"react-dom\": \"^19.1.0\"\n\"react-router-dom\": \"^7.6.3\"\n```\n\n#### devDependencies\n\n```\n\"@babel/core\": \"^7.28.0\"\n\"@babel/plugin-transform-runtime\": \"^7.28.0\"\n\"@babel/preset-env\": \"^7.28.0\"\n\"@babel/preset-react\": \"^7.27.1\"\n\"@babel/preset-typescript\": \"^7.27.1\"\n\"@testing-library/jest-dom\": \"^6.6.3\"\n\"@testing-library/react\": \"^16.3.0\"\n\"@testing-library/user-event\": \"^14.6.1\"\n\"@types/jest\": \"^29.5.14\"\n\"@types/node\": \"^24.0.10\"\n\"@types/react\": \"^19.1.8\"\n\"@types/react-dom\": \"^19.1.6\"\n\"babel-loader\": \"^10.0.0\"\n\"clean-webpack-plugin\": \"^4.0.0\"\n\"css-loader\": \"^7.1.2\"\n\"home\": \"file:../home-types\"\n\"html-webpack-plugin\": \"^5.6.3\"\n\"jest\": \"^29.7.0\"\n\"jest-environment-jsdom\": \"^29.7.0\"\n\"product_detail\": \"file:../product_detail-types\"\n\"shared_angular\": \"file:../shared_angular-types\"\n\"shared_core\": \"file:../shared_core-types\"\n\"shared_react\": \"file:../shared_react-types\"\n\"style-loader\": \"^4.0.0\"\n\"ts-jest\": \"^29.2.5\"\n\"ts-node\": \"^10.9.2\"\n\"typescript\": \"^5.8.3\"\n\"webpack\": \"^5.99.9\"\n\"webpack-cli\": \"^6.0.1\"\n\"webpack-dev-server\": \"^5.2.2\"\n\"webpack-merge\": \"^6.0.1\"\n```\n\n### Home\n\n#### Dependencies\n\n```\n\"@babel/runtime\": \"^7.27.6\"\n\"react\": \"^19.1.0\"\n\"react-dom\": \"^19.1.0\"\n\"react-router-dom\": \"^7.6.3\"\n```\n\n#### devDependencies\n\n```\n\"@babel/core\": \"^7.28.0\"\n\"@babel/plugin-transform-runtime\": \"^7.28.0\"\n\"@babel/preset-env\": \"^7.28.0\"\n\"@babel/preset-react\": \"^7.27.1\"\n\"@babel/preset-typescript\": \"^7.27.1\"\n\"@types/node\": \"^24.0.10\"\n\"@types/react\": \"^19.1.8\"\n\"@types/react-dom\": \"^19.1.6\"\n\"@testing-library/jest-dom\": \"^6.6.3\"\n\"@testing-library/react\": \"^16.3.0\"\n\"@testing-library/user-event\": \"^14.6.1\"\n\"@types/jest\": \"^29.5.14\"\n\"babel-loader\": \"^10.0.0\"\n\"clean-webpack-plugin\": \"^4.0.0\"\n\"css-loader\": \"^7.1.2\"\n\"html-webpack-plugin\": \"^5.6.3\"\n\"jest\": \"^29.7.0\"\n\"jest-environment-jsdom\": \"^29.7.0\"\n\"style-loader\": \"^4.0.0\"\n\"ts-jest\": \"^29.2.5\"\n\"ts-node\": \"^10.9.2\"\n\"typescript\": \"^5.8.3\"\n\"webpack\": \"^5.99.9\"\n\"webpack-cli\": \"^6.0.1\"\n\"webpack-dev-server\": \"^5.2.2\"\n\"webpack-merge\": \"^6.0.1\"\n\"shared_core\": \"file:../shared_core-types\"\n\"shared_react\": \"file:../shared_react-types\"\n\"shared_angular\": \"file:../shared_angular-types\"\n```\n\n### Product Detail\n\n#### Dependencies\n\n```\n\"@babel/runtime\": \"^7.28.0\"\n\"vue\": \"^3.5.0\"\n\"vue-router\": \"^4.4.5\"\n```\n\n#### devDependencies\n\n```\n\"@babel/core\": \"^7.28.0\"\n\"@babel/plugin-transform-runtime\": \"^7.28.0\"\n\"@babel/preset-env\": \"^7.28.0\"\n\"@babel/preset-typescript\": \"^7.27.1\"\n\"@testing-library/jest-dom\": \"^6.6.3\"\n\"@testing-library/vue\": \"^8.1.0\"\n\"@types/jest\": \"^29.5.14\"\n\"@types/node\": \"^24.0.10\"\n\"@vue/compiler-sfc\": \"^3.5.0\"\n\"@vue/test-utils\": \"^2.4.6\"\n\"babel-loader\": \"^10.0.0\"\n\"clean-webpack-plugin\": \"^4.0.0\"\n\"css-loader\": \"^7.1.2\"\n\"file-loader\": \"^6.2.0\"\n\"html-webpack-plugin\": \"^5.6.3\"\n\"jest\": \"^29.7.0\"\n\"jest-environment-jsdom\": \"^29.7.0\"\n\"style-loader\": \"^4.0.0\"\n\"ts-jest\": \"^29.2.5\"\n\"ts-loader\": \"^9.5.2\"\n\"ts-node\": \"^10.9.2\"\n\"typescript\": \"^5.8.3\"\n\"vue-loader\": \"^17.4.2\"\n\"vue-style-loader\": \"^4.1.2\"\n\"webpack\": \"^5.99.9\"\n\"webpack-cli\": \"^6.0.1\"\n\"webpack-dev-server\": \"^5.2.2\"\n\"webpack-merge\": \"^6.0.1\"\n\"shared_core\": \"file:../shared_core-types\"\n\"shared_react\": \"file:../shared_react-types\"\n\"shared_angular\": \"file:../shared_angular-types\"\n```\n\n### Shared React\n\n#### Dependencies\n\n```\n\"@babel/runtime\": \"^7.27.6\"\n\"react\": \"^19.1.0\"\n\"react-dom\": \"^19.1.0\"\n```\n\n#### devDependencies\n\n```\n\"@babel/core\": \"^7.28.0\"\n\"@babel/plugin-transform-runtime\": \"^7.28.0\"\n\"@babel/preset-env\": \"^7.28.0\"\n\"@babel/preset-react\": \"^7.27.1\"\n\"@babel/preset-typescript\": \"^7.27.1\"\n\"@testing-library/jest-dom\": \"^6.6.3\"\n\"@testing-library/react\": \"^16.3.0\"\n\"@testing-library/user-event\": \"^14.6.1\"\n\"@types/jest\": \"^29.5.14\"\n\"@types/node\": \"^24.0.13\"\n\"@types/react\": \"^19.1.8\"\n\"@types/react-dom\": \"^19.1.6\"\n\"babel-loader\": \"^10.0.0\"\n\"clean-webpack-plugin\": \"^4.0.0\"\n\"css-loader\": \"^7.1.2\"\n\"html-webpack-plugin\": \"^5.6.3\"\n\"jest\": \"^29.7.0\"\n\"jest-environment-jsdom\": \"^29.7.0\"\n\"style-loader\": \"^4.0.0\"\n\"ts-jest\": \"^29.2.5\"\n\"ts-node\": \"^10.9.2\"\n\"typescript\": \"^5.8.3\"\n\"webpack\": \"^5.99.9\"\n\"webpack-cli\": \"^6.0.1\"\n\"webpack-dev-server\": \"^5.2.2\"\n\"webpack-merge\": \"^6.0.1\"\n\"shared_core\": \"file:../shared_core-types\"\n```\n\n### Shared Angular\n\n#### Dependencies\n\n```\n\"@angular/animations\": \"^14.2.0\"\n\"@angular/common\": \"^14.2.0\"\n\"@angular/compiler\": \"^14.2.0\"\n\"@angular/core\": \"^14.2.0\"\n\"@angular/platform-browser\": \"^14.2.0\"\n\"@angular/platform-browser-dynamic\": \"^14.2.0\"\n\"@angular/router\": \"^14.2.0\"\n\"rxjs\": \"^7.5.0\"\n\"zone.js\": \"^0.11.4\"\n```\n\n#### devDependencies\n\n```\n\"@babel/core\": \"^7.28.5\"\n\"@babel/preset-env\": \"^7.28.5\"\n\"@testing-library/angular\": \"^12.1.0\"\n\"@testing-library/jest-dom\": \"^6.6.4\"\n\"@testing-library/user-event\": \"^14.6.1\"\n\"@types/jest\": \"^29.5.14\"\n\"@types/node\": \"^24.7.1\"\n\"babel-jest\": \"^30.2.0\"\n\"css-loader\": \"^6.8.1\"\n\"html-loader\": \"^5.1.0\"\n\"html-webpack-plugin\": \"^5.6.3\"\n\"jest\": \"^29.7.0\"\n\"jest-environment-jsdom\": \"^29.7.0\"\n\"sass\": \"^1.64.2\"\n\"sass-loader\": \"^13.3.2\"\n\"shared_core\": \"file:../shared_core-types\"\n\"style-loader\": \"^3.3.4\"\n\"ts-jest\": \"^29.2.5\"\n\"ts-loader\": \"^9.5.2\"\n\"typescript\": \"^5.9.2\"\n\"webpack\": \"^5.99.9\"\n\"webpack-cli\": \"^5.1.4\"\n\"webpack-dev-server\": \"^5.2.2\"\n\"webpack-merge\": \"^5.9.0\"\n```\n\n### Shared Core\n\n#### Dependencies\n\n```\n\"@babel/runtime\": \"^7.27.6\"\n\"react\": \"^19.1.0\"\n\"react-dom\": \"^19.1.0\"\n```\n\n#### devDependencies\n\n```\n\"@babel/core\": \"^7.28.0\"\n\"@babel/plugin-transform-runtime\": \"^7.28.0\"\n\"@babel/preset-env\": \"^7.28.0\"\n\"@babel/preset-react\": \"^7.27.1\"\n\"@babel/preset-typescript\": \"^7.27.1\"\n\"@testing-library/jest-dom\": \"^6.6.3\"\n\"@testing-library/react\": \"^16.3.0\"\n\"@testing-library/user-event\": \"^14.6.1\"\n\"@types/jest\": \"^29.5.14\"\n\"@types/node\": \"^24.7.1\"\n\"@types/react\": \"^19.1.8\"\n\"@types/react-dom\": \"^19.1.6\"\n\"babel-loader\": \"^10.0.0\"\n\"clean-webpack-plugin\": \"^4.0.0\"\n\"css-loader\": \"^7.1.2\"\n\"html-webpack-plugin\": \"^5.6.3\"\n\"jest\": \"^29.7.0\"\n\"jest-environment-jsdom\": \"^29.7.0\"\n\"style-loader\": \"^4.0.0\"\n\"ts-jest\": \"^29.2.5\"\n\"ts-node\": \"^10.9.2\"\n\"typescript\": \"^5.8.3\"\n\"webpack\": \"^5.99.9\"\n\"webpack-cli\": \"^6.0.1\"\n\"webpack-dev-server\": \"^5.2.2\"\n\"webpack-merge\": \"^6.0.1\"\n```\n\n## Portfolio Link\n\n[`https://diegolibonati.com.ar/#/project/DShop`](https://diegolibonati.com.ar/#/project/DShop)\n\n## App Link\n\n[`https://dshop.libonatis.com.ar/#/`](https://dshop.libonatis.com.ar/#/)\n\n## Video\n\nhttps://github.com/user-attachments/assets/2758b45c-2699-4e52-b604-2be29c70346b\n\n## Testing\n\n### Container\n\n1. Join to `container` folder\n2. Execute: `npm run test`\n\n### Home\n\n1. Join to `home` folder\n2. Execute: `npm run test`\n\n### Product Detail\n\n1. Join to `product_detail` folder\n2. Execute: `npm run test`\n\n### Shared React\n\n1. Join to `shared_react` folder\n2. Execute: `npm run test`\n\n### Shared Angular\n\n1. Join to `shared_angular` folder\n2. Execute: `npm run test`\n\n### Shared Core\n\n1. Join to `shared_core` folder\n2. Execute: `npm run test`\n\n## Documentation APP\n\n### **Version**\n\n```ts\nAPP VERSION: 1.0.0\nREADME UPDATED: 10/10/2025\nAUTHOR: Diego Libonati\n```\n\n### **Env Keys**\n\n1. `WATCHPACK_POLLING`: This env key is used to load the content when saving a change to it. (Docker)\n\n```ts\n# Container Envs\nWATCHPACK_POLLING=true\n\n# Container Envs\nWATCHPACK_POLLING=true\n\n# Container Envs\nWATCHPACK_POLLING=true\n\n# Container Envs\nWATCHPACK_POLLING=true\n\n# Container Envs\nWATCHPACK_POLLING=true\n\n# Container Envs\nWATCHPACK_POLLING=true\n```\n\n## Known issues\n\n### Container MFE\n\n1. Typing error in Header.\n\n### Shared Vue MFE\n\n1. Modularization of tsconfig files does not work\n2. After modularization of tsconfig files, add tests\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiegolibonati%2Fdshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiegolibonati%2Fdshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiegolibonati%2Fdshop/lists"}