3

Localiza Foods - Projeto Localiza Bootcamp

#JavaScript #React Native #CSS
Samuel Costa
Samuel Costa

Hey gnt!


Era meia noite de ontem que eu acabei esse projeto ministrado pelo instrutor Patrick Narciso, fera demais.


Praticamente só dei a minha cara ao projeto mas me agregou muito ter criado essa aplicativo.


A ideia é simples: você aluga um carro pelo Localiza Meoo e, em vez de ter que sair do app pra buscar restaurantes no google maps, usa essa feature direto no app original! (Localiza me contrata kkkkk)


Se você fez esse projeto, deve ter visto como a lib styled-components é útil. O nível de modularidade que ela permite desenvolver é surreal. Pude adaptar os elementos ao estilo mobile de forma desacoplada, sem que um estilo interferisse no outro, sem contar que quando acontecia um bug, eu sabia exatamente onde era!

Como implementar media queries:

export const Container = styled.div `
    width:30vw;
    background-color:${(props)=> props.theme.colors.background2};
    height:100vh;
    overflow-y:auto;
    overflow-x:hidden;


    @media (max-width:600px){
        width:100%;
        height:60vh;
    }
`; 


E assim:


(Renderização no Iphone X)


Outro detalhe: ao criar a modal, percebi que a lógica permitia que toda vez que se clicasse em "esc" a modal era chamada, com conteúdo ou não. Se você está fazendo o projeto faça o seguinte:


useEffect(()=>{
        if(open){
            function onEsc(e){
                if(e.keyCode === 27) onClose();
            };
            window.addEventListener('keydown', onEsc);
    
            // component willunmount
            return () =>{
                window.removeEventListener('keydown', onEsc);
            }
        }
    },[onClose])


    if(!open) return null;


    function onOverlayClick(){
        onClose();
    }


So feche a modal com o key press "esc" se ela já estiver aberta (deve ter formas mais elegantes, se quiser comentar fique a vontade).


Denovo, agradeço ao instrutor Patrick Narciso pelo excelente projeto, muito bem explicado e detalhado, e que me agregou demais. A parte de React foi um farol pra mim, pois entendi até pra aplicar em um projeto em Angular


Deixo aqui o link do github e o deploy no heroku:

https://localiza-foods.herokuapp.com/


Publicação no Linkedin

https://www.linkedin.com/posts/samuel-ferreira-da-costa-kail1999_digitalinnovationone-reactjs-localizamecontrata-activity-6838592347245199360-jUlO


Git do projeto: https://github.com/kailera/localiza_foodsDIO.git

3
25

Comentários (8)

0
Leandro Carvalho

Leandro Carvalho

31/08/2021 21:30

Parabéns pelo PROJETO e obrigado pelas dicas.

1
Samuel Costa

Samuel Costa

31/08/2021 19:07

Obrigado!

0
Rafael Maciel

Rafael Maciel

31/08/2021 21:26

Ficou top! Parabens!

0
Samuel Costa

Samuel Costa

31/08/2021 19:19

Obrigado vlw :)

0
Francisco Silva

Francisco Silva

31/08/2021 19:15

Parabéns Samuel ficou muito bom

0
Samuel Costa

Samuel Costa

31/08/2021 19:15

Obrigado!

0
Luciana Farias

Luciana Farias

31/08/2021 19:13

Parabéns, Samuel Costa!

Muito bom ver seu projeto. Mais e Mais SUCESSO!!!

Luciana Teixeira de Farias

RJ, 31/08/2021

1
Lázaro Bonfim

Lázaro Bonfim

31/08/2021 19:05

Ficou massa!

Usar programação para otimizar e melhorar os sistemas para todos. Dev Full Stack

Brasil