{"id":22058835,"url":"https://github.com/odisseu93/controle-estoque-webpack","last_synced_at":"2026-04-03T23:39:08.359Z","repository":{"id":160467365,"uuid":"635085860","full_name":"Odisseu93/controle-estoque-webpack","owner":"Odisseu93","description":"Controle de estoque de uma loja de periféricos de TI","archived":false,"fork":false,"pushed_at":"2023-05-11T22:10:20.000Z","size":762,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-28T22:51:21.131Z","etag":null,"topics":["babel","javascript","json-server","reactjs","sass","typescript","webpack"],"latest_commit_sha":null,"homepage":"https://courageous-empanada-c086d1.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Odisseu93.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.MD","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}},"created_at":"2023-05-01T23:55:11.000Z","updated_at":"2023-05-08T14:36:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"a4abab63-03e7-4719-ac99-4852dd2b2eee","html_url":"https://github.com/Odisseu93/controle-estoque-webpack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Odisseu93%2Fcontrole-estoque-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Odisseu93%2Fcontrole-estoque-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Odisseu93%2Fcontrole-estoque-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Odisseu93%2Fcontrole-estoque-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Odisseu93","download_url":"https://codeload.github.com/Odisseu93/controle-estoque-webpack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245136355,"owners_count":20566586,"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","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":["babel","javascript","json-server","reactjs","sass","typescript","webpack"],"created_at":"2024-11-30T17:25:30.239Z","updated_at":"2025-12-30T20:35:45.327Z","avatar_url":"https://github.com/Odisseu93.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# ![logo(1)](https://user-images.githubusercontent.com/76600539/236922454-34d0cc49-7376-4d7b-9403-eb2b076e0bf5.png)\n\n**[live website](https://courageous-empanada-c086d1.netlify.app/)**\n\nControle de estoque de uma loja de periféricos de TI fictícia, a ideia foi baseada no projeto que esta sendo desenvolvido pelo\n[Pedro Marins](https://github.com/pedromarins) — Desenvolvedor web sênior e mentor da mentorria: [Conquiste sua vaga como dev](https://conquistesuavaga.com/mentoria) — me propus a construir-lo implementando algumas coisas diferente do projeto base, são elas:\n- Implementação do Typescript no projeto.\n- Implementação das validações de schema com o [zod]('https://www.npmjs.com/package/zod#introduction')\n- Implementação do module bundler [webpack](https://webpack.js.org/)\n- Criação uma mock API com o [json-server]('https://www.npmjs.com/package/json-server')\n- Implementação do React.js.\n\nO objetivo principal é criar um projeto com React e typescript, sem utilizar alguma das _build tools_ mais comuns para iniciar este tipo de projeto, sendo elas: o [vite](https://vitejs.dev/), [CRA (Create React App)](https://create-react-app.dev/) entre outras. Fiz isso utilizando o webpack para o empacotamento da aplicação  —  _setando_ as configurações deste, manualmente  — , instalando e configurando as dependencias  necessários para  o projeto. Neste processo, fui entendendo alguns conceitos e práticas que são utilizados no React.js (e em alguns dos principais frameworks para desenvolvimento web) na prática, citando alguns:\n- o empacotamento de módulos;\n- as configurações para realizar o build da aplicação; \n- a resolução de imports ETC.\n\n\n## Comandos\n- Para instalar todas a dependencias : `yarn` ou `yarn install` \n- Para executar o _build_: `yarn build` \n- Para inciar a _server_: `yarn server` \n- Para executar a mock API: `yarn api` \n\n\n## Rodando o projeto localmente\n\nPara executar o projeto localmente, siga os seguintes passos:\n\n\u003cdetails\u003e\n\u003csummary\u003ePasso a passo\u003c/summary\u003e\n\n    Clone o repositório em sua máquina local.\n\n```\n\ngit clone https://github.com/Odisseu93/controle-estoque-webpack.git\n\n```\n\nInstale as dependências do projeto usando o gerenciador de pacotes yarn. Certifique-se de ter o Node.js instalado em sua máquina.\n\n```\n\ncd controle-estoque-webpack\nyarn install\n\n```\n\n\nem [./src/services/axios-config/index.ts](./src/services/axios-config/index.ts)\na atualize o valor do atributo **baseURL** para `http://localhost:3333/products/`\n\n![image](https://user-images.githubusercontent.com/76600539/236917116-27b637a2-fcf2-43a7-a313-0034939d41e7.png)\n\n\nInicie a mock api:\n\n```\n\nyarn api\n\n```\n\nInicie o servido da  aplicação em modo de desenvolvimento com o seguinte comando:\n\n```\n\nyarn server\n\n```\n\n\nAgora você deve ser capaz de visualizar e interagir com a aplicação em seu ambiente local de desenvolvimento. Para interromper a execução do servidor local, pressione CTRL + C em seu terminal.\n\n\u003c/details\u003e\n\n## Tecnologias utilizadas\n- [React.js](https://react.dev/)\n- [Typescript](https://www.typescriptlang.org/)\n- [Webpack](https://webpack.js.org/)\n- [sass](https://sass-lang.com/)\n- [yarn](https://yarnpkg.com/)\n### Dependencias/packages\n- [Axios](https://axios-http.com/docs/intro)\n- [Zod](https://www.npmjs.com/package/zod)\n- [json-server](https://www.npmjs.com/package/json-server)\n\n## Licença\n[MIT](LICENSE.MD)\n\n## Desenvolvedor\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/76600539/235897309-88ab21df-d0be-4905-829c-36ab68ebc2e8.png\" alt=\"developer: Ulisses Silvério\"    width=\"200px\" align=\"center\"/\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv align=\"center\" margin=\"50px\"\u003e\n \u003ca href=\"https://linktr.ee/ulissessilverio\" align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/linktree-1de9b6?style=for-the-badge\u0026logo=linktree\u0026logoColor=white\" alt=\"linktree shild\" /\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodisseu93%2Fcontrole-estoque-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fodisseu93%2Fcontrole-estoque-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodisseu93%2Fcontrole-estoque-webpack/lists"}