README.md

Clone GitHub 💻

📚 CloneGitHub é um projeto para replicar a interface do GitHub desenvolvido na (UI Clone) da Rocketseat utilizando as tecnologias TypeScript, Node, React e Styled-Components

Dark-Mode Web 📟

Responsividade Web 📟

Navegação Usuários 📟

🚀 OBJETIVO

Projeto tem como principal objetivo desenvolver conhecimento na linguagem typescript e na biblioteca ReactJS e Styled-Component, além de aprender sobre a API do próprio gitHub que foi usada como back-end da aplicação, como resultado conseguimos clonar a interface do GitHub e acrescentar um DarkMode bem interessante para a aplicação.

💻 TECNOLOGIAS

📟 Website (React + TypeScript)

• React Router Dom
• React Icons
• Axios
• React Leaflet

Arquivo json do fron-end do webSite package.json

Utilitários

• Editor: Visual Studio Code → Extensions: SQLite
• Markdown: StackEdit, Markdown Emoji
• Commit Conventional: Commitlint
• Teste de API: Insomnia
• Ícones: Feather Icons, Font Awesome

🍷 COMO UTILIZAR

Configurações Iniciais

Primeiro, você precisa ter o NodeJS instalado na sua máquina.

Se você estiver utilizando o Linux, você pode optar por instalar o Node através do gerênciador de versões asdf para facilitar o processo de mudança da versão do Node, quando for necessário.

Você pode optar também por utilizar o yarn no lugar do npm. Você pode instalar clicando nesse link, ou através do asdf.

Após ter o Node instalado, instale as dependências do React de forma global, utilizando os comandos:

# React:
$ npm install create-react-app -g

Você precisa renomear o arquivo .env-example para .env e inserir as informações que condizem com o seu host:

$ mv .env-example .env

Instale as dependências contidas nos arquivos package.json que se encontram na raíz do repositório. Para instalar as dependências, basta abrir o terminal no diretório e digitar o comando:

$ npm install

# ou
$ yarn

Exemplos:

# Instalando as dependências do website:
$ cd ./clone-github
$ npm install

Veja os arquivos package.json do commitlint, website.

Utilizando o Website

# Executando o website no modo de desenvolvimento:
$ npm run start

Se o browser não abrir automaticamente, acesse: http://localhost:3000.

🌟 AGRADECIMENTOS

Rocketseat	diego3g	guilhermerodz

📚 REFERÊNCIAS

• React + TypeScript Cheat Sheet
• Blog Rocketseat
• ReactJS | ReactJS pt-BR
• TypeScript
• React Native
• Node

📃 LICENÇA

Este repositório está licenciado pela MIT LICENSE. Para mais informações detalhadas, leia o arquivo LICENSE contido nesse repositório.

Feito com ❤️ por Luiz Carlos Vilela