Aplicativo Web de fatura

Índice

• Visão Geral
  • O desafio
  • Captura de tela
  • Links
• Meu processo
  • Construído com
• Autor

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

• Repositório do Projeto: Repositório do Projeto
• Resultado ao vivo: URL ao vivo

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

• Website - Portfólio Web
• Frontend Mentor - @samuel-amaro

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.