diff --git a/.gitignore b/.gitignore
index c348be082..7d17d2199 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,5 +2,4 @@
 *.iml
 
 node_modules/
-main.js
 *.map
diff --git a/README.md b/README.md
index 0d1d117c9..408effca2 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,7 @@ http://localhost:1313, **not** from IntelliJ's web server, or by dragging the
 file(s) into chrome. As you make changes to your source files, all you need to
 do is save the file, and the website will be live reloaded.
 
-Take a look at the `src/index.js` file to get started. You will notice it has
+Take a look at the `src/main.js` file to get started. You will notice it has
 examples of importing and requiring separate javascript files. Regardless of
 which you choose to use, you should pick one and use it throughout your code
 base, don't mix and match the two.
diff --git a/css/pacman.css b/css/pacman.css
new file mode 100644
index 000000000..02bc18b0d
--- /dev/null
+++ b/css/pacman.css
@@ -0,0 +1,415 @@
+@-webkit-keyframes uil-pacman-css-1 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(-30deg);
+        -moz-transform: rotate(-30deg);
+        -webkit-transform: rotate(-30deg);
+        -o-transform: rotate(-30deg);
+        transform: rotate(-30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-webkit-keyframes uil-pacman-css-1 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(-30deg);
+        -moz-transform: rotate(-30deg);
+        -webkit-transform: rotate(-30deg);
+        -o-transform: rotate(-30deg);
+        transform: rotate(-30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-moz-keyframes uil-pacman-css-1 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(-30deg);
+        -moz-transform: rotate(-30deg);
+        -webkit-transform: rotate(-30deg);
+        -o-transform: rotate(-30deg);
+        transform: rotate(-30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-ms-keyframes uil-pacman-css-1 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(-30deg);
+        -moz-transform: rotate(-30deg);
+        -webkit-transform: rotate(-30deg);
+        -o-transform: rotate(-30deg);
+        transform: rotate(-30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-moz-keyframes uil-pacman-css-1 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(-30deg);
+        -moz-transform: rotate(-30deg);
+        -webkit-transform: rotate(-30deg);
+        -o-transform: rotate(-30deg);
+        transform: rotate(-30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-webkit-keyframes uil-pacman-css-1 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(-30deg);
+        -moz-transform: rotate(-30deg);
+        -webkit-transform: rotate(-30deg);
+        -o-transform: rotate(-30deg);
+        transform: rotate(-30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-o-keyframes uil-pacman-css-1 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(-30deg);
+        -moz-transform: rotate(-30deg);
+        -webkit-transform: rotate(-30deg);
+        -o-transform: rotate(-30deg);
+        transform: rotate(-30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@keyframes uil-pacman-css-1 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(-30deg);
+        -moz-transform: rotate(-30deg);
+        -webkit-transform: rotate(-30deg);
+        -o-transform: rotate(-30deg);
+        transform: rotate(-30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-webkit-keyframes uil-pacman-css-2 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(30deg);
+        -moz-transform: rotate(30deg);
+        -webkit-transform: rotate(30deg);
+        -o-transform: rotate(30deg);
+        transform: rotate(30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-webkit-keyframes uil-pacman-css-2 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(30deg);
+        -moz-transform: rotate(30deg);
+        -webkit-transform: rotate(30deg);
+        -o-transform: rotate(30deg);
+        transform: rotate(30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-moz-keyframes uil-pacman-css-2 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(30deg);
+        -moz-transform: rotate(30deg);
+        -webkit-transform: rotate(30deg);
+        -o-transform: rotate(30deg);
+        transform: rotate(30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-ms-keyframes uil-pacman-css-2 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(30deg);
+        -moz-transform: rotate(30deg);
+        -webkit-transform: rotate(30deg);
+        -o-transform: rotate(30deg);
+        transform: rotate(30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-moz-keyframes uil-pacman-css-2 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(30deg);
+        -moz-transform: rotate(30deg);
+        -webkit-transform: rotate(30deg);
+        -o-transform: rotate(30deg);
+        transform: rotate(30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-webkit-keyframes uil-pacman-css-2 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(30deg);
+        -moz-transform: rotate(30deg);
+        -webkit-transform: rotate(30deg);
+        -o-transform: rotate(30deg);
+        transform: rotate(30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@-o-keyframes uil-pacman-css-2 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(30deg);
+        -moz-transform: rotate(30deg);
+        -webkit-transform: rotate(30deg);
+        -o-transform: rotate(30deg);
+        transform: rotate(30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+@keyframes uil-pacman-css-2 {
+    0% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    50% {
+        -ms-transform: rotate(30deg);
+        -moz-transform: rotate(30deg);
+        -webkit-transform: rotate(30deg);
+        -o-transform: rotate(30deg);
+        transform: rotate(30deg);
+    }
+    100% {
+        -ms-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -webkit-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+.uil-pacman-css {
+    background: none;
+    position: relative;
+    width: 200px;
+    height: 200px;
+}
+.uil-pacman-css > div {
+    position: absolute;
+    width: 200px;
+    height: 200px;
+}
+.uil-pacman-css > div > div {
+    background: #f0c741;
+    width: 200px;
+    height: 100px;
+    position: absolute;
+    z-index: 1;
+}
+.uil-pacman-css > div:nth-of-type(1) {
+    top: 0;
+    -ms-animation: uil-pacman-css-1 1s linear infinite;
+    -moz-animation: uil-pacman-css-1 1s linear infinite;
+    -webkit-animation: uil-pacman-css-1 1s linear infinite;
+    -o-animation: uil-pacman-css-1 1s linear infinite;
+    animation: uil-pacman-css-1 1s linear infinite;
+}
+.uil-pacman-css > div:nth-of-type(1) > div {
+    border-radius: 100px 100px 0 0;
+}
+.uil-pacman-css > div:nth-of-type(2) {
+    top: 0px;
+    -ms-animation: uil-pacman-css-2 1s linear infinite;
+    -moz-animation: uil-pacman-css-2 1s linear infinite;
+    -webkit-animation: uil-pacman-css-2 1s linear infinite;
+    -o-animation: uil-pacman-css-2 1s linear infinite;
+    animation: uil-pacman-css-2 1s linear infinite;
+}
+.uil-pacman-css > div:nth-of-type(2) > div {
+    top: 100px;
+    border-radius: 0 0 100px 100px;
+}
+.uil-pacman-css > div:nth-of-type(3) > div {
+    width: 100px;
+    height: 200px;
+    border-radius: 100px 0 0 100px;
+    background: #f0c741;
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 000000000..5649dfd46
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,24 @@
+html, body {
+    height: 100%;
+}
+
+body {
+    background-color: lightskyblue;
+}
+
+#overlay{
+    position: fixed;
+    top: 0;
+    z-index: 999;
+    width: 100%;
+    height: 100vh;
+    background: rgba(7, 23, 37, 0.9);
+    color:white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#wrapper{
+    display: none;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 000000000..7b0070262
--- /dev/null
+++ b/index.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Fer's MDB</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/style.css"/>
+    <link rel="stylesheet" href="css/pacman.css">
+</head>
+<body>
+
+<main class="container">
+
+    <h1>Fer's Movie Database</h1>
+
+    <h3>Add movie</h3>
+
+    <form id="post-form">
+        <div class="form-group">
+            <label for="title">Title</label>
+            <input type="title" class="form-control" id="title" aria-describedby="" placeholder="Enter Title">
+        </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="rating" id="rating1" value="1" checked>
+            <label class="form-check-label" for="rating1">
+                1
+            </label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="rating" id="rating2" value="2" checked>
+            <label class="form-check-label" for="rating2">
+                2
+            </label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="rating" id="rating3" value="3" checked>
+            <label class="form-check-label" for="rating3">
+                3
+            </label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="rating" id="rating4" value="4" checked>
+            <label class="form-check-label" for="rating4">
+                4
+            </label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="rating" id="rating5" value="5" checked>
+            <label class="form-check-label" for="rating5">
+                5
+            </label>
+        </div>
+        <button id="submit-movie-btn" type="submit" class="btn btn-primary">Add Movie</button>
+    </form>
+
+    <div id="movie-cards" class="card-columns"></div>
+</main>
+
+<div id="wrapper">
+    <div id="overlay">
+        <div id="inner">
+            <h3>Loading...</h3>
+            <br>
+            <div class='uil-pacman-css' style='-webkit-transform:scale(1)'><div><div></div></div><div><div></div></div><div><div></div></div></div>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">Edit Movie Details</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form>
+                    <div class="form-group">
+                        <label for="title">Title</label>
+                        <input type="title" class="form-control" id="title-edit" aria-describedby="" placeholder="Enter Title">
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" name="rating-edit" value="1" checked>
+                        <label class="form-check-label" for="rating1">
+                            1
+                        </label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" name="rating-edit" value="2" checked>
+                        <label class="form-check-label" for="rating2">
+                            2
+                        </label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" name="rating-edit" value="3" checked>
+                        <label class="form-check-label" for="rating3">
+                            3
+                        </label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" name="rating-edit" value="4" checked>
+                        <label class="form-check-label" for="rating4">
+                            4
+                        </label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" name="rating-edit" value="5" checked>
+                        <label class="form-check-label" for="rating5">
+                            5
+                        </label>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <input type="hidden" id="movie-id">
+                <button type="button" class="btn btn-success" id="submit-changes-btn">Save changes</button>
+                <button type="button" class="btn btn-danger" id="delete-movie-btn" data-dismiss="modal">Delete</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
+<script src="js/api.js"></script>
+<script src="js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/install.sh b/install.sh
deleted file mode 100644
index 3beddd6d9..000000000
--- a/install.sh
+++ /dev/null
@@ -1,6 +0,0 @@
-echo 'Installing dependencies'
-npm install
-echo 'Building static assets'
-npm run build
-echo 'Starting the application'
-npm start
\ No newline at end of file
diff --git a/js/api.js b/js/api.js
new file mode 100644
index 000000000..c255a3f3e
--- /dev/null
+++ b/js/api.js
@@ -0,0 +1,64 @@
+"use strict";
+
+const URL = "https://codeup-json-server.glitch.me/movies";
+
+const API = {
+    getMovies: () => {
+        return fetch(URL).then(response => response.json());
+    },
+    getMovie: id => {
+        return fetch(`${URL}/${id}`).then(response => response.json());
+    },
+    postMovie: (movie) => {
+
+        let options = {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(movie),
+        };
+
+        return fetch(URL, options)
+            .then(() => {
+                console.log("movie was created successfully");
+            })
+            .catch(error => {
+                console.error(error);
+            });
+    },
+    editMovie: (movie) => {
+
+        let options = {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(movie),
+        };
+
+        return fetch(`${URL}/${movie.id}`, options)
+            .then(() => {
+                console.log("movie was edited successfully");
+            })
+            .catch(error => {
+                console.error(error);
+            });
+    },
+    deleteMovie: id => {
+        let options = {
+            method: 'DELETE',
+            headers: {
+                'Content-Type': 'application/json',
+            }
+        };
+
+        return fetch(`${URL}/${id}`, options)
+            .then(() => {
+                console.log("movie was deleted successfully");
+            })
+            .catch(error => {
+                console.error(error);
+            });
+    }
+}
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 000000000..ce9b66ce3
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,73 @@
+"use strict";
+
+//ESC key
+$(document).keyup(function(e) {
+    //ESC
+    if (e.keyCode === 27){
+        $("#wrapper").fadeOut();
+    }
+});
+
+loadMovies();
+
+function loadMovies(){
+    $('#editModal').modal('hide')
+    $("#wrapper").fadeIn();
+    API.getMovies().then((movies) => {
+        $("#wrapper").fadeOut();
+        $("#movie-cards").empty();
+        movies.forEach(({title, rating, id}) => {
+            $("#movie-cards").append(`<div class="card">
+            <img src="https://m.media-amazon.com/images/M/MV5BMTYzNDQyMzkyMV5BMl5BanBnXkFtZTgwMTE3MTI4MTE@._V1_SY1000_CR0,0,752,1000_AL_.jpg" class="card-img-top" alt="">
+            <div class="card-body">
+                <h5 class="card-title">${title}</h5>
+                <p class="card-text">${rating}</p>
+                <button data-id="${id}" class="btn btn-success edit-btn" data-toggle="modal" data-target="#editModal">Edit</button>
+            </div>
+        </div>`);
+        });
+
+        $(".edit-btn").click(function(e){
+            $("#wrapper").fadeIn();
+            e.preventDefault();
+            let id = $(this).data('id');
+
+            API.getMovie(id).then( movie => {
+                $("#wrapper").fadeOut();
+                $("#title-edit").val(movie.title);
+                $("input[value='"+movie.rating+"']").attr('checked', 'checked');
+                $("#movie-id").val(movie.id);
+            });
+        });
+
+    }).catch((error) => {
+        alert('Oh no! Something went wrong.\nCheck the console for details.')
+        console.log('error', error);
+    });
+}
+
+$("#submit-movie-btn").click(function(e){
+    e.preventDefault();
+    let movie = {
+        title: $("#title").val(),
+        rating: $("input[name='rating']:checked").val()
+    }
+    API.postMovie(movie).then( () => loadMovies());
+});
+
+$("#submit-changes-btn").click(function(e){
+    e.preventDefault();
+    let movie = {
+        id: $("#movie-id").val(),
+        title: $("#title-edit").val(),
+        rating: $("input[name='rating-edit']:checked").val()
+    }
+    API.editMovie(movie).then( () => loadMovies());
+});
+
+$("#delete-movie-btn").click(function(e){
+    e.preventDefault();
+    API.deleteMovie($("#movie-id").val()).then( () => loadMovies());
+});
+
+
diff --git a/package.json b/package.json
deleted file mode 100644
index ef9e6ac57..000000000
--- a/package.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "name": "tmp",
-  "version": "1.0.0",
-  "main": "index.js",
-  "scripts": {
-    "dev": "concurrently 'webpack-dev-server' 'json-server -d1200 --watch db.json'",
-    "build": "webpack -p",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node server.js"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "description": "",
-  "dependencies": {
-    "babel-core": "^6.25.0",
-    "babel-loader": "^7.1.1",
-    "babel-preset-env": "^1.5.2",
-    "concurrently": "^3.5.0",
-    "json-server": "^0.16.1",
-    "promise-polyfill": "^6.0.2",
-    "webpack": "4.29.6",
-    "webpack-cli": "3.3.0",
-    "webpack-dev-server": "3.2.1",
-    "whatwg-fetch": "^3.0.0"
-  }
-}
diff --git a/public/.gitignore b/public/.gitignore
deleted file mode 100644
index 56fb6b5ed..000000000
--- a/public/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-main.js
-*.map
diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index 78deca398..000000000
--- a/public/index.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8" />
-    <title>My Application</title>
-    <link rel="stylesheet" href="/style.css" />
-</head>
-<body>
-
-    <div class="container">
-        <h1>Hello There!</h1>
-        <p>To get started, edit <code>src/index.js</code>.</p>
-    </div>
-
-    <script src="./main.js"></script>
-</body>
-</html>
diff --git a/public/style.css b/public/style.css
deleted file mode 100644
index a05714a96..000000000
--- a/public/style.css
+++ /dev/null
@@ -1,10 +0,0 @@
-html, body {
-    height: 100%;
-}
-
-.container {
-    position: relative;
-    top: 50%;
-    transform: translateY(-100%);
-    text-align: center;
-}
diff --git a/server.js b/server.js
deleted file mode 100644
index 7fdb25d07..000000000
--- a/server.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const jsonServer = require('json-server')
-const server = jsonServer.create()
-const router = jsonServer.router('db.json')
-const staticMiddleware = require('express').static
-
-// serve content out of 'public' as is
-server.use(staticMiddleware('public'))
-
-server.use('/api', router)
-
-server.listen(3000, () => {
-    console.log('JSON Server is running')
-});
\ No newline at end of file
diff --git a/src/api.js b/src/api.js
deleted file mode 100644
index f75aeb901..000000000
--- a/src/api.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  getMovies: () => {
-    return fetch('/api/movies')
-      .then(response => response.json());
-  }
-};
diff --git a/src/hello.js b/src/hello.js
deleted file mode 100644
index 663a5b1cd..000000000
--- a/src/hello.js
+++ /dev/null
@@ -1 +0,0 @@
-export default (name) => console.log(`Hello there, ${name}!`);
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index cc9146b7b..000000000
--- a/src/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * es6 modules and imports
- */
-import sayHello from './hello';
-sayHello('World');
-
-/**
- * require style imports
- */
-const {getMovies} = require('./api.js');
-
-getMovies().then((movies) => {
-  console.log('Here are all the movies:');
-  movies.forEach(({title, rating, id}) => {
-    console.log(`id#${id} - ${title} - rating: ${rating}`);
-  });
-}).catch((error) => {
-  alert('Oh no! Something went wrong.\nCheck the console for details.')
-  console.log(error);
-});
diff --git a/webpack.config.js b/webpack.config.js
deleted file mode 100644
index dc9119337..000000000
--- a/webpack.config.js
+++ /dev/null
@@ -1,51 +0,0 @@
-// for resolving the absolute path to our project
-// necessary for webpack
-const path = require('path');
-const webpack = require('webpack');
-
-module.exports = {
-  // where our app "starts"
-  // add the promise and fetch polyfill first
-  entry: ['promise-polyfill', 'whatwg-fetch', './src/index.js'],
-  // where to put the transpiled javascript
-  output: {
-    path: path.resolve(__dirname, 'public'),
-    filename: 'main.js'
-  },
-
-  // babel config
-  module: {
-    rules: [
-      {
-        // any file that ends with '.js'
-        test: /\.js$/,
-        // except those in "node_modules"
-        exclude: /node_modules/,
-        // transform with babel
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['env']
-          }
-        }
-      }
-    ]
-  },
-
-  // allows us to see how the transpiled js relates to the untranspiled js
-  devtool: 'source-map',
-
-  devServer: {
-    contentBase: path.join(__dirname, 'public'),
-    port: 1313,
-    compress: true,
-    watchContentBase: true,
-    // send requests that start with "/api" to our api server
-    proxy: {
-      '/api': {
-        target: 'http://localhost:3000',
-        pathRewrite: {'^/api': ''}
-      }
-    }
-  }
-};