👉 Sobre
👉 Funcionalidades
👉 Layout
👉 Animações
👉 Demonstração
👉 Como executar
👉 Tecnologias
👉 Autor
👉 Licença
Coffee Delivery
Desafio 5 da trilha de React Native do Ignite.
O objetivo deste desafio é reforçar os conceitos de Animações e Microinteração no React Native.
O desafio proposto consiste em desenvolver do zero, toda a interface visual de um app de delivery de café, aplicando animações e microinterações, como:
- Animações com Reanimated
- Microinterações
- Feedback tátil e sonoro
- Splash screen animada;
- Listagem dos cafés em destaque;
- Listagem dos cafés por categoria;
- Ver detalhes do café;
- Adicionar um café no carrinho;
- Adicionar items ao carrinho;
- Remover items do carrinho;
- Finalizar pedido;
Layout da aplicação Figma
- Animação de entrada
- Animação da logo
Splash.animada.mp4
Na tela Home
temos 5 tipos de animações implementadas:
- Entrada dos itens da listagem geral de cafés (listagem na horizontal).
- Entrada dos itens da listagem de cafés por categoria (listagem na vertical).
- Alteração do Header e da listagem geral de cafés no momento de scroll na listagem de cafés por categoria.
- Toast informando que o café foi adicionado ao carrinho.
Home.mp4
Na tela de adicionar um café ao carrinho temos 2 tipos de animações:
- Animação do tamanho do café selecionado.
- Animação da cor do botão, em caso o tamanho estar ou não selecionado.
- Remover item do carrinho a partir de um swipe.
adiciona.item.no.carrinho.mp4
remove.item.do.carrinho.mp4
Na tela de pedido confirmado temos 2 tipos de animações:
- Animação entrada do SVG.
- Animação de entrada dos textos.
pedido.confirmado.mp4
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js, NPM. Além disto é bom ter um editor para trabalhar com o código como VSCode
# Clone este repositório
$ git clone https://github.com/glaubermatos/coffee-delivery.git
# Acesse a pasta do projeto no seu terminal/cmd
$ cd coffee-delivery
# Instale as dependências
$ npm install
# Execute a aplicação em modo de desenvolvimento
$ npx expo start
Este é um projeto criado com o Expo. As seguintes ferramentas foram usadas na construção do projeto:
App (React Native + TypeScript)
- Styled Components
- React Navigation
- Phosphor React Native Icons
- React Native Gesture Handler
- React Native Reanimated
- React Native Snap Carousel
- React Native Toast Message
- Expo AV
- React Native Async Storage
Veja o arquivo package.json
- Editor: Visual Studio Code
- Fontes: Baloo 2 | Roboto
Este projeto esta sobe a licença MIT.
Feito com 😆 por Glauber de Oliveira Matos 👋🏽 Entre em contato!