Este é um projeto desenvolvido com uma abordagem onde a filtragem de dados ocorre no lado do cliente, em vez de depender exclusivamente do processamento no servidor. Foi criado uma aplicação de filtro onde ocorre apenas 1 renderização e em real time, assim, evitando também o travamentos no lado do cliente.
- React: Uma biblioteca JavaScript para criar interfaces de usuário.
- Typescript: Linguagem baseada no Javascript para fazer a tipagem.
- Vite: Um build tool que permite um desenvolvimento rápido e eficiente para projetos front-end.
Antes de iniciar, certifique-se de ter o Node.js instalado em sua máquina.
-
Navegue até o diretório do projeto:
cd filtro-produto
-
Instale as dependências:
npm install
-
Inicie a aplicação:
npm dev
Isso iniciará a aplicação em modo de desenvolvimento. Você poderá acessá-la no navegador em http://localhost:5173.
- Página inicial consome a api fornecida.
- Página inicial com lista dos produtos.
- Página abre um modal com detalhes de cada produto.
- Página tem responsividade e o modal também.
- Funcionalidade de filtrar.
- Infinity scroll.
A estrutura do projeto segue os padrões comuns de uma aplicação React criada com o Vite template. Aqui está uma visão geral da estrutura de diretórios:
filtro-produto/
├── public/
│ └── ...
├── src/
│ ├── components/
│ │ ├── Button/
│ │ │ ├──index.tsx
│ │ │ └── styles.module.css
│ │ └── ...
│ ├── page/
│ │ ├── Home/
│ │ │ ├──index.tsx
│ │ │ └── styles.module.css
│ │ └── ...
│ └── App.tsx
├── .gitignore
├── package.json
└── README.md