Loading repository data…
dfsilvadev / repository
Aplicação front-end para gerenciamento de contatos, construída com React 19, TypeScript e Vite, utilizando Redux Toolkit para estado global, Axios para comunicação com a API, Radix UI para componentes acessíveis e Tailwind CSS para estilização utilitária.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Aplicação front-end para gerenciamento de contatos, construída com React 19, TypeScript e Vite, utilizando Redux Toolkit para estado global, Axios para comunicação com a API, Radix UI para componentes acessíveis e Tailwind CSS para estilização utilitária.
O back-end correspondente está disponível em: contacts-api.
O projeto lista, cria, edita, filtra, pesquisa e remove contatos, com suporte a paginação e categorização. A UI utiliza componentes desacoplados e controladores (hooks) que orquestram chamadas assíncronas via thunks do Redux Toolkit.
Estrutura simplificada dos diretórios mais relevantes:
src/
app/
App.tsx # Provider do Redux e layout raiz
store.ts # Configuração do Redux Toolkit
content/
contacts.tsx # Página/Seção principal de contatos
hooks/
useContactsContentController.ts
features/
contacts/
slices/contactSlices.ts # Thunks e reducers de contatos
services/contactServices.ts # Camada de API para contatos
selectors/contactSelectors.ts
categories/
slice/categorySlices.ts # Thunks e reducers de categorias
service/categoryServices.ts # Camada de API para categorias
ui/
slices/uiSlices.ts # Estado de modal (open/type/content)
components/
... # Tabela, Header, Formulários, Modal, etc.
hooks/
useAppDispatch.ts
useAppSelector.ts
libs/
axios/axiosInstance.ts # Instância axios com baseURL
axios/axiosService.ts # Classe fábrica de Axios
redux/handleThunkError.ts # Normalização de erros em thunks
redux/checkAndRunPostAction.ts # Pós-ação condicional após thunk
helpers/ # Datas, máscaras, etc.
utils/cn.ts # Merge de classes (clsx + tailwind-merge)
ContactsContent que recebe dados do controlador.useContactsContentController gerencia paginação, dispara thunks (, , ) e integra com o estado de UI (modal).Selected from shared topics, language and repository description—not editorial ratings.
Weverson-Luan /
💻 Aplicação desenvolvida para estar desafiando minhas habilidades como front end, utilizando as melhores tecnologias do mercado.
34/100 healthfetchContactsdeleteContactfetchCategoriescontact, category e ui; seletores memorizados com createSelector.ContactServices e categoryService encapsulam chamadas à API, usando a instância de Axios configurada.DateHelper), máscara de telefone (mask.ts), composição de classes (cn.ts) e normalização de erros (handleThunkError).App.tsx registra o Provider do Redux e renderiza ContactsContent.useContactsContentController efetua:
fetchContacts({ page, limit }) no mount e a cada mudança de página.fetchCategories() no mount.deleteContact(contactId) seguido de fetchContacts e closeModal via checkAndRunPostAction quando a deleção é bem-sucedida.contactSlices.ts define thunks (findAll, findOne, create, update, delete, search, filter) e gerencia loading, success, error, list, selected.contactSelectors.ts provê seletores memorizados para details e pagination com fallback seguro.components recebem dados já moldados e disparam callbacks do controlador (ex.: onChangePage).fetchContacts + seletor de paginação.createContact, updateContact, deleteContact via ContactServices.searchContacts e filterContacts com querystring construída e URLSearchParams.fetchCategories popula opções para formulário/filtro.uiSlices (openModal, closeModal).createAsyncThunk + createSlice; reset de estado com reset em slices.handleThunkError converte erros em ErrorResponse estável.axiosInstance.ts usando VITE_API_BASE_URL.cn para mesclar classes com clsx e tailwind-merge.react-hook-form e validadores com zod disponíveis (onde aplicável).VITE_API_BASE_URL apontando para a URL base da API (ex.: http://localhost:3333).yarn ou npm install ou pnpm i.env na raiz com:VITE_API_BASE_URL=http://localhost:3333
yarn dev
yarn build
yarn preview
dev: inicia o Vite em modo desenvolvimento.build: compila TypeScript e gera build de produção do Vite.preview: serve o build localmente.lint: executa ESLint no diretório src com --max-warnings=0.format: formata os arquivos de src com Prettier.prepare: prepara hooks do Husky.tailwind:init: inicializa Tailwind (config e PostCSS).createSelector evita re-renderizações desnecessárias.loading/error no estado global (pronto para UI refletir).Qualquer dúvida, consulte o código em src/ e o back-end em contacts-api.