https://github.com/anthonymnf/listagemdedados-rocketseat

Bem-vindo ao repositório do projeto de Listagem de Dados desenvolvido durante o evento "React na Prática" da RocketSeat, no qual eu fiz algumas melhorias! Este projeto é uma demonstração da aplicação de diversas tecnologias e funcionalidades para criação de uma lista dinâmica de dados com recursos avançados.
https://github.com/anthonymnf/listagemdedados-rocketseat

radix-ui react-hook-form reactjs spa tailwind-css typescript

Last synced: 28 days ago
JSON representation

Bem-vindo ao repositório do projeto de Listagem de Dados desenvolvido durante o evento "React na Prática" da RocketSeat, no qual eu fiz algumas melhorias! Este projeto é uma demonstração da aplicação de diversas tecnologias e funcionalidades para criação de uma lista dinâmica de dados com recursos avançados.

• Host: GitHub
• URL: https://github.com/anthonymnf/listagemdedados-rocketseat
• Owner: anthonymnf
• Created: 2024-02-22T20:46:39.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-02-29T11:15:09.000Z (11 months ago)
• Last Synced: 2024-11-12T06:14:55.303Z (3 months ago)
• Topics: radix-ui, react-hook-form, reactjs, spa, tailwind-css, typescript
• Language: TypeScript
• Homepage:
• Size: 67.4 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Projeto de Listagem de Dados - RocketSeat 🚀

Bem-vindo ao repositório do projeto de Listagem de Dados desenvolvido durante o evento "React na Prática" da RocketSeat! Este projeto é uma demonstração da aplicação de diversas tecnologias e funcionalidades para criação de uma lista dinâmica de dados com recursos avançados.

## Tecnologias Utilizadas

- React

- React Router DOM

- Tailwind CSS

- Tailwind Variants

- Tailwind Merge

- React Query

- React Hook Form

- Radix UI

## Funcionalidades Implementadas

1. Lista de dados dinâmica alimentada por um servidor JSON.

2. Filtro para pesquisa na lista.

3. Criação e edição de tags associadas aos dados.

4. Paginação para uma navegação fácil.

5. Requisições HTTP otimizadas com React Query.

6. Validação de formulários com React Hook Form e Zod.

## Melhorias Adicionadas

1. Opção de edição individual de tags.

2. Checkbox para seleção múltipla de tags.

3. Layout responsivo para dispositivos móveis.

4. Formulário de edição de tags validado com React Hook Form.

5. Indicador de carregamento na tela inicial.

6. Opção de escolher quantidade de dados exibidos por página.

## Como Visualizar o Projeto

1. Clone este repositório em sua máquina local.

2. Instale as dependências utilizando `npm install`.

3. Execute o servidor JSON com `npm run server`.

4. Inicie o projeto React com `npm start`.

## Vídeo do Projeto

[[Vídeo do projeto!](https://drive.google.com/file/d/1UB4RHwBgm7cJeY3IoLmvsDRn02knSl9O/view?usp=sharing)]

Sinta-se à vontade para explorar, contribuir ou fornecer feedback. Este projeto é uma constante evolução, e sua participação é valorizada. Divirta-se codando! 🌟