NLW Expert

Esse projeto foi realizado durante o evento da rocketseat chamado NLW Expert e, como estou em busca de novos conhecimentos na área de desenvolvimento, resolvi seguir as aulas sobre React Native para mobile.

OBS: Nesse projeto contém algumas melhorias/alterações realizadas por mim

🚀 Tecnologias

Projeto desenvolvido com as seguintes tecnologias:

• React Native
• TypeScript
• Tailwindcss
• Jest
• Moti
• Expo
• Async Storage
• Zustand
• Figma
• Git e Github

💻 Principais issues

• Desenvolvimento do design utilizando o Tailwindcss
• Persistência dos dados
• Gerenciamento de dados com o zustand
• Navegação de telas com expo-router

👨‍💻 Melhorias que implementei

• Algumas animações utilizando o moti
• Usando variáveis de ambiente para dados sensíveis com dotenv
• Animações e gestos para micro-interações
• Melhoria nas transições de tela no expo-router
• Realizando teste unitários com o Jest
• Utilizando Snackbar

Versão Mobile:

Tela: Faça seu pedido

Tela: Detalhe do produto

Tela: Carrinho

👨‍💻 Usando Jest

Uso do Jest na aplicação:

// Arquivo stores/tests/cart-store.spec.ts

import { PRODUCTS } from "@/utils/data/products"
import { useCartStore } from "../cart-store"

jest.mock('@react-native-async-storage/async-storage', () =>
  require('@react-native-async-storage/async-storage/jest/async-storage-mock')
);

describe("Testing if cart-store is working as expected", ()=>{
  test("Adding item in cart-store", ()=>{
    const {add} = useCartStore.getState()
    add(PRODUCTS[0])
    add(PRODUCTS[0])
    add(PRODUCTS[1])
    const {products} = useCartStore.getState()
    expect(products).toEqual([{...PRODUCTS[0], quantity: 2}, {...PRODUCTS[1], quantity: 1}])
  })

  test("Removing an item in cart-store", ()=>{
    const {remove} = useCartStore.getState()
    remove(PRODUCTS[0].id)
    const {products} = useCartStore.getState()
    expect(products).toEqual([{...PRODUCTS[1], quantity: 1}])
  })

  test("Restoring an item deleted to the cart-store", ()=>{
    const {insert} = useCartStore.getState()
    insert(PRODUCTS[0])
    const {products} = useCartStore.getState()
    expect(products).toEqual([{...PRODUCTS[0], quantity: 2}, {...PRODUCTS[1], quantity: 1}])
  })

  test("Clearing the array of products in cart-store", ()=>{
    const {clear} = useCartStore.getState()
    clear()
    const {products} = useCartStore.getState()
    expect(products).toEqual([]) 
  })
})

Utilizei como principais ferramentas: