Finish project

Gustavo-Victor · Mar 17, 2023 · 2e09321 · 2e09321
1 parent 6a9ca7d
commit 2e09321
Show file tree

Hide file tree

Showing 28 changed files with 1,250 additions and 1,109 deletions.
diff --git a/README.md b/README.md
@@ -1,14 +1,104 @@
-# Vite + React
 
-This is a [Vite](https://vitejs.dev) project together with React.
+<h1 align='center'>Github Finder 🔎</h1>
 
-[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/github/codesandbox/codesandbox-template-vite-react/main)
+<p align="center">
+  <a href="#-sobre">Sobre</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-prints">Prints</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-tecnologias-e-ferramentas">Tecnologias e Ferramentas</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-funcionalidades">Funcionalidades</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-instalação">Instalação</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+    <a href="#-possíveis-melhorias">Possíveis melhorias</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-licença">Licença</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+</p>
 
-[Configuration](https://codesandbox.io/docs/projects/learn/setting-up/tasks) has been added to optimize it for [CodeSandbox Projects](https://codesandbox.io/p/dashboard).
+<p align="center">
+    <img src="http://img.shields.io/static/v1?label=STATUS&message=CONCLUÍDO&color=GREEN&style=for-the-badge"/>
+</p>
 
-## Resources
+<p align="center">
+    <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/Gustavo-Victor/github-finder?style=flat-square">
+    <img alt="GitHub forks" src="https://img.shields.io/github/forks/Gustavo-Victor/github-finder?style=flat-square">
+    <img alt="GitHub watchers" src="https://img.shields.io/github/watchers/Gustavo-Victor/github-finder?style=flat-square">
+    <img alt="GitHub" src="https://img.shields.io/github/license/Gustavo-Victor/github-finder?style=flat-square">
+</p>
+
+
+## ❓ Sobre
+
+Este projeto é uma aplicação React simples que serve para buscar por usuários do Github e retornar dados deles e de seus repositórios. O projeto foi baseado em um tutorial do youtube do canal Hora de Codar, porém fiz algumas modificações que achei necessário para tornar o projeto mais único.  
+
+Clique [aqui]() para conferir como ficou o projeto no [Codesandbox](https://codesandbox.io).
+
+
+## 📷 Prints
+
+![img](./src/images/screenshots/desktop.png) ![img](./src/images/screenshots/desktop2.png) 
+![img](./src/images/screenshots/desktop3.png) ![img](./src/images/screenshots/desktop4.png)
+
+![img](./src/images/screenshots/mobile.png) ![img](./src/images/screenshots/mobile2.png)
+
+
+## 🛠 Tecnologias e Ferramentas
+
+- [HTML](https://developer.mozilla.org/pt-BR/docs/Web/HTML)
+- [ReactJS](https://pt-br.reactjs.org/)
+- [React Router Dom](https://reactrouter.com/en/main)
+- [React Icons](https://react-icons.github.io/react-icons/)
+- [Sass](https://sass-lang.com/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Vite](https://vitejs.dev/)
+
+
+## ⚙ Funcionalidades 
+
+- [x] Buscar e exibir dados de usuário do Github usando Fetch API 
+- [x] Buscar e exibir dados de alguns repositórios desse usuário 
+- [x] Utilização de rotas na aplicação através da biblioteca React Router Dom 
+
+
+## 💻 Instalação 
+
+Para abrir e executar o projeto no seu computador, você vai precisar ter o [Node.js](https://nodejs.org/en) instalado na sua máquina (recomendo baixar a versão LTS). Além disso, para conseguir executar os comandos de terminal a seguir, você precisará ter instalado o [GIT](https://git-scm.com/) na sua máquina. 
+É recomendado ter alguns conhecimentos básicos de HTML, CSS e JavaScript para conseguir entender os códigos do projeto e também ter alguma noção prévia de comandos de terminal para conseguir acompanhar as instruções a seguir no seu computador.
+Para abrir o projeto na máquina local, basta seguir os passos: 
+
+
+1. Faça download do projeto no seu computador ou clone ele com o seguinte comando: 
+
+```bash 
+    git clone https://github.com/Gustavo-Victor/github-finder.git
+```
+
+2. Descompacte o arquivo do projeto e abra a pasta do projeto; se tiver clonado basta só abrir a pasta do projeto; você pode abrir a pasta usando um comando de terminal: 
+
+```bash 
+    cd github-finder/ 
+```
+
+3. Instale as dependências necessárias do projeto (a pasta do projeto precisa estar aberta no terminal): 
+
+```bash 
+    npm install 
+```
+
+4. Executar projeto no modo de desenvolvimento: 
+
+```bash 
+    npm run dev 
+```
+
+5. Abrir o projeto no seu navegador de preferência. Basta digitar na barra de pesquisa: http://localhost:5173/
+
+
+
+## 👌 Possíveis melhorias
+
+- Adicionar paginação de repositórios para trazer mais e listar melhor todos os repositórios do usuário. 
+
+
+## 📝 Licença 
+
+O projeto está sob a [Licensa MIT](./LICENSE) 
+
+Qualquer pessoa pode usar, clonar e contribuir com este projeto. 
 
-- [CodeSandbox — Docs](https://codesandbox.io/docs/projects)
-- [CodeSandbox — Discord](https://discord.gg/Ggarp3pX5H)
-- [Vite — GitHub](https://github.com/vitejs/vite)
-- [Vite — Docs](https://vitejs.dev/guide/)
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,5 @@
 import { Outlet } from "react-router-dom";
-import styles from "./styles/modules/App.module.scss";
+import styles from "./styles/App.module.scss";
 
 function App() {
   return (

diff --git a/src/components/BackBtn.tsx → src/components/BackBtn/index.tsx b/src/components/BackBtn.tsx → src/components/BackBtn/index.tsx
@@ -1,15 +1,17 @@
-import { useNavigate } from "react-router-dom";
-import { FaArrowLeft } from "react-icons/fa";
-import styles from "../styles/modules/BackBtn.module.scss";
-
-function BackBtn() {
-  const navigate = useNavigate();
-
-  return (
-    <button className={styles.back_btn} onClick={() => navigate(-1)}>
-      <FaArrowLeft />
-    </button>
-  );
-}
-
-export default BackBtn;
+import { useNavigate } from "react-router-dom";
+import { FaArrowLeft } from "react-icons/fa";
+import styles from "./style.module.scss";
+
+function BackBtn() {
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <button className={styles.back_btn} onClick={() => navigate(-1)}>
+        <FaArrowLeft/>
+      </button>
+    </>
+  );
+}
+
+export default BackBtn;
diff --git a/src/styles/modules/BackBtn.module.scss → src/components/BackBtn/style.module.scss b/src/styles/modules/BackBtn.module.scss → src/components/BackBtn/style.module.scss
@@ -1,14 +1,22 @@
-@import "../partials/variables";
-
-.back_btn {
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-  padding: 0.5rem 1rem;
-  color: $light-purple;
-  background-color: $dark-blue;
-  cursor: pointer;
-  border: none;
-  border-radius: 5px;
-  opacity: 0.9;
-}
+@import "../../styles/partials/variables";
+
+.back_btn {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  padding: 0.5rem 1rem;
+  color: $light-purple;
+  background-color: $dark-blue;
+  cursor: pointer;
+  border: none;
+  border-radius: 5px;
+  opacity: 0.9;
+}
+
+
+@media screen and (max-width: 350px){ 
+  .back_btn {
+    top: 1%;
+    left: 1%;
+  }
+}
diff --git a/src/components/Error.tsx → src/components/Error/index.tsx b/src/components/Error.tsx → src/components/Error/index.tsx
@@ -1,11 +1,11 @@
-import styles from "../styles/modules/Error.module.scss";
-
-function Error() {
-  return (
-    <div className={styles.error_div}>
-      <p>User not found :(</p>
-    </div>
-  );
-}
-
-export default Error;
+import styles from "./style.module.scss";
+
+function Error() {
+  return (
+    <div className={styles.error_div}>
+      <p>User not found :(</p>
+    </div>
+  );
+}
+
+export default Error;
diff --git a/src/styles/modules/Error.module.scss → src/components/Error/style.module.scss b/src/styles/modules/Error.module.scss → src/components/Error/style.module.scss
@@ -1,4 +1,4 @@
-.error-div {
-  text-align: center;
-  margin: 1rem auto;
-}
+.error-div {
+  text-align: center;
+  margin: 1rem auto;
+}
diff --git a/src/components/Loader.tsx → src/components/Loader/index.tsx b/src/components/Loader.tsx → src/components/Loader/index.tsx
@@ -1,8 +1,8 @@
-import { FaSpinner } from "react-icons/fa";
-import styles from "../styles/modules/Loader.module.scss";
-
-function Loader() {
-  return <FaSpinner className={styles.loader_icon} />;
-}
-
-export default Loader;
+import { FaSpinner } from "react-icons/fa";
+import styles from "./style.module.scss";
+
+function Loader() {
+  return <FaSpinner className={styles.loader_icon} />;
+}
+
+export default Loader;
diff --git a/src/styles/modules/Loader.module.scss → src/components/Loader/style.module.scss b/src/styles/modules/Loader.module.scss → src/components/Loader/style.module.scss
@@ -1,18 +1,18 @@
-.loader_icon {
-  animation: rotate 2s linear infinite;
-  position: absolute;
-  left: 50%;
-  margin-top: 40px;
-  font-size: 50px;
-  margin-left: -25px;
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
+.loader_icon {
+  animation: rotate 2s linear infinite;
+  position: absolute;
+  left: 50%;
+  margin-top: 40px;
+  font-size: 50px;
+  margin-left: -25px;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/Repo.tsx → src/components/Repo/index.tsx b/src/components/Repo.tsx → src/components/Repo/index.tsx
@@ -1,40 +1,40 @@
-import { RepoProps } from "../types/repo";
-
-import { AiOutlineStar, AiOutlineFork } from "react-icons/ai";
-import { BsCodeSlash } from "react-icons/bs";
-import { RiGitRepositoryLine } from "react-icons/ri";
-
-import styles from "../styles/modules/Repo.module.scss";
-
-function Repo({
-  name,
-  language,
-  html_url,
-  forks_count,
-  stargazers_count,
-}: RepoProps) {
-  return (
-    <div className={styles.repo}>
-      <h3>{name}</h3>
-      <p>
-        <BsCodeSlash /> {language}
-      </p>
-      <div className={styles.stats}>
-        <div>
-          <AiOutlineStar />
-          <span>{stargazers_count}</span>
-        </div>
-        <div>
-          <AiOutlineFork />
-          <span>{forks_count}</span>
-        </div>
-      </div>
-      <a href={html_url} target="_blank" className={styles.repo_btn}>
-        <span>See code</span>
-        <RiGitRepositoryLine />
-      </a>
-    </div>
-  );
-}
-
-export default Repo;
+import { RepoProps } from "../../types/repo";
+
+import { AiOutlineStar, AiOutlineFork } from "react-icons/ai";
+import { BsCodeSlash } from "react-icons/bs";
+import { RiGitRepositoryLine } from "react-icons/ri";
+
+import styles from "./style.module.scss";
+
+function Repo({
+  name,
+  language,
+  html_url,
+  forks_count,
+  stargazers_count,
+}: RepoProps) {
+  return (
+    <div className={styles.repo}>
+      <h3>{name}</h3>
+      <p>
+        <BsCodeSlash /> {language}
+      </p>
+      <div className={styles.stats}>
+        <div>
+          <AiOutlineStar />
+          <span>{stargazers_count}</span>
+        </div>
+        <div>
+          <AiOutlineFork />
+          <span>{forks_count}</span>
+        </div>
+      </div>
+      <a href={html_url} target="_blank" className={styles.repo_btn}>
+        <span>See code</span>
+        <RiGitRepositoryLine />
+      </a>
+    </div>
+  );
+}
+
+export default Repo;