https://github.com/ricnaga/kolab-crud
https://github.com/ricnaga/kolab-crud
chakra-ui react-query react-router reactjs typescript vitejs vitest
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ricnaga/kolab-crud
- Owner: Ricnaga
- License: mit
- Created: 2024-12-26T18:38:58.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-07T19:06:40.000Z (over 1 year ago)
- Last Synced: 2025-02-07T20:22:53.955Z (over 1 year ago)
- Topics: chakra-ui, react-query, react-router, reactjs, typescript, vitejs, vitest
- Language: TypeScript
- Homepage:
- Size: 668 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Kolab CRUD
## Sobre
O **Kolab CRUD** é uma aplicação construída com **ReactJS** e **TypeScript**, que explora conceitos avançados como tipagens, manipulação de formulários e integração com bibliotecas modernas. A aplicação foi desenvolvida para demonstrar boas práticas de desenvolvimento front-end, com ênfase na performance.
### Tecnologias Utilizadas
- [**Arquitetura MVVM**](https://learn.microsoft.com/pt-br/windows/uwp/data-binding/data-binding-and-mvvm) - Arquitetura para frontend
- [**TypeScript**](https://www.typescriptlang.org/) - Tipagens avançadas para garantir maior segurança e escalabilidade.
- [**ViteJS**](https://vitejs.dev/) - Bundler rápido e otimizado para o gerenciamento de recursos da aplicação.
- [**React Router**](https://reactrouter.com/) - Roteamento de páginas.
- [**Chakra UI**](https://www.chakra-ui.com/) - UI Kit.
- [**Axios**](https://axios-http.com/docs/intro) - Fetcher de dados.
- [**React Query**](https://tanstack.com/query/v5/docs/framework/react/overview) - Data fetching e cache de dados.
- [**Redux Toolkit**](https://redux-toolkit.js.org/) - Data fetching e cache de dados.
- [**React Redux**](https://redux.js.org/) - Gerenciamento de estado.
- [**ZOD**](https://zod.dev/) - schema validation de dados de formulário.
- [**React Hook Form**](https://www.react-hook-form.com/) - Manipulação de formulários.
- [**Vitest**](https://vitest.dev/) - Testes unitários.
## Requisitos
Para rodar a aplicação, você precisará instalar algumas ferramentas de desenvolvimento. As seguintes tecnologias foram utilizadas neste projeto:
- [Visual Studio Code](https://code.visualstudio.com/) ou outro editor de sua preferência
- [Node.js](https://nodejs.org/en/) para gerenciar as dependências e executar o código
- [Git](https://gitforwindows.org/) para baixar o repositório (se estiver no Windows)
- [yarn](https://yarnpkg.com/) gerenciador de pacotes
- [pnpm](https://pnpm.io/) gerenciador de pacotes
- [playwright](https://playwright.dev/) para executar os testes do frontend
### Como Rodar a Aplicação
1. Clone o repositório:
```bash
git clone https://github.com/Ricnaga/kolab-crud
```
2. Acesse a pasta do projeto:
```bash
cd kolab-crud
```
3. Instale as dependências do projeto:
- Usando yarn, npm ou pnpm:
```bash
$ yarn
$ npm run install
$ pnpm install
```
4. Inicie a aplicação:
```bash
$ yarn dev
$ npm run dev
$ pnpm dev
```
O navegador abrirá automaticamente com a aplicação rodando em http://localhost:3000.
### Testes
```bash
$ yarn test
$ npm run test
$ pnpm test
```
Você pode verificar a cobertura dos testes no terminal ou acessando o arquivo index.html da pasta coverage que foi criada após executar o comando acima
## Contribuições
Se você deseja contribuir para o projeto, fique à vontade para enviar pull requests ou abrir issues.