gabrielbarth/rocketshoes-mobile

React Native ecommerce app :iphone:

💻 Web version here

🇺🇸
Mobile app (android and iOS) to simulate shoes ecommerce in two screens: Home and Cart. Developed during GoStack10 bootcamp seventh challange. This challange basically consisted in transform the web app to react native app.
This challange allowed clarify many concepts about flux architecture, especially still using class components and also without the usage of react hooks.

[UPDATING TO CHALLANGE 08]: From the commit refactoring components to react-hooks this app started to use react-hooks.

🇧🇷
Aplicativo mobile para simular um ecommerce de tênis em duas telas: Home e Carrinho. Desenvolvido durante o desafio 07 do bootcamp GoStack10. Este desafio consistiu basicamente em transformar a aplicação web que foi desenvolvida em aplicativo react-native.

O desenvolvimento desse app permitiu esclarecer muitos conceitos sobre a arquitetura flux, sobretudo ainda utilizando componentes de classe e também sem a utilização dos react hooks.

[ATUALIZAÇÃO DO DESAFIO 08]: A partir do commit refactoring components to react-hooks este app passou a usar react-hooks.

🔎 Main points covered on project / Principais pontos

🇺🇸

• We styled the application with styled-components, which facilitates and centralizes the styling of the app's components;
• We use JSON-SERVER to simulate data from an API and provide the necessary information;
• We use Redux to manipulate the global states of the application;
• We also use Redux-saga, which allowed us to verify certain information before actually making changes to the store (global state of the application)
• We connected the application with reactotron, which allowed us to follow the flow of information through the application, basically: COMPONENT -> ACTION -> REDUCER (STORE CHANGE) -> REDUX NOTIFY ALL COMPONENTS ABOUT THAT UPDATE AND WHICH IS WAITING FOR THE NOTICE IT IS RENDERED / UPDATED.

🇧🇷

• Estilizamos a aplicação com styled-componentes, o que facilita e centraliza a estilização dos componentes do app;
• Utilizamos JSON-SERVER para simular dados de uma API e fornecer as informações necessárias;
• Utilizamos o Redux, para manipulação dos estados globais da aplicação;
• Tamém usamos o Redux-saga, que permitiu verificar determinadas informações antes de factualmente realizar mudanças no store (estado global da aplicação);
• Conectamos a aplicação com o reactotron, que nos permitiu acompanhar o fluxo de informações pela aplicação, basicamente: COMPONENTE -> ACTION -> REDUCER (ALTERAÇÃO DA STORE) -> REDUX INFORMA TODOS OS COMPONENTES SOBRE A ATUALIZAÇÃO E, O COMPONENTE QUE ESTIVER AGUARDANDO ESSA ATUALIZAÇÃO É RENDERIZADO/ATUALIZADO.

💻 View of interface / Visão da interface

🔗 Project dependencies / Bibliotecas utilizadas

☑️ react  // react lib
☑️ @react-navigation/native (v5)  // allows outing and navigation RN apps - version 5
☑️ react-native-flash-message  // easily and highly customizable flashbars, top notifications or alerts
☑️ react-native-vector-icons   // allows to use icons from several libs
☑️ axios   // Promise based HTTP client for the browser and node.js
☑️ styled-components   // allows to write actual CSS code to style components
☑️ prop-types // used to document the intended types of properties passed to components
☑️ redux   // allows manage app global state
☑️ redux-saga   // allows manage app global state using middlewares (each other things)
☑️ reactotron-react-js // desktop app for inspecting informations through the app
☑️ reactotron-redux   // allow us observing using of middlewares in API requests
☑️ react-dom // allows to load react through <script> tag
☑️ react-router-dom // DOM bindings for React Router
☑️ immer  // allows create the next immutable state by mutating the current one
☑️ polished  // a lightweight toolset for writing styles in JavaScript
☑️ history  // allows manage session history with JavaScript
☑️ Intl  // common features to internationalization builders and other functions included in JS

Development libs / Bibliotecas de desenvolvimento utilizadas no projeto:
☑️ eslint // finds and fixes code errors
☑️ prettier // makes code prettier

Desafio 7: Arquitetura Flux

“Não espere resultados brilhantes se suas metas não forem claras”!

Sobre o desafio   |    Entrega   |    Licença

🚀 Sobre o desafio

Nesse desafio você migrará o projeto de e-commerce criado na web para dispositivos móveis utilizando React Native. O projeto terá as mesmas funcionalidades que o projeto web mas deve possuir uma interface mobile.

Um pouco sobre as ferramentas

Utilize ESLint, Prettier, EditorConfig, React Navigation e todas outras ferramentas que vimos até aqui no mundo do React Native.

Layout

O layout do projeto está em anexo com esse desafio. O arquivo .sketch (no diretório .github) pode ser aberto no Figma, que é uma ferramenta de prototipação online.

Desafio 8: Utilizando React Hooks

“Não existe linha de chegada, a vitória está em se manter correndo”!

Sobre o desafio   |    Entrega   |    Licença

🚀 Sobre o desafio

Nesse desafio você deve converter a aplicação que você desenvolveu no desafio do módulo anterior para utilização de React Hooks.

📅 Entrega

Esse desafio não precisa ser entregue e não receberá correção, mas você pode ver o resultado do código do desafio aqui. Após concluir o desafio, adicionar esse código ao seu Github é uma boa forma de demonstrar seus conhecimentos para oportunidades futuras.

📝 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

---

Feito com ♥ by Rocketseat 👋 Entre na nossa comunidade!