1. Objetivo
Desenvolver um aplicativo em React Native que permita ao usuário:
- Cadastrar novas refeições com nome, descrição, data e horário.
- Editar refeições já cadastradas.
- Excluir refeições da listagem com confirmação.
- Exibir estatísticas resumindo o progresso da dieta (percentual de refeições dentro ou fora da dieta).
- Navegar entre múltiplas telas em pilha.
- Persistir dados localmente no dispositivo.
2. Conceitos e Regras
- Navegação
- Utilizar React Navigation com native stack para gerenciar a transição entre telas.
- Passar parâmetros entre rotas (exemplo: ao editar ou visualizar detalhes de uma refeição).
- Armazenamento Local
- Usar AsyncStorage para salvar todos os dados das refeições.
- Garantir a imutabilidade ao atualizar ou remover registros.
- Estilização
- Utilizar styled-components para estilizar os componentes e organizar temas.
- Gerenciamento de Estado
- Utilizar hooks para controlar a aplicação.
- Renderizar listas corretamente e de forma otimizada (
FlatList ou SectionList para agrupar por data).
- Estrutura da Aplicação
- Tela Inicial: exibe lista de refeições organizada por data, listando todos os cadastros, além de atalhos para cadastrar novas refeições.
- Estatísticas: exibe estatísticas das refeições cadastradas
- Detalhes da Refeição: mostra informações completas com opções de editar ou excluir.
- Formulário de Cadastro/Edição: para inserir ou alterar refeições, com validação dos campos.
- Telas de Feedback: mensagens de sucesso (refeição dentro da dieta) ou falha (fora da dieta).
3. Desenvolvendo o projeto
Para desenvolver esse projeto, recomendamos utilizar as principais ferramentas que utilizamos durante o desenvolvimento do primeiro módulo do Ignite.
Caso você tenha alguma dificuldade você pode ir no nosso fórum e deixar sua dúvida por lá!
Após terminar o desafio, caso você queira, você pode tentar dar o próximo passo e deixar a aplicação com a sua cara. Tente mudar o layout, cores, ou até adicionar novas funcionalidades para ir além 🚀
4. Entrega
Após concluir o desafio, você deve enviar a URL do seu código no Github..
Além disso, que tal fazer um post no LinkedIn compartilhando o seu aprendizado e contando como foi a experiência?
É uma excelente forma de demonstrar seus conhecimentos e atrair novas oportunidades!
Obs: Se você se sentir à vontade, pode postar um print do resultado final e nos marcar!
Vai ser incrível acompanhar a sua evolução! 💜
Feito com 💜 por Rocketseat 👋
1. Objetivo
Desenvolver um aplicativo em React Native que permita ao usuário:
- Cadastrar novas refeições com nome, descrição, data e horário.
- Editar refeições já cadastradas.
- Excluir refeições da listagem com confirmação.
- Exibir estatísticas resumindo o progresso da dieta (percentual de refeições dentro ou fora da dieta).
- Navegar entre múltiplas telas em pilha.
- Persistir dados localmente no dispositivo.
2. Conceitos e Regras
- Navegação
- Utilizar React Navigation com native stack para gerenciar a transição entre telas.
- Passar parâmetros entre rotas (exemplo: ao editar ou visualizar detalhes de uma refeição).
- Armazenamento Local
- Usar AsyncStorage para salvar todos os dados das refeições.
- Garantir a imutabilidade ao atualizar ou remover registros.
- Estilização
- Utilizar styled-components para estilizar os componentes e organizar temas.
- Gerenciamento de Estado
- Utilizar hooks para controlar a aplicação.
- Renderizar listas corretamente e de forma otimizada (
FlatList ou SectionList para agrupar por data).
- Estrutura da Aplicação
- Tela Inicial: exibe lista de refeições organizada por data, listando todos os cadastros, além de atalhos para cadastrar novas refeições.
- Estatísticas: exibe estatísticas das refeições cadastradas
- Detalhes da Refeição: mostra informações completas com opções de editar ou excluir.
- Formulário de Cadastro/Edição: para inserir ou alterar refeições, com validação dos campos.
- Telas de Feedback: mensagens de sucesso (refeição dentro da dieta) ou falha (fora da dieta).
3. Desenvolvendo o projeto
Para desenvolver esse projeto, recomendamos utilizar as principais ferramentas que utilizamos durante o desenvolvimento do primeiro módulo do Ignite.
Caso você tenha alguma dificuldade você pode ir no nosso fórum e deixar sua dúvida por lá!
Após terminar o desafio, caso você queira, você pode tentar dar o próximo passo e deixar a aplicação com a sua cara. Tente mudar o layout, cores, ou até adicionar novas funcionalidades para ir além 🚀
4. Entrega
Após concluir o desafio, você deve enviar a URL do seu código no Github..
Além disso, que tal fazer um post no LinkedIn compartilhando o seu aprendizado e contando como foi a experiência?
É uma excelente forma de demonstrar seus conhecimentos e atrair novas oportunidades!
Obs: Se você se sentir à vontade, pode postar um print do resultado final e nos marcar!
Vai ser incrível acompanhar a sua evolução! 💜
Feito com 💜 por Rocketseat 👋
