Skip to content

JonathasSC/react-native-nubank

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 

Repository files navigation

React Native - Nubank

Projeto feito em React Native como forma de estudo.


Tecnolgias Utilizadas:

javascript react.js

Ferramentas Utilizadas:

vscode androidstudio expo


Detalhes:

Iniciado no dia 02/01/23 e finalizado no dia 05/01/23.

Projeto feito com base em conhecimentos adquiridos no estudo de REACT NATIVE sem auxilio de professores ou guias.


Aprendizado pessoal:

Vinha fazendo alguns projetos voltados para web e desktop, decidi me desafiar e sair um pouco da rotina. decidir pegar um framework que já vinha estudando porém aplica-lo de outra maneira.

Assim decidi desenvolver um clone da interface do Nubank, afim de conhecer o ambiente mobile e o React Native.


Aprendizados Tecnicos:

Além de ser meu primeiro projeto com desenvolvimento mobile que por si só já é uma grande forma de aprendizado, esse projeto me deu oportunidade de entender mais o framework React e sua ramificação para o mobile, react native.

Além disso configurei pela primeira também ferramentas básicas como o Android Studio.

Utilizei o EXPO por sua maior facilidade em iniciar o projeto graças as suas dependências pré instaladas.


Visualizando:

Cabeçalho:

Na parte superior do app é possivel ver o icone de perfil acompanhado com três opções, sendo uma delas com a função de esconder o valor da conta.  

 

gif1


Serviços Comuns:

Logo abaixo da área "Conta", podemos ver os serviços mais comuns dos usuários, de "Transferir" até "Caixinhas".  

  gif2


Cartões e noticias:

Abaixo, teremos a opção "Meus cartões" e depois as noticias e novidades do aplicativo.  

 

gif3


Cartão de crédito:

Descendo um pouco, vemos a área dedicada ao cartão de crédito, com valor da fatura atual e o limite disponivel, podemos também esconder ou deixar visivel o valor da fatura e até mesmo ativar ou desativar o débito automatico.

Também é possivel ver um botão de parcelar as compras.

 

gif3


Acompanhe também:

Em seguida havéra a área para assistencia do cliente, com a opção de Assistente de pagamento, função nova no app indicado pela tarja "novo".

 

gif3


Acompanhe também:

Em seguida havéra a área para assistencia do cliente, com a opção de Assistente de pagamento, função nova no app indicado pela tarja "novo".

 

gif3


Acompanhe também:

Continuando descendo, chegamos na sessões do cliente, onde vemos os serviços "Empréstimos e Seguro de vida".

 

gif3


Acompanhe também:

E no final, temos outras funções de compartilhamento e divulgação de funções do app.

gif3


Como executar em seu ambiente

1. Certifique de ter as dependencias necessárias.

É necessario ter os seguintes softwares:

  1. Git
  2. Expo
  3. NodeJS
  4. React Native
  5. Android Studio/Expo Go
  6. Visual Studio Code ou Semelhante
2. Clone esse repositorio

Para clonar esse répositorio, basta abrir um terminal em uma pasta desejada e executar o comando:

git clone https://github.com/JonathasSC/react-native-nubank

3. Abra o repositorio dentro do VS code

Abra o repositorio dentro do Visual Studio Code ou seu editor de preferencia, logo após abra um terminal e digite o comando:

cd nubank

4. Configure e abra um dispositivo.

Caso voce queira usar seu proprio dispositivo paravisualizar o projeto, baixe o aplicativo disponibilizado pela Expo:

Google Play: https://play.google.com/store/apps/details?id=host.exp.exponent

App Store: https://apps.apple.com/br/app/expo-go/id982107779

Caso queira emular um dispositivo android dentro do seu ambiente, siga esse tutorial usando o Android Studio

https://developer.android.com/studio/run/managing-avds?hl=pt-br

é importante ressaltar que você também terá que baixar o Expo dentro do dispositivo emulado.

5. Execute o projeto:

Após deixar o dispositivo android totalmente preparado volte para o editor de código, dentro do terminal anterior e execute:

npx expo start


Créditos Abaixo

nubank.com.br

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published