mdccg / reddit-clone

Clone simples do Reddit usando a biblioteca de interface de usuário restyle (Shopify/restyle) e sem fins lucrativos. Todos os direitos reservados à Reddit, Inc.

reddit-clone

Sumário

• reddit-clone
  • Sumário
  • To-do list
  • Motivação
  • Pilha de tecnologia
  • Galeria
  • Como rodar
    • Pré-requisitos
    • Passo a passo

To-do list

• Remover styled-components
• Aplicar tema escuro na tela de carregamento
• Adicionar o dropdown da tela inicial
• Criar o componente Post
• Adicionar animação nos números
• Adicionar as outras pilhas de navegação
• Corrigir o bug das animações assíncronas na tela de carregamento
• Criar uma função para mudar aleatoriamente o número de votos de cada post

Motivação

Este app é um reflexo do meu esforço em explorar e testar a biblioteca de interface de usuário restyle em um ambiente prático. Durante o processo, busquei compreender profundamente suas nuances e capacidades. Inicialmente, o restyle se revelou uma ferramenta simplificada e intuitiva para o design de interfaces, tornando a estilização de componentes uma tarefa ágil.

No entanto, à medida que o projeto avançava e a complexidade das interfaces crescia, encontrei desafios significativos. Em particular, quando lidava com componentes que demandavam uma extensa personalização com várias propriedades CSS, deparei-me com a necessidade de recorrer a StyleSheet, uma abordagem à moda antiga, para alcançar os resultados desejados. Esse ponto de inflexão me levou a questionar a eficácia do restyle em lidar com situações mais complexas de estilização.

Embora o restyle tenha a vantagem de centralizar detalhes importantes, como paleta de cores, espaçamentos e fontes tipográficas, em uma única constante para todos os componentes integrados ao framework, essa unificação não se mostrou suficiente para superar suas limitações em comparação com outras bibliotecas estabelecidas.

Em retrospectiva, percebi que muitas das funcionalidades que o restyle oferece já são habilmente executadas pelo styled-components, tornando-o uma escolha mais robusta e versátil para a estilização de componentes. Portanto, embora tenha sido uma experiência educativa explorar o restyle, não fiquei totalmente satisfeito com sua adequação para projetos mais complexos e desafiadores.

Este foi o terceiro repositório de código apresentado no Curso Superior de TSI do IFMS como requisito para obtenção da nota parcial das atividades da unidade curricular Programação para Dispositivos Móveis II.

← Repositório anterior	Próximo repositório →

Pilha de tecnologia

Papel	Tecnologia
Biblioteca de desenvolvimento	React Native
Bundler	Expo
Linguagem de programação	TypeScript
Biblioteca de interface de usuário	restyle

Os créditos pelas mídias disponibilizadas estão disponíveis aqui.

Galeria

Como rodar

Pré-requisitos

• Node;
• Yarn (opcional);
• Dispositivo móvel:
  • Expo Go.

Passo a passo

1. Clone o repositório de código em sua máquina;

2. Abra um shell de comando de sua preferência (prompt de comando, PowerShell, terminal etc.);

3. Instale as dependências do projeto através do seguinte comando:

$ npm install

Caso esteja utilizando o gerenciador de pacotes Yarn, execute o seguinte comando como alternativa:

$ yarn

4. Execute o seguinte comando para iniciar o app:

Para npm:

$ npm run start

Para Yarn:

$ yarn start

5. Uma vez iniciado, aparecerá um QR Code. Você deve escaneá-lo com o aplicativo Expo Go, disponível para Android e iOS;

6. Como alternativa, você pode executar o app no seu navegador, pressionando o atalho w. Entretanto, alguns módulos podem não funcionar na versão web do app.