Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/renyzeraa/list-data-application

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.
https://github.com/renyzeraa/list-data-application

react tailwindcss typescript

Last synced: 7 days ago
JSON representation

Host: GitHub
URL: https://github.com/renyzeraa/list-data-application
Owner: renyzeraa
Created: 2024-02-24T20:32:30.000Z (10 months ago)
Default Branch: main
Last Pushed: 2024-03-05T21:46:04.000Z (10 months ago)
Last Synced: 2024-03-05T22:31:58.512Z (10 months ago)
Topics: react, tailwindcss, typescript
Language: TypeScript
Homepage:
Size: 175 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# 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**](https://github.com/renyzeraa)

🛠 `FullStack` Developer Jr.

💼 [**IPM Sistemas**](https://www.ipm.com/)

📍 Santa Catarina - Brazil