Code Monkey home page Code Monkey logo

flixx's Introduction

Secured Flixx Movie App ๐Ÿฟ

Cloned and improved Flixx, a movie search and rating website; the original site is from Brad Traversy, and is used as a tool to teach students. Accordingly, the original application had a security vulnerability that exposed API credentials to network clients. This project aims to fix the vulnerability by creating a backend server, and improving the client applications request code. You can view the server code here, that will act as a proxy to the original API. The backend server will be responsible for making requests to the original API and returning the data to the client. The client will make requests to the backend server instead of the original API.

Swapped Client API API Requests to Backend Server

const generateBaseUrl = () => {
    return 'https://flixx-api-4ea54960865d.herokuapp.com/'
}

const fetchFromTMBD = async (endpoint) => {
    showSpinner(); 
    const baseUrl = generateBaseUrl();
    const url = `${baseUrl}resource/${endpoint}`;
    const resp = await fetch(url)
    const data = await resp.json();
    hideSpinner();
    return data;

};

const fetchDetailsFromTMBD = async (endpoint, id) => {
    const baseUrl = generateBaseUrl();
    const url = `${baseUrl}details/${endpoint}/${id}`;
    const resp = await fetch(url)
    const data = await resp.json();

    return data;
}

const searchFromTMBD = async (type, searchTerm, page) => {    
    if (!page) {
        page = 1;
    }

    const baseUrl = generateBaseUrl();
    const url = `${baseUrl}search/${type}?query=${searchTerm}&page=${page}`;
    const resp = await fetch(url)
    const data = await resp.json();

    return data;
};

Addition Features and Improvements

  • Mimicked React Component Pattern, and organization structure with Vanilla JS. This pattern and structure will make it easier to add new features and maintain the codebase. Component Folder Structure

  • Added /utilities folder to store utility functions.

Installation

Follow these steps to run this project on your local machine:

  1. Clone the repository to your local machine. You can do this by running the following command in your terminal:
git clone <repository-url>

Replace <repository-url> with the URL of this repository. If you're not sure what the URL is, you can find it by clicking the 'Code' button on the repository page.

  1. Navigate to the project directory:
cd <project-directory>

Replace <project-directory> with the name of the directory that was created when you cloned the repository.

  1. Open the index.html file in your web browser. You can do this by double-clicking the file in your file explorer or by entering the file URL in your web browser's address bar. The file URL should look something like this:
file:///path/to/your/project-directory/index.html

Replace /path/to/your/project-directory with the actual path to the project directory.

That's it! You should now be able to use the application in your web browser.

You can also use the Live Server extension in Visual Studio Code to run the project in your browser. Right-click on the index.html file and select Open with Live Server.

Please replace <repository-url> and <project-directory> with the actual repository URL and project directory name.

flixx's People

Watchers

Alvaro Castro Cid avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.