Entrega do Desafio FrontEnd - Carlos Oliveira

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist/
+.env

README.md

@@ -1,69 +1,23 @@
-# Frontend Chalenge - Qconcursos
+# 🚀 Welcome to your new awesome project!
 
-Olá Dev.
+This project has been created using **webpack, HTML5, CSS(SCSS), JS**, you can now run
 
-Este repositório foi criado para que você possa nos mostrar o que sabe tecnicamente. Esperamos que você nos surpreenda com sua experiência e criatividade.
 
-O teste em si, é simples, esperamos que você mostre o que sabe independente de frameworks/libs famosos como React, VueJs e Angular. Então queremos que você utilize Vanilla em tudo, ou tudo o que for possível, ou seja, queremos que você implemente uma solução sem utilizar jQuery, Bootstrap ou afins. Queremos ver sua capacidade de criar algo sem a ajuda de facilitadores como o jQuery ou o Bootstrap. Não o julgaremos mal se você optar por utilizar libs como lodash ou underscore para facilitar sua vida no JS, ou utilizar preprocessadores como SCSS, LESS, Stylus, Babel, etc. Para processar seu código. Até recomendamos que você os utilize. O bom senso será de extrema importância.
+```
+npm start
 
-Queremos que você nos mostre que consegue "sobreviver" sem Frameworks e tem criatividade suficiente para implementar suas próprias soluções ;)
+```
 
-Vamos listar os pontos chaves que serão utilizados na avaliação do seu teste:
+<img alt="CQX" src="src/images/qcx.gif" />
 
-Avaliaremos se:
 
-* O Dev utilizou HTML, JS e CSS. Com ou sem pré-processadores.
-* O desafio foi implementado sem a necessidade de frameworks ou libs como jQuery, Bootstrap, React, Angular, VueJs...
-* O Dev tem ou não a capacidade de arquitetar uma aplicação do zero.
-* O Dev componentizou e organizou o código para que ele seja fácil de entender e de manter.
-* O Dev utilizou ferramentas como Webpack, Gulp, Grunt, SCSS, Babel ou afins para facilitar e acelerar o desenvolvimento (Não é obrigatório).
-* O Dev se preocupou em organizar o CSS, pois acreditamos que o CSS é tão importante quanto o JS. É sério.
+<a href="https://github.com/caduol/desafio-frontend/" style="text-decoration: none">
+    <img alt="GitHub top language" src="https://img.shields.io/github/languages/top/caduol/desafio-frontend">
+</a>
 
-***ATENÇÃO**: Não estamos esperando que você seja um Ninja e que vá surpreender em todos os quesitos. Estamos muito mais interessados em saber qual a sua capacidade como desenvolvedor. Você pode por exemplo ser muito bom com CSS e não muito bom com JS, ou o contrário. Isso não quer dizer que você não esteja apto para ser contratado. Queremos é saber o quão esforçado você é. Então use e abuse do bom senso. Se você acha que algo é importante de ser mostrado, mostre. É a sua chance de mostrar o que você sabe :)
+<a href="https://github.com/caduol/desafio-frontend/stargazers" style="text-decoration: none">
+    <img alt="GitHub stars" src="https://img.shields.io/github/stars/caduol/desafio-frontend?style=social">
+</a>
 
-Se tiver qualquer dúvida sobre o desafio, abra uma Issue neste mesmo repositório. Responderemos o mais rápido possível.
 
-### Então, vamos ao teste, finalmente!
-
-Você terá que implementar uma landing page que possui uma feature para listar repositórios de um perfil qualquer do Github. Se acha que consegue fazer algo melhor em relação ao design, faça. Se acha que deve seguir exatamente como está no design, fique à vontade. O importante é que você mostre os seus conhecimentos da melhor forma possível, levando em conta o tempo que você terá para implementar este desafio.
-
-Além de implementar o design, você deve mostrar que consegue consumir uma API Rest. Escolhemos a [API do Github](https://developer.github.com/v3/) para isso. Fique à vontade para utilizar qualquer lib para acessar estes dados.
-
-Tasks:
-
-* Implementar o design mostrando sua experiência com HTML, JS e CSS.
-* Implementar a funcionalidade de listar os repositórios e os repositórios favoritos de um perfil qualquer do Github.
-* Abrir um Pull Request para este repositório quando você terminar de implementar o desafio.
-
-Observações:
-
-* Os links do menu devem apenas fazer scroll da página para suas respectivas seções quando clicados.
-* Você não precisa implementar páginas extras para os links que estão no design.
-* Os textos da landing page podem ser textos aleatórios como "Lorem ipsum".
-
-Dicas:
-
-* Faça o melhor que você pode no tempo que tem para entregar.
-* Quanto mais coisas legais você conseguir mostrar, melhor.
-* Relaxe, não esperamos que você seja um Ninja, mas se for, ótimo :)
-* Se divirta, pois esperamos que você faça isso no dia a dia caso seja contratado :)
-
-Será considerado como plus:
-
-* Implementar o design de forma responsiva.
-* Utilizar Webpack.
-* Utilizar SCSS.
-* Utilizar ES6+.
-* Componentizar a aplicação <3.
-
-Segue o design:
-
-Landing Page:
-![Alt text](desafio-front.jpg?raw=true "Landing Page")
-
-Listagem de repositórios:
-![Alt text](desafio2.jpg?raw=true "Feature")
-
-Entrega:
-
-Após finalizar o teste você pode nos enviar para [email protected] com o link do repositório e também pode enviar email para gente caso tenha dúvidas. Entendemos que o dia-a-dia pode ser corrido por isso não estipulamos um prazo, estabelecemos 7 dias como padrão mas caso você não consiga fazer nesses 7 dias não tem problema, preferimos que você tenha tempo para pensar na sua solução do que fazer algo com pressa de entregar.
+* PS: Please, in case the lists are not loaded, generate in the github Developer settings the Personal access tokens and add in the configuration file 'config.js' in the config folder.

babel.config.json

@@ -0,0 +1,5 @@
+{
+    "presets": [
+      "@babel/preset-env"
+    ]
+  }