glaubermatos / coffee-delivery

Coffee delivery app ☕, desenvolvido desenvolvido do total zero para consolidar os conhecimentos em animações e microinterações no react native. Desafio do ignite da @Rocketseat 🚀

🚧 Desafio completo! 🚧

🏁 Tópicos

👉 Sobre
👉 Funcionalidades
👉 Layout
👉 Animações
👉 Demonstração
👉 Como executar
👉 Tecnologias
👉 Autor
👉 Licença

💻 Sobre o projeto

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

⚙️ Funcionalidades

• 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

Layout da aplicação Figma

---

⚙️ Animações

Splash screen

• Animação de entrada
• Animação da logo

Splash.animada.mp4

Home

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

Carrinho

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

Pedido confirmado

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

🕹️ Demonstração

---

🚀 Como executar o projeto

Pré-requisitos

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

🧭 Rodando a aplicação com expo

# 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

🛠 Tecnologias

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

Utilitários

• Editor: Visual Studio Code
• Fontes: Baloo 2 | Roboto

---

🦸‍♂️ Autor

_{🌟 Glauber de Oliveira Matos 🌟}

📝 Licença

Este projeto esta sobe a licença MIT.

Feito com 😆 por Glauber de Oliveira Matos 👋🏽 Entre em contato!