- Front End
- Back EndLink da aplicação: https://shopper-rickhardbr.vercel.app/
Você vai criar um formulário simples de cadastro de pedidos de supermercado. O sistema deve ser escrito em Python ou Javascript (node.js e/ou react.js).
Além da funcionalidade, avaliaremos principalmente organização e clareza no código, lembre-se que um programador lê mais código do que escreve, então códigos limpos e bem estruturados facilitam a vida de todos.
Junto desse documento você receberá o arquivo products.csv , que é uma lista com produtos disponíveis e seus respectivos preços e estoque com as seguintes definições:
Além da funcionalidade, avaliaremos principalmente organização e clareza no código, lembre-se que um programador lê mais código do que escreve, então códigos limpos e bem estruturados facilitam a vida de todos.
Junto desse documento você receberá o arquivo products.csv , que é uma lista com produtos disponíveis e seus respectivos preços e estoque com as seguintes definições:
- id = id do produto
- name = nome do produto
- price = preço do produto em reais.
- qty_stock = quantidade em estoque
- sistema deve ter um formulário de cadastro de pedidos
- O usuário deve entrar com Nome do Cliente, Data de Entrega e uma lista de compras
- A lista de compras é composta por um ou mais produtos e a quantidade solicitada para cada um deles.
- O usuário pode alterar a quantidade de itens já cadastrados ou excluir um item que ele não queira mais.
- A cada alteração na lista de compras o sistema deve calcular o valor total do pedido.
- Todas essas informações devem ser salvas em um banco de dados que você vai modelar.
- Cada pedido salvo deve debitar a quantidade do produto correspondente de seu estoque.
- O sistema deve alertar o usuário caso a quantidade solicitada não esteja disponível no estoque.
- O sistema também deve ter uma função para mostrar o estoque atual exibindo: Nome do produto e a quantidade em estoque.
- 🎴Front End
- 📌React
- 📌vite
- 📌JavaScript
- 📌TypeScript
- 📌Axios
- 📌Date-fns
- 📌React-paginate
- 📌React-router-dom
- 📌Reactjs-popup
- 📌SASS - SCSS
- 📌Iconify
- 📌@prismicio
- 🗃️Back End
- 📌NodeJS
- 📌TypeScript
- 📌Express
- 📌Cors
- 📌Knex
- 📌MySql
- 📌Uuid
Vite é uma ferramenta para o desenvolvedor(a) frontend, o significado de sua palavra vem do francês, que significa “rápido” . Criado por “Evan You”, o mesmo criador do Vue.js. O Vite promete :
💡 Servidor Instantâneo.
⚡️ Hot reload ultrarrápido.
🛠️ Suporte à: Typescript, JSX, CSS e mais…
📦 Compilações otimizadas usando rollup.
🔩 Plugins universais.
🔑Totalmente tipado.
Pode ser usado
- 🪄 JavaScript
- 🪄 Vue.js
- 🪄 React
- 🪄 Preactjs
- 🪄 LitElement
- 🪄 Svelte
Criando seu primeiro projeto Vite
Você pode criá-lo com NPM ou Yarn
Em seguida você poderá adicionar o nome do projeto, nesse caso vamos chamá-lo de “projeto-vite”. Também podemos selecionar a framework que desejamos utilizar e em seguida entrar na pasta.
Começando seu projeto
Crie uma pasta com o nome do projeto.
Abra a pasta do seu projeto e dentro dela abra o VSCode com o botão direito do mouse:
Ou caso não aparece o "Abrir com Code"
Abra o Git Bash Here
no terminal que irá se abrir, digite: code . e aperte enter
e é só aguardar, o VSCode irá abrir, já dentro da sua pasta:
Com NPM:
npm create vite@latest
Com Yarn:
yarn create vite
Com PNPM:
$ pnpm create vite
Após dar Enter você precisa indicar um nome:
Você pode dar o nome que quiser. Ex: landing-page
Você também pode escolher o nome que melhor se adeque a sua aplicação ou basta digitar um sinal de ponto "." (sem as aspas) que a aplicação terá o nome da pasta do projeto, lembrando que não pode ter letras maiúsclas no nome da pasta e nem da aplicação caso deseje dar um nome diferente.
Depois de dar o nome ou apenas o ponto será perguntando qual o framework você utilizará, estamos usando o React, use as setas do teclado para escolhe-lo e assim que chegar nele, tecle Enter:
Uma nova pergunta é feita, pedindo que escolha a variante, escolha JavaScript apertando Enter ou caso queira iniciar sua aplicação com TypeScript use a seta para abaixo do teclado e aperte Enter.
Porém antes de continuar, você precisa instalar as dependências, começe por
npm i
ou
npm Install
Após a instalação das dependências, o terminal estará liberado, e você pode notar uma nova pasta: node_modules
✨E assim o projeto está pronto! ✨
Para começar sua aplicação no navegador, no terminal digite:
npm run dev
o servidor local será criado para apresentar a aplicação:
com o servidor criado, basta segurar a tecla CRTL e clicar sobre o endereço que aparece no terminal:
Ou simplesmente selecionar o endereço - exemplo: http://127.0.0.1:5174 e colocar na barra de endereços do seu namegador
✨ Essa será a primeira tela que aparecerá no seu navegador ✨
Conclusão
Se comparado com o creat-react-app , o Vite é bem melhor, possuindo um build de 14x mais rápido e o tamanho é consideravelmente menor. O resultado é realmente incrível.
Com certeza é uma opção a considerar na hora de criar seu novo projeto.
Quando temos apenas um item o botão de ( - ) menos fica oculto
