https://github.com/odisseu93/controle-estoque-webpack
Controle de estoque de uma loja de periféricos de TI
https://github.com/odisseu93/controle-estoque-webpack
babel javascript json-server reactjs sass typescript webpack
Last synced: 3 months ago
JSON representation
Controle de estoque de uma loja de periféricos de TI
- Host: GitHub
- URL: https://github.com/odisseu93/controle-estoque-webpack
- Owner: Odisseu93
- License: mit
- Created: 2023-05-01T23:55:11.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-11T22:10:20.000Z (about 3 years ago)
- Last Synced: 2025-01-28T22:51:21.131Z (over 1 year ago)
- Topics: babel, javascript, json-server, reactjs, sass, typescript, webpack
- Language: TypeScript
- Homepage: https://courageous-empanada-c086d1.netlify.app/
- Size: 744 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.MD
Awesome Lists containing this project
README
# 
**[live website](https://courageous-empanada-c086d1.netlify.app/)**
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](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:
- Implementação do Typescript no projeto.
- Implementação das validações de schema com o [zod]('https://www.npmjs.com/package/zod#introduction')
- Implementação do module bundler [webpack](https://webpack.js.org/)
- Criação uma mock API com o [json-server]('https://www.npmjs.com/package/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](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:
- o empacotamento de módulos;
- as configurações para realizar o build da aplicação;
- a resolução de imports ETC.
## Comandos
- Para instalar todas a dependencias : `yarn` ou `yarn install`
- Para executar o _build_: `yarn build`
- Para inciar a _server_: `yarn server`
- Para executar a mock API: `yarn api`
## Rodando o projeto localmente
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](./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.
## Tecnologias utilizadas
- [React.js](https://react.dev/)
- [Typescript](https://www.typescriptlang.org/)
- [Webpack](https://webpack.js.org/)
- [sass](https://sass-lang.com/)
- [yarn](https://yarnpkg.com/)
### Dependencias/packages
- [Axios](https://axios-http.com/docs/intro)
- [Zod](https://www.npmjs.com/package/zod)
- [json-server](https://www.npmjs.com/package/json-server)
## Licença
[MIT](LICENSE.MD)
## Desenvolvedor
