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

https://github.com/eltonsantos/consuming-api

Consumingo API - Vídeo: Consumindo API no Front e no Back-end | CodeDrops #45 - Instrutor: Mayk Brito - Link: https://www.youtube.com/watch?v=vYlz3SmNXQQ
https://github.com/eltonsantos/consuming-api

api axios cors express lite-server nodejs nodemon

Last synced: 2 months ago
JSON representation

Consumingo API - Vídeo: Consumindo API no Front e no Back-end | CodeDrops #45 - Instrutor: Mayk Brito - Link: https://www.youtube.com/watch?v=vYlz3SmNXQQ

Awesome Lists containing this project

README

          


Consuming API in frontend and backend


Technologies   |   
Getting started   |   
Project   |   
What was learned?


---

## 🧪 Technologies

This project was developed using the following technologies:

- [Node](https://nodejs.org/)
- [Nodemon](https://www.npmjs.com/package//nodemon)
- [Axios](https://axios-http.com/)
- [Express](https://expressjs.com/)

## 🚀 Getting started

Clone the project and access the folder

```bash
$ git clone https://github.com/eltonsantos/consuming-api.git && cd consuming-api
```

Follow the steps below

```bash
# Install the dependencies
$ npm install

# Start the lite-server
$ npx lite-server

# Frontend
$ npm run start

# Backend
$ npm run dev

```
For lite-server access: **http://localhost:3000** and for front/back access: **http://localhost:4567**

## 💻 Project

Simple example of how consuming an API in frontend and backend.🥰

## 🤔 What was learned?

###### Escreverei essa parte em português

#### Criar uma API
- [ ] Iniciar o projeto `npm init -y`
- [ ] Instalar as dependências `npm i express nodemon cors axios`
- [ ] Criar uma rota para acessar a API
- [ ] Servir a API
- [ ] Habilitar o CORS
- [ ] Habilitar o nodemon para reiniciar o server

### frontend

#### Consumir API
- [ ] Utilizar fetch para consumir nossa API backend
- [ ] Explicar Promise - Async/Await
- [ ] Usar try/catch
- [ ] Mostrar a resposta na tela

### backend

#### Consumir API
- [ ] [Jsonplaceholder](https://jsonplaceholder.typicode.com/)
- [ ] Usar axios
- [ ] Semelhanças entre axios e fetch
- [ ] Usar try/catch

---

## 👨🏻‍💻 Author





Elton Santos 🚀








Made with ❤️ by Elton Santos 👋🏽 [Entre em contato!](https://www.linkedin.com/in/eltonmelosantos/)