A ideia desta aplicação é demonstrar o consumo de uma API fictícia local utilizando json-server (mais detalhes abaixo).
Vuttr é uma feramenta de cadastro, consulta e exclusão de ferramentas/bibliotecas de desenvolvimento. Usilizando uma fake-api com banco de dados através de um arquivo db.json podemos efetuar todas as tarefas de CRUD (Create, Read, Update e Delete), porém, nesta aplicação não efetuaremos o update pelas diretivas do projeto. Vuttr tembém tem um sistema de busca provido pelo json-server e implementado com debounce.
json-server tem a finalidade de proporcionar uma API rapida para propositos de testes através.
A mesma provê as principais funcionalidades de uma API REST como o respeito as verbos HTTP como: GET, POST, PUT, PATCH e DELETE. Tembém possui filtros para listagem através de query-params. Enfim, muito completa.
Após clonar o repositório do projeto, siga os passos abaixo.
Acesse a pasta backend e instale as dependências com o seguinte comando em seu terminal:
npm installou
yarnApós o termino da instalação, ainda na pasta backend, inicie o servidor com o seguinte comando, também em seu terminal:
npm run startou
yarn startUma servidor json-server será iniciado e poderá ser utilizado pela URL http://localhot:3333.
Voltando a pasta raiz do projeto, acesse a pasta vuttr para iniciarmos o front-end da aplicação.
Dentro da pasta instale as dependências, digitando em seu terminal o comando:
npm installou
yarnApós o termino da instalação, ainda dentro da pasta vuttr, digite o seguinte comando em seu terminal para iniciar a aplicação em ambiente local:
npm run startou
yarn startPara efetuar 0 build do fron-end em produção pasta rodar o seguinte comando no terminal:
npm run buil
ou
yarn buildOBS: O servidor escohido deve estar configurado para o modelo de SPA. Uma definição simples pode ser encontrada aqui (em inglês).
Para este projeto foi escolhida a biblioteca ReactJS. O ReactJS apresenta todo um ecosistema em torno de si com outras libs que resolvem mais demandas de uma aplicação web como SPA, tais como: Navegação (rotas), carregamento de svgs, css-in-js (styled-components, nesse caso), gerenciamento de estado, etc.
Foi utilizado o instalador padrão do react conhecido como CRA (Create React App).
Abaixo segue uma pequena demonstração:
Desktop
Mobile
Dark-mode
Link da aplicação hospedado na Netlify: 🔗vuttr-tools.netlify.app
Licença MIT