/challenge-FR-010-book-guide

📋 Indíce

🚀 Proposta

Para começar:

  • recomenda-se que crie um fork desse repositório

  • Leia atentamente os requisitos

  • Vá para parte que está escrito Requisitos adicionais e adicione pontos a mais que queira contemplar com esse projeto, se comenda nunca tirar um requisito, apenas adicionar.

  • Inicie o seu projeto e desenvolva normalmente.

  • Não esqueça de atualizar o readme com imagens do seu projeto e adicionar informações de autor

    • As imagens podem ser salvas na pasta presentation

  • Quando terminar , envie um pull request para este repositório, explicando como você fez e quais foram suas principais dificuldades e aprendizados e se houveram requisitos adicionais descreva isso.

    • não esqueça de adicionar um bom título a sua pr para pessoas que verem se interessarem e isso favorecer o networking
    • a PR não será aceita para o repositório, mas isso regstrará sua participação.

  • Ao completar, não esqueça de publicar no linkedin e adicionar #handsOnRoadmap e se quiser pode me marcar.

🏆 O desafio


Imagine que foi pedido a você para fazer uma página que precise mostrar sobre gêneros de livros, porém isso precisa estar acessível para multi-idiomas.

Para divulgar mais sobre a leitura e sua importância.


🎯 Os requisitos

🎯 Requisitos funcionais


Sua aplicação deve ter:


  • Pelo menos cinco sections, sendo duas para eevidenciar sobre a importância da leitura e pelo menos três falando sobre seus três gêneros de livros favoritos (uma section cada pelo menos, podendo ser mais ou falar de mais gêneros de livros).
  • A aplicação deve contar com a possibilidade de trocar de idiomas entre português, inglês e espanhol. Através de um botão de seleção que fica no canto superior direito da página.

🎯 Requisitos não funcionais


É obrigatório a utilização de:

  • ReactJs
  • fazer deploy
  • React-translate ou i18next para criação da parte de idiomas da aplicação
  • Uso de componentes funcionais, usando hooks específicos para isso.

📌 Requisitos não obrigatórios


Você será bem avaliado se usar:


  • usar HTML semântico, como tags main, section...
  • usar responsividade
  • organizar e dividir bem os arquivos
  • Componentizar e separar bem o que achar que deve
  • Usar typeScript
  • Aplicar inversão de dependência ao usar o hook de tradução, sendo que sua aplicação não dependa diretamente do hook de tradução.
  • Explicar a vantagem de usar hooks e não HOC's
  • Evidenciar porquê usar o hook através de um custom hook é vantajoso para esse caso.

📌 Requisitos adicionais


📸 Screenshots


📱 Mobile design

Mobile Design

📱 Tablets design

Tablets Design

🖥️ Desktop design

Tablets Design

🖥️ Resultado final

Tablets Design

✔️ O que aprendi

☑️ Pré-requisitos para rodar


  • adicione os requisitos aqui

📝 Procedimentos de instalação


Adicione o processo para instalar o projeto abaixo e se quiser crie mais espaços de código:

#processos aqui
#processos adicionais aqui

👨🏾‍💻 Desafios similares e dicas

Antes ou depois de realizar esse desafio, você pode pegar desafios parecidos do front-end mentor ou similares. Isso te ajuda a fixar e melhorar. Vou deixar alguns a seguir, pode te ajudar a se inspirar.

O segredo aqui é fazer modelos parecidos até ganhar algum conforto com fazer algo com essas técnicas e esse modelo de desafio, então quem sabe pegar outros mais difíceis.

Social media dashboard with theme switcher


Calculator app


Você também pode usar o dribbble para se inspirar.

Dribbble

😎 Autor


  • Linkedin:
  • GitHub: