Giter Club home page Giter Club logo

desafio-react-native's Introduction

React Native Code Challenge

Olá,

Bem-vinda(o) à Popcode!

Esse teste servirá para que a gente conheça um pouco mais sobre suas habilidades técnicas no desenvolvimento de aplicativos com React Native. Alguns dias após você finalizar o desafio (no máximo, uma semana), enviaremos um feedback com nossas impressões e um possível convite para uma conversa mais detalhada sobre as decisões que você tomou durante o desenvolvimento.

Vale lembrar que aqui na Popcode nós prezamos pela qualidade da experiência dos nossos usuários e pela qualidade do código que nós produzimos. Aplicar boas práticas de programação é uma regra pra gente ;)

O Problema

Nossa rotina é pautada por diversas atividades: trânsito, família, compras, estudos, exercícios físicos, reuniões, viagens… Dá pra ficar cansado só de pensar em todas as tarefas que temos que realizar todos os dias.

Para aumentar a produtividade e não acabar esquecendo coisas muito importantes (como pagar a fatura do cartão de crédito 🙈), muitas pessoas têm recorrido a aplicativos que organizam suas listas de tarefas, os famosos To-Do Apps. Eles são uma mão na roda e seu uso é cada vez mais frequente no mundo mobile.

Como não queremos ficar para trás, neste desafio nosso objetivo será construir nosso próprio aplicativo de tarefas, o uGO To-Do!

O Desafio

O seu desafio consiste em melhorar nosso aplicativo, tanto pela correção de pequenos bugs do atual código, quanto pela adição de novas funcionalidades (listadas abaixo). Algumas destas tarefas envolvem integração com uma API que foi especialmente desenvolvida para este desafio, é bem simples e também está inclusa neste repositório.

Toda estrutura já está pré-configurada, incluindo a interface gráfica e os estilos que devem ser utilizados. Entretanto, você é livre para componentizar e/ou refatorar qualquer parte (incluindo a arquitetura) do app.

Lembre-se, quanto mais claro seu código e suas decisões estiverem para o nosso time de recrutamento, melhor será o seu desempenho na avaliação. Se precisar justificar o uso de alguma dependência ou alguma decisão de arquitetura, basta comentar no corpo do e-mail de submissão (instruções abaixo).

Obs.: nosso time de design estava inspirado nesse dia, aproveite para fazer um aplicativo massa!

Design

O design completo do app está disponível em duas plataformas: InVision e Figma.

Para acessar o modo de inspect nessas plataformas, você precisará estar logado. O modo inspect permite que você tenha acesso às medidas, margens e códigos de cores das telas do app. Para isto, basta utilizar os dados abaixo:

InVision

OBS.: Se após o login, aparecer uma tela para selecionar um time, selecione a opção Personal

Figma

Desenvolvimento

Pré-requisitos

  • Git: para clonar o repositório
  • NodeJS (v10+): para rodar a aplicação
  • Yarn: para gerenciar pacotes
  • Ambiente Android (com React Native CLI): para executar o app

Executando o projeto

Clone (ou faça um fork) o repositório do desafio

$ git clone https://github.com/PopcodeMobile/desafio-react-native.git

Entre no diretório do projeto e instale as dependências

$ cd desafio-react-native
$ yarn setup

Inicie o servidor para ter acesso a API, que ficará disponível no endereço http://localhost:3000

$ yarn server

Vale lembrar que algumas requisições serão bem sucedidas e outras não. O app deve estar preparado para ambos os cenários. A documentação completa estará disponível em http://localhost:3000/explorer.

Em outra instância do terminal, execute o app

$ cd app
$ yarn android

Agora, basta definir seu fluxo de trabalho para a implementação (ou refatoração) das tarefas abaixo.

Tasks

Abaixo listamos todas as tarefas/funcionalidades para a construção do nosso app.

As tarefas marcadas com um ✅ já estão prontas, mas podem ser reestruturadas pensando na escalabilidade do aplicativo. As demais tarefas estão listadas por ordem de prioridade e avaliam diferentes habilidades.

Vale lembrar que não é obrigatório finalizar todas as tarefas listadas aqui. Nós não exigiremos, por exemplo, que uma pessoa candidata a uma vaga de estágio complete todos os itens do desafio. Nesta etapa do processo, o mais importante é entregar o melhor trabalho possível dentro do prazo que a gente combinou em nossa última conversa. A lista é apenas um guia para que todos os envolvidos no processo (recrutadores e candidatos) possam conhecer os critérios utilizados para avaliação de maneira clara e transparente (mais detalhes na próxima seção).

  1. Início
    1. Cenário de carregamento
    2. Cenário de erro/falha (de requisição à API, por exemplo)
    3. Cenário para lista vazia
    4. Exibir lista de tarefas
  2. Filtros
    1. Todos
    2. Hoje
    3. Esta semana
    4. Atrasado
  3. Finalizar Tarefa
    1. Marcar tarefa como finalizada
    2. Desmarcar tarefa como finalizada
  4. Nova Tarefa
    1. Título
    2. Calendário
    3. Prioridade
  5. Editar Tarefa
    1. Título
    2. Calendário
    3. Prioridade
    4. Apagar
    5. Confirmar apagar
  6. Busca
    1. Resultado
    2. Nenhum resultado
    3. Destacar trecho do texto que está sendo buscado
  7. Configurações de Tema
    1. Cores
    2. Tipografia
  8. Adicionar splash screen ao app
  9. Adicionar ícones ao app
  10. Animações e Desempenho
    1. Transição inicial
    2. Transição de scroll do cabeçalho
    3. Transição entre os filtros
    4. Transição para “tela” de busca

Avaliação

Como estamos buscando criar o processo mais transparente e mais agradável possível, nada mais justo do que listar os critérios de avaliação e a motivação para cada uma das tarefas escolhidas para este desafio.

A primeira tarefa avaliará sua familiaridade com o redux, com a utilização de seletores, com a criação de vários tipos de interface e com o processo de componentização de um app. Além disso, você precisará tratar/implementar a renderização de múltiplos estados numa única tela.

As tarefas 2 e 6 avaliarão sua capacidade de manipular estruturas e dados em memória, em tempo de execução.

As tarefas 3, 4 e 5 avaliarão sua familiaridade com a utilização de APIs e tudo que isto envolve: redux, redux-saga, seletores, tratamento de erros e feedbacks para o usuário. Além disso, temos também a manipulação de formulários, de componentes nativos e todos os outros itens listados para o ponto 1.

A tarefa 7 avaliará a reutilização de configurações em todo o app.

As tarefas 8 e 9 avaliarão a manipulação de assets nativos.

Por fim, a última tarefa (10) avaliará sua familiaridade com animações e com as questões relativas ao desempenho do app.

Submissão

Quando estiver satisfeito com seu trabalho, basta enviar um e-mail para [email protected] com o seguinte conteúdo:

  • Assunto: Quero ser Popcoder!
  • Corpo:
    • [explicar qualquer ponto que você acredite ser relevante];
    • Link para seu fork deste projeto, da PR com sua solução ou para download do seu repositório zipado;

Nós iremos baixar, executar, avaliar e retornar seu e-mail com um feedback em até uma semana.

Enquanto isso, conte-nos o que você achou do seu processo de recrutamento até aqui, em especial sobre este desafio. Saber o que você aprendeu durante esse tempo (e como poderíamos melhorá-lo para futuras pessoas candidatas) é muito importante e nos ajudará na construção de um processo mais justo e transparente :)

Muito obrigado pelo seu tempo e pelo seu interesse em fazer parte do nosso time!

Agradecemos de coração ❤️


Licença Creative Commons

Este projeto foi feito com carinho pelas pessoas que fazem parte da Popcode. Você é livre para publicá-lo, desde que atribua os devidos créditos. Porém, seu uso comercial não é permitido. Você também poderá criar derivações em cima dele, contanto que ofereça uma licença igual ou compatível :)

desafio-react-native's People

Contributors

aryella-lacerda avatar italomota avatar hdoria avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.