Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/epiled/trilha-react-desafio-2

🔎 Segundo desafio de Front-End do Bootcamp XP Inc. - Full Stack Developer na plataforma da DIO.
https://github.com/epiled/trilha-react-desafio-2

api react styled-components typescript

Last synced: 16 days ago
JSON representation

🔎 Segundo desafio de Front-End do Bootcamp XP Inc. - Full Stack Developer na plataforma da DIO.

Awesome Lists containing this project

README

        

# 🔎 Trilha React Desafio 02 - Consumo de API GitHub

Segundo desafio de Front-End do Bootcamp XP Inc. - Full Stack Developer na plataforma da DIO.

| :placard: Vitrine.Dev | |
| ------------- | --- |
| :sparkles: Nome | **Trilha React Desafio 02 - Consumo de API GitHub**
| :label: Tecnologias | react, sass, styled components, axios, html, css, js, node, typescript, vite, eslint

![banner](https://github.com/user-attachments/assets/dd5cdf56-298d-413f-b1c6-3b4434f76fec#vitrinedev)

📃 Detalhes do projeto

Este projeto é o segundo desafio da trilha de React do bootcamp da DIO, em parceria com a XP Inc. O objetivo principal deste desafio foi desenvolver uma aplicação que consome a API do GitHub para pesquisar repositórios.

Funcionalidades

A aplicação permite que os usuários busquem repositórios do GitHub inserindo o nome do repositório desejado. Ao clicar no botão de busca, a aplicação faz uma requisição para a API do GitHub e, caso o repositório exista, ele é adicionado a uma lista. O usuário pode visualizar todos os repositórios pesquisados e também removê-los da lista, se desejado.

![Badge](https://img.shields.io/github/last-commit/Epiled/trilha-react-desafio-2?style=for-the-badge)
![Badge](https://img.shields.io/github/languages/code-size/Epiled/trilha-react-desafio-2?style=for-the-badge)
![Badge](https://img.shields.io/github/languages/count/Epiled/trilha-react-desafio-2?style=for-the-badge)
![Bagde](https://img.shields.io/badge/repo%20status-Beta-cyan?style=for-the-badge)
![Bagde](https://img.shields.io/github/v/release/Epiled/trilha-react-desafio-2?style=for-the-badge)
![Bagde](https://img.shields.io/github/license/Epiled/trilha-react-desafio-2?style=for-the-badge)

![Badge](https://img.shields.io/badge/-React-61DAFB?style=for-the-badge&logo=react&logoColor=black)
![Badge](https://img.shields.io/badge/-Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white)
![Badge](https://img.shields.io/badge/-Styled%20Components-DB7093?style=for-the-badge&logo=styledcomponents&logoColor=white)
![Badge](https://img.shields.io/badge/-Axios-5A29E4?style=for-the-badge&logo=axios&logoColor=white)
![Badge](https://img.shields.io/badge/-HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
![Badge](https://img.shields.io/badge/-CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
![Badge](https://img.shields.io/badge/-JS-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
![Badge](https://img.shields.io/badge/-Node.js-339933?style=for-the-badge&logo=node.js&logoColor=white)
![Badge](https://img.shields.io/badge/-Typescript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)
![Badge](https://img.shields.io/badge/-Vite.js-646CFF?style=for-the-badge&logo=vite&logoColor=white)
![Badge](https://img.shields.io/badge/-ESLint-4B32C3?style=for-the-badge&logo=eslint&logoColor=white)

📑 Tabela de Conteúdos

* [Detalhes do projeto](#detalhes-do-projeto)
- [Funcionalidades](#funcionalidades)
* [Demonstração](#demonstracao)
- [Consumo da API](#consumoDaAPI)
* [Pré-Requisito](#pre-requisito)
* [Instalação](#instalacao)
* [Como usar](#como-usar)
* [Tecnologias](#tecnologias)
* [Autor](#autor)

👀 Demonstração

Consumo da API

https://github.com/user-attachments/assets/1442f5ff-f7b5-487e-82a3-5a723e2a2ca2

https://github.com/user-attachments/assets/3b6a9a4d-fce6-49a2-a0a0-0674d57a11eb

🚨 Pré-requisito



  • Node

⚙ Instalação

```
1. git clone https://github.com/Epiled/trilha-react-desafio-2.git
2. cd trilha-react-desafio-2
3. npm install
```

👩‍🏫 Como usar

```
1. Abra no seu terminal o diretorio "trilha-react-desafio-2"
2. npm run dev
2. Caso a url não abra sozinha acesse através deste caminho http://localhost:5173/
```

🛠 Tecnologias

As seguintes tecnologias foram usadas na construção deste projeto:

👨‍💻 Autor

![Felindo](https://user-images.githubusercontent.com/55258483/178338085-2cea8bf2-6d0c-409a-9d0e-23359b7d303e.png)


Felipe De Andrade

Feito com ❤️ por Felipe De Andrade 👋🏽 Entre em contato!

[![Linkedin Badge](https://img.shields.io/badge/-Felipe-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/fademendonca/)](https://www.linkedin.com/in/fademendonca/)
[![Gmail Badge](https://img.shields.io/badge/[email protected]?style=flat-square&logo=Gmail&logoColor=white&link=mailto:[email protected])](mailto:[email protected])
[![Instagram Badge](https://img.shields.io/badge/-Instagram-e4405f?style=flat-square&logo=Instagram&logoColor=white&link=https://www.instagram.com/felipe.deam/)](https://www.instagram.com/felipe.deam/)
[![Codepen Badge](https://img.shields.io/badge/-Codepen-000000?style=flat-square&logo=Codepen&logoColor=white&link=https://codepen.io/epiled)](https://codepen.io/epiled)