Controle de estoque de uma loja de periféricos de TI fictícia, a ideia foi baseada no projeto que esta sendo desenvolvido pelo Pedro Marins — Desenvolvedor web sênior e mentor da mentorria: Conquiste sua vaga como dev — me propus a construir-lo implementando algumas coisas diferente do projeto base, são elas:
- Implementação do Typescript no projeto.
- Implementação das validações de schema com o zod
- Implementação do module bundler webpack
- Criação uma mock API com o json-server
- Implementação do React.js.
O 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, CRA (Create React App) 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:
- o empacotamento de módulos;
- as configurações para realizar o build da aplicação;
- a resolução de imports ETC.
- Para instalar todas a dependencias :
yarnouyarn install - Para executar o build:
yarn build - Para inciar a server:
yarn server - Para executar a mock API:
yarn api
Para executar o projeto localmente, siga os seguintes passos:
Passo a passo
Clone o repositório em sua máquina local.
git clone https://github.com/Odisseu93/controle-estoque-webpack.git
Instale as dependências do projeto usando o gerenciador de pacotes yarn. Certifique-se de ter o Node.js instalado em sua máquina.
cd controle-estoque-webpack
yarn install
em ./src/services/axios-config/index.ts
a atualize o valor do atributo baseURL para http://localhost:3333/products/
Inicie a mock api:
yarn api
Inicie o servido da aplicação em modo de desenvolvimento com o seguinte comando:
yarn server
Agora 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.
