Fetch with JS! 📬

Foreword

GET and POST with HTTP requests through the JavaScript fetch api.
Report Bug · Request Feature

Table of Contents

• Fetch with JS! 📬
  • Table of Contents
  • About
  • Setup
  • Prerequisites
    • Docker
    • VSCode
    • API Keys
  • Getting Started

About

With JS, there's a lot you can fetch() through HTTP requests. In this project, several API endpoints are demoed in the requests.ipynb notebook. You can try these for yourself to GET - pun intended - some cool data. (⌐■_■) ... Additionally, a Movie Finder App is offered to showcase the power of leveraging the TMDB API to GET relevant data. 🍿🎥

Setup

This project is setup with a Dev Container for use on Visual Studio Code. It serves as a full-featured development environment with everything needed to run JavaScript on the jupyter notebook. Dev Containers separate tools, libraries, or runtimes needed for working with a codebase. They aid in continuous integration and testing. Dev containers can be run locally or remotely, in a private or public cloud, in a variety of supporting tools and editors.

This devcontainer, is built IAW the dev containers specification and tailored for a build environment that leverages Ubuntu. Of note, the devcontainer has git for version control and several extensions installed for Visual Studio Code as development utilities for the IDE.

Prerequisites

Docker

To start, you need to have Docker Engine and Docker Compose on your machine. You can either:

• Install Docker Desktop which includes both Docker Engine and Docker Compose. (Recommended ⭐)
• Install Docker Engine and Docker Compose as standalone binaries. (If it suits your fancy 🤵)

VSCode

This devcontainer is setup for development on Visual Studio Code. You should have it installed along with the remote development pack to enable the IDE's devcontainers functionality.

API Keys

You will have to get some API keys for this project to work locally. The following APIs are leveraged. Reference each link for more information. To generate API keys, you'll have to create an account with Rebrandly and TMDB.

• Datamuse --> No Key Required 🔓
• Rebrandly --> Key Required 🔐
• TMDB ------> Key Required 🔐

The requests.ipynb notebook is setup to import the following secrets from a ./keys.js file. Create this file for yourself in accordance with the format below.

// keys.js
const rebrandly = "YOUR REBRANDLY API KEY"
const tmdb_rat = "YOUR TMDB RANDOM ACCESS TOKEN"
module.exports = {rebrandly, tmdb_rat} // node.js syntax

The Movie Finder App is setup to import a TMDB API Key from ./app/private/api.js. Create this file for yourself in accordance with the format below.

// api.js
const tmdb_api = "YOUR TMDB API KEY"
export {tmdb_api} // ES6 syntax

Getting Started

To start, open VS Code in a directory of your choice. Open the terminal and clone this repository with git clone https://github.com/jgome284/fetch-js.

Open Docker Desktop to run the Docker daemon, a background process that manages and coordinates Docker containers on your system. On VS Code, start the development container by running Dev Containers: Rebuild and Reopen In Container in the command palette. It can be accessed with the keyboard shortcut ctrl + shift + P on your keyboard.

If successful, Visual Studio will establish a remote connection to the development container. When it does, feel free to look over the examples on requests.ipynb! Additionally, with the live server extension installed - it will install into the dev container, but it may take some time - start a local development server to view the Movie Finder web app. This can be done by launching the command palette ctrl + shift + p and executing the Live Server: Open with Live Server command. As needed in your search bar, navigate the folder structure to http://127.0.0.1:5500/app/ and the webpage will render via index.html. Then, select a genre to display data for a random movie as shown below.