Skip to content

Latest commit

 

History

History
105 lines (77 loc) · 4.78 KB

README.md

File metadata and controls

105 lines (77 loc) · 4.78 KB
Raw

Aplicativo Web de fatura

Índice

Visão geral

O desafio

Os usuários devem ser capazes de:

  • Veja o layout ideal para o aplicativo, dependendo do tamanho da tela do dispositivo
  • Veja os estados de foco para todos os elementos interativos na página
  • Criar, ler, atualizar e excluir faturas
  • Receber validações de formulário ao tentar criar/editar uma fatura
  • Salve rascunhos de faturas e marque as faturas pendentes como pagas
  • Filtrar faturas por status (rascunho/pendente/pago)
  • Alterna entre modo claro e escuro
  • Bônus: Acompanhe todas as alterações, mesmo depois de atualizar o navegador (localStorage pode ser usado para isso se você não estiver criando um aplicativo full-stack)

Comportamento esperado

  • Criação de fatura
    • Ao criar uma nova fatura, é necessário criar um ID. Cada ID deve ter 2 letras maiúsculas aleatórias seguidas por 4 números aleatórios.
    • As faturas podem ser criadas como rascunhos ou pendentes. Clicar em "Salvar como rascunho" deve permitir que o usuário deixe qualquer campo de formulário em branco, mas deve criar um ID se não existir e definir o status como "rascunho". Clicar em "Salvar e enviar" deve exigir que todos os campos do formulário sejam preenchidos e deve definir o status como "pendente".
    • Alterar o campo Termos de Pagamento deve definir a propriedade termosPagamento com base na data criadoEm mais os números de dias definidos para os termos de pagamento.
    • O total deve ser a soma de todos os itens da nota fiscal.
  • Editar uma fatura
    • Ao salvar alterações em uma fatura, todos os campos são obrigatórios ao clicar no botão "Salvar alterações". Se o usuário clicar em "Cancelar", todas as alterações não salvas devem ser redefinidas.
    • Se a fatura que está sendo editada for "rascunho", o status precisa ser atualizado para "pendente" ao clicar no botão "Salvar alterações". Todos os campos são obrigatórios nesta fase.
  • Os usuários devem poder marcar as faturas como pagas clicando no botão "Marcar como pagas". Isso deve alterar o status da fatura para "pago".
  • Os usuários devem receber um modal de confirmação ao tentar excluir as faturas.
  • Sinta-se à vontade para não adicionar estilo personalizado para os campos de formulário de data e dropdown. Os designs para esses campos são extras opcionais e são principalmente para fins de ilustração.

Captura de tela

Links

Meu processo

Construído com

  • Marcação HTML5 semântica
  • Acessibilidade HTML com arias atributos e roles
  • CSS(Flexbox, Grid, Bem Metodologia, Mobile-First, Responsive Web Design, Normalize)
  • Typescript
  • NPM
  • React - Biblioteca JS
    • hooks(useState, useEffect, useReducer, custom hooks)
    • Gerenciamento Estado - Context API com reducers
    • React-Hook-Form - Hook Gerenciamento Form
  • Next.js - Next App Router
    • Client Components
    • Metadatas Static, and dinamic
    • Loading UI
    • Route Handles
    • Page Error Handling
    • Parallel Routes
  • CSS Modules - Para estilos
  • LocalStorage Web API Browser - Armazenar Dados

Autor

Começando

Este é um projeto Next.js inicializado com [create-next-app](https://github.com/vercel/next.js/tree/canary/packages /criar-próximo-aplicativo).

Primeiro, execute o servidor de desenvolvimento:

npm run dev
# ou
desenvolvedor de fios
# ou
desenvolvedor pnpm

Abra http://localhost:3000 com seu navegador para ver o resultado.

Você pode começar a editar a página modificando app/page.tsx. A página é atualizada automaticamente conforme você edita o arquivo.

Este projeto usa next/font para otimizar e carregar automaticamente Inter, uma fonte personalizada do Google.