Criar um sistema de cadastro de crianças, onde constara os dados mais importantes para identificá-la.
- Home
Onde possui dois botões, cadastre e lista de matriculados
- Cadastre
Redireciona para o formulário de cadastro
- Lista de matriculados
Onde listara todas as crianças matriculadas na ong e para ver os detalhes em cada registro tem um botão de Editar que ao clicar será redirecionado para a página de edição de formulário
Para o desenvolvimento da aplicação, foi usa uma api chamada sheetdb que basicamente faz conexão com uma planilha da Excel do google, foi usado também o ReactJs com o TypeScript, boostrap, reactstrap, e os módulos que estão abaixo...
- npx create-react-app screlfe
- yarn
- yarn add typescript -D
- yarn tsc --init
- yarn add axios
- yarn add dotenv
- yarn add @types/react
- yarn add @types/react-dom --save -D
-
No seu index.html coloque essa linha...
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
- yarn add styled-components
- yarn add @types/styled-components --save -D
- yarn add @material-ui/core
- yarn add react-dotenv
- yarn add reactstrap react react-dom
- yarn add bootstrap --save
- Import no seu arquivo..
import 'bootstrap/dist/css/bootstrap.min.css';
- yarn add react-router-dom
- yarn add @types/jquery --save
O sistema foi hospedado na plataforma vercel de forma gratuita e seu domínio fico o padrão que a plataforma disponibiliza. Lembrando que esse sistema é apenas uma amostra do original, já que o original seu link não será divulgado.
Experimente o sistema acessando por esse link: Clique aqui