Projeto de Listagens de Dados

Introdução

Este documento descreve o projeto de listagens de dados desenvolvido utilizando React, TypeScript e o framework de estilo Tailwind CSS. O objetivo principal do projeto é permitir a visualização, filtragem e paginação de conjuntos de dados, bem como a capacidade de adicionar novos dados.

Funcionalidades Principais

1. Tabela de Listagem de Dados

A tabela de listagem de dados é o componente principal do projeto. Ele exibe os dados em forma tabular e oferece recursos de filtragem e paginação.

• Funcionalidades: Exibição dos dados em formato tabular. Capacidade de filtrar os dados com base em critérios específicos. Paginação para navegar entre as diferentes páginas de dados.

2. Paginação

A paginação permite que o usuário navegue entre diferentes páginas de dados para uma melhor experiência de visualização.

• Funcionalidades: Botões para navegação para a primeira, anterior, próxima e última página. Exibição do número total de páginas e do número da página atual. Capacidade de especificar quantos itens são exibidos por página.

3. Adição de Novos Dados

Esta funcionalidade permite ao usuário adicionar novos dados à lista existente.

• Funcionalidades: Formulário para entrada de novos dados. Validação de entrada para garantir a integridade dos dados. Capacidade de adicionar novos itens à lista existente.

Tecnologias Utilizadas

O projeto utiliza as seguintes tecnologias e ferramentas:

React: Biblioteca JavaScript para construção de interfaces de usuário. TypeScript: Superset do JavaScript que adiciona tipagem estática opcional ao código. Tailwind CSS: Framework de estilo CSS utilitário que permite a construção rápida e personalizável de interfaces. Estrutura do Projeto A estrutura do projeto é organizada em componentes reutilizáveis para facilitar a manutenção e escalabilidade do código.

Componentes Principais:

• Tabela de Dados: Componente responsável por exibir os dados em formato tabular e oferecer funcionalidades de filtragem e paginação.
• Paginação: Componente que controla a navegação entre as diferentes páginas de dados.
• Formulário de Adição: Componente para entrada de novos dados.

Como Executar o Projeto

Certifique-se de ter o Node.js e o npm instalados em sua máquina. Clone o repositório do projeto. Navegue até o diretório raiz do projeto. Instale as dependências usando o comando npm install. Inicie o servidor de desenvolvimento com o comando npm run server. Inicie o front-end em desenvolvimento com o comando npm run dev. Acesse a url estabelecida no terminal, para visualizar o projeto em execução.

Link Figma

Contato

Renan Leandro da Silva

🛠 FullStack Developer Jr.
💼 IPM Sistemas
📍 Santa Catarina - Brazil