Open Source Ecosystems

Introdução

Este projeto tem a intenção de validar meus conhecimentos perante o React Native.

Tecnologias utilizadas

Segue lista das bibliotecas principais utilizadas no app para a realização:

Expo
TypeScript
Axios
Styled-components
Google fonts
FlashList
Zustand
jest

Escolha das Libs

Expo: foi escolhida para agilizar o desenvolvimento sendo uma recomendação do próprio react-native utilizar um framework como expo.
Axios: Foi escolhido o axios tendo em mente que é uma lib que tenho mais conhecimento, além de ser de fácil utilização.
Styled-components: Foi escolhido o styled-components pois é a tecnologia de estilos que eu já utilizo no dia a dia, agilizando a parte de desenvolvimento.
FlashList: Há alguns estudos referente a FlashList vs FlatList mostrando os ganhos de performance em momentos de renderização de listas. Exemplo: https://shopify.engineering/instant-performance-upgrade-flatlist-flashlist
Zustand: Já possuo conhecimento com context, redux, redux saga, toolkit, e gostaria de finalizar um projeto com algo diferente, e olhando ao projeto do https://github.com/expo/react-conf-app, utilizei de inspiração para utilizar o zustand também!

Arquitetura de Pastas

Atuei em alguns projetos durante minha carreira, com organizações diferentes, escolhi uma que se aproximasse ao máximo de uma estrutura que me agradasse, tudo separado ficando de fácil uso pra qualquer pessoa que entrasse e fosse utilizar o projeto.


├── src
│   ├── assets          # Assets folder for app icon and splashscreen
│   ├── types           # Types declarations to images .png.d.ts or .svg.d.ts
│   ├── assets          # Assets folder for icons, illustrations
│   ├── constants       # All constants reutilized
│   ├── components      # Components reutilized
│   ├── routes          # Navigation configuration
│   ├── screens         # Screens (can have or not a folder with specific components)
│   ├── api             # API creation
│   ├── hooks           # Hooks used on all project
│   ├── store           # Zustand stores
│   ├── stories         # StorybookContent
│   ├── theme           # Files to configure Tamagui tokens and fonts
│   ├── utils           # Utils methods

Segue imagem com conteúdo representado.

Setup

Instale o NVM ou Node.js LTS release - v20.12.0(Versão utilizada)
Git
Commitzen
Yarn
Expo CLI
Android Studio - Versão recomendada Jellyfish 2023.3.1
Graddle version - Versão 8.6
XCode - versão recomendada 15.4
Testes realizados no iOS 17.4 - iPhone 15 Pro e no Pixel 8(API 34)

Rodar o projeto

Clone o projeto

 git clone https://github.com/pedro-candido/store.git

Instale as dependências rodando:

 yarn

 // Apenas rode se for utilizar o iOS
 yarn clean:ios

Instale os builds nos respectivos emuladores.
```
yarn android
yarn ios
```

Para utilizar o storybook

Vá para o arquivo ./App.tsx e troque o return

   // from
  return <Routes />;
  // to
  return <AppEntryPoint />

Rode o yarn start novamente ou atualize o metro.

Melhorias para o projeto caso fosse um projeto para Produção

Adicionar rastreamento de erros e observabilidade com ferramentas como Dynatrace, Sentry, Crashlytics ou Datadog.
Adicionar SplashScreen animada.
Telas de Login, Cadastro, perfil e finalização de compra.
Ferramentas para Testes A/B, feature flags e tagueamento como o Firebase/Analytics.
Adição de recursos OTA(Over the air).
Documentação de Code Style.