Construa um Context.tsx file em seu projeto Como aprendemos em aula, o context armazena os métodos globais da aplicação. Crie seu context seguindo as instruções de sala de aula.
Construa a tela SignIn do seu projeto: Utilizando a view SignIn.tsx que você criou, e com os componentes criados no TP2, crie uma tela de login para seu app.
Construa a tela SignUp do seu projeto: Utilizando a view SignUp.tsx que você criou, e com os componentes criados no TP2, crie uma tela de registro para seu app.
Construa a tela Home do seu projeto: Utilizando a view Home.tsx que você criou, e com os componentes criados no TP2, crie uma tela home para seu app.
Construa a tela Dashboard do seu projeto: Utilizando a view Dashboard.tsx que você criou, e com os componentes criados no TP2, crie uma tela de relatório para seu app.
Construa a tela Settings do seu projeto: Utilizando a view Settings.tsx que você criou, e com os componentes criados no TP2, crie uma tela de configurações para seu app.
Construa a tela Form do seu projeto: Utilizando a view Form.tsx que você criou, e com os componentes criados no TP2, crie uma tela form para seu app que servirá como criação e edição dos seus itens. Não esqueça de usar o useParams para capturar o id de um item quando for editado.
Construa os componentes abaixo: Componentes customizados de form: Crie os componentes eat.tsx, diaper.tsx e sleep.tsx. Eles serão usados dinamicamente dentro do form quando o usuário quiser criar um item de fralda, sono ou amamentação. Componente customizado de AppBar: Para que suas telas tenham um appBar permitindo voltar para outras, crie um componente de AppBar, que será mais customizado contendo backButton, título da página e lixeira, para quando o usuário estiver na tela de editar um item. Componente customizado de Card New Item: Crie um componente que deve receber uma lista que deve conter as ações de criação de item fralda, sono e amamentação, similar ao que o professor ensinou em sala. Componente customizado de Custom List: Como último componente, crie o custom list que será o componente que vai listar os itens na home do web app.
Instale e configure a biblioteca i18next em seu projeto: Instale e configure a biblioteca i18next em seu projeto, adicione ela em seu Context.tsx, crie um arquivo es.json, pt.json e es.json para que seu webapp tenha 3 idiomas. Adicione na tela Settings.tsx a possibilidade de alternar entre os idiomas e salvar a escolha em um localstorage.
Instale e configure o Supabase em seu projeto: Configure em seu Context o Supabase para ser usado em toda sua aplicação.
Configure o SignIn e SignUp com supabase: Configure o login e registro usando a biblioteca supabase.
Configure o Database do Supabase em seu projeto: Configure no arquivo database.ts dentro do services funções de inserir, editar, deletar e listar para usar dentro da aplicação.
Faça com que a tela form funcione com supabase: Até agora, a tela form tem apenas layout. Faça com que a inserção e edição funcionem dentro dela e também a lixeira que fica no AppBar também delete o item. Não esqueça de colocar uma pergunta de confirmação para a ação de deletar.
Faça com que os itens criados apareçam na home: Agora que o form cria itens de verdade, faça com que eles apareçam na listagem da home. Mas não esqueça de paginar para que os itens apareçam de 10 em 10 a cada vez que fizermos scroll para a parte inferior da página. E ordene da mais nova para a mais antiga.
Crie o logout da página: Para terminar, crie o logout da página apagando o localstorage, deslogando no Supabase e redirecionando o usuário para o signIn.