Code Monkey home page Code Monkey logo

nlw-expert-mobile's Introduction

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

image

Tela: Detalhe do produto

image

Tela: Carrinho

image

👨‍💻 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:

Lucas-Ts Lucas-React Lucas-React Lucas-React

nlw-expert-mobile's People

Contributors

lukasrib15 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.