Objetivo do projeto

Criar um sistema de cadastro de crianças, onde constara os dados mais importantes para identificá-la.

Itens

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

Ferramenta Usadas

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...

Iniciando e configurando projeto

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

Hospedagem

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.

Onde posso ver?