Skip to content

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 🚀

Notifications You must be signed in to change notification settings

glaubermatos/coffee-delivery

Repository files navigation

GitHub language count Repository size GitHub last commit License



🚧 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

Vídeo de demonstração do app coffee-delivery


🚀 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:

Veja o arquivo package.json

Utilitários


🦸‍♂️ Autor

glaubermatos
🌟 Glauber de Oliveira Matos 🌟

Linkedin Badge

📝 Licença

Este projeto esta sobe a licença MIT.

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

About

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 🚀

Topics

Resources

Stars

Watchers

Forks