diff --git a/README.md b/README.md
index 9b56c216f..606350e5b 100644
--- a/README.md
+++ b/README.md
@@ -1,49 +1,27 @@
-# Final Project
-*Due October 13th (final day of the term)*
-
-For your final project, you'll implement a web application that exhibits understanding of the course materials. 
-This project should provide an opportunity to both be creative and to pursue individual research and learning goals.
-
-## General description
-Your project should consist of a complete Web application, exhibiting facets of the three main sections of the course material:
-
-- Static web page content and design. You should have a project that is accessible, easily navigable, and features significant content.
-- Dynamic behavior implemented with JavaScript (TypeScript is also allowed if your group wants to explore it).
-- Server-side programming *using Node.js*. Typically this will take the form of some sort of persistent data (database), authentication, and possibly server-side computation. 
-- A video (less than five minutes) where each group member explains some aspect of the project. An easy way to produce this video is for you all the groups members to join a Zoom call that is recorded; each member can share their screen when they discuss the project or one member can "drive" the interface while other members narrate (this second option will probably work better.) The video should be posted on YouTube or some other accessible video hosting service. Make sure your video is less than five minutes, but long enough to successfully  explain your project and show it in action. There is no minimum video length.
-
-## Project ideation
-Excellent projects typically serve someone/some group; for this assignment you need to define your users and stakeholders. I encourage you to identify projects that will have impact, either artistically, politically, or in terms of productivity. 
-
-### Deliverables
-
-#### Form Team (due 9/25)
-Students are will work in teams of 3-5 students for the project; teams of two can be approved with the permission of the instructor. Working in teams should help enable you to build a good project in a limited amount of time.  Use the `#project-logistics` channel in Discord to pitch ideas for final projects and/or find fellow team members as needed.
-
-Teams must be in place by end of day on Sunday, September 25th. If you have not identified a team at this point, you will be assigned a team. You will be given some class time on Monday to work on your proposal, but please plan on reserving additional time outside of class as needed.
-
-#### Proposal (due 9/27) 
-Provide an outline of your project direction and the names of associated team members. 
-The outline should have enough detail so that staff can determine if it meets the minimum expectations, or if it goes too far to be reasonable by the deadline. Please include a general description of a project, and list of key technologies/libraries you plan on using (e.g. React, Three.js, Svelte, TypeScript etc.). Two to four paragraps should provide enough level of detail. Name the file proposal.md and submit a pull request by Tuesday, September 27th at 11:59 PM (end of day). Only one pull request is required per team.
-
-There are no other scheduled checkpoints for your project. 
-
-#### Turning in Your Project
-Submit a second PR on the final project repo to turn in your app and code. Again, only one pull request per team.
-
-Deploy your app, in the form of a webpage, to Glitch/Heroku/Digital Ocean or some other service; it is critical that the application functions correctly wherever you post it.
-
-The README for your second pull request doesn’t need to be a formal report, but it should contain:
+README
 
 1. A brief description of what you created, and a link to the project itself (two paragraphs of text)
+  
+  Link: https://final-project-lnbsr.glitch.me/ 
+  
+  Description: We created a website on which a user can login and view playlists of the top songs of various genres. They can also add songs to each genre, as well as upvote or downvote individual songs. Users can register, and the songs/votes data is persistent between sessions and users.
+
 2. Any additional instructions that might be needed to fully use your project (login information etc.)
+  
+  Additional Instructions: The project is rather user-friendly. To Register, click the register button to go to the register page, enter your new username and password, and click register again. To sign in, click Sign In, enter your username and password, and click Sign In again. Once signed in, you can view the playlists of songs, and can upvote/downvote songs, as well as click the Add Song button to add a new song to its respective playlist.
+
 3. An outline of the technologies you used and how you used them.
+  
+  We used MongoDB for a database, as well as bootstrap for CSS. We also used express for server-frontend communication. We also used Node.js for the server.
+
 4. What challenges you faced in completing the project.
-5. What each group member was responsible for designing / developing.
-6. A link to your project video.
 
-Think of 1,3, and 4 in particular in a similar vein to the design / tech achievements for A1—A4… make a case for why what you did was challenging and why your implementation deserves a grade of 100%.
+  Lexie and Benjamin ran into a number of errors redirecting from the login to the top page. Sidney and Nadiyah ran into some issues finding a good way of showing all the playlists on the same page, as well as showing the songs in tables rather than lists. Ryan ran into some issues getting server communication to work with her page.
 
-## FAQs
+5. What each group member was responsible for designing / developing.
+  
+  Benjamin took the lead on creating the server side code and communication with the database. Lexie did the Login page. Sidney and Nadiyah made the Top Songs page. Ryan created the Add Songs page.
 
-- **Can I use XYZ framework?** You can use any web-based frameworks or tools available, but for your server programming you need to use Node.js. Your client-side scripting language should be either JavaScript or TypeScript.
+6. A link to your project video.
+  
+  Video: https://youtu.be/-gz7nBQKlts
diff --git a/package.json b/package.json
new file mode 100644
index 000000000..8100d1461
--- /dev/null
+++ b/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "glitch-hello-node",
+  "version": "0.1.0",
+  "description": "A simple Node app built on fastify, instantly up and running. Built to be remixed on Glitch.com.",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "@fastify/formbody": "^7.0.1",
+    "@fastify/static": "^6.5.0",
+    "@fastify/view": "^7.1.0",
+    "cookie-parser": "^1.4.6",
+    "express": "^4.18.1",
+    "express-session": "^1.17.3",
+    "fastify": "^4.4.0",
+    "fs": "0.0.1-security",
+    "handlebars": "^4.7.7",
+    "mime": "^3.0.0",
+    "mongodb": "^4.10.0",
+    "morgan": "^1.10.0"
+  },
+  "engines": {
+    "node": "14.x"
+  },
+  "repository": {
+    "url": "https://glitch.com/edit/#!/glitch-hello-node"
+  },
+  "license": "MIT",
+  "keywords": [
+    "node",
+    "glitch",
+    "express"
+  ]
+}
diff --git a/public/client.js b/public/client.js
new file mode 100644
index 000000000..97e91fe25
--- /dev/null
+++ b/public/client.js
@@ -0,0 +1,121 @@
+// client-side js
+// run by the browser each time your view template is loaded
+
+//console.log("hello world :o");
+
+// our default array of dreams
+
+// define variables that reference elements on our page
+
+const loginbtn = document.getElementById("loginbtn");
+const registerbtn = document.getElementById("registerbtn");
+const usernameInput = document.getElementById("username");
+const passwordInput = document.getElementById("password");
+const usernameRInput = document.getElementById("newusername");
+const passwordRInput = document.getElementById("newpassword");
+const loginDiv = document.getElementById("login");
+const registerDiv = document.getElementById("register");
+const loginTogglebtn = document.getElementById("loginTogglebtn");
+const registerTogglebtn = document.getElementById("registerTogglebtn");
+let user, pass
+
+
+// a helper function that creates a list item for a given dream
+//loginPage.setAttribute("hidden", "hidden");
+        //plannerPage.removeAttribute("hidden");
+
+
+
+// iterate through every dream and add it to our page
+
+// listen for the form to be submitted and add a new dream when it is
+//Form.onsubmit = function (event) {
+
+//};
+
+
+
+const onClickLogin = function () {
+  user = usernameInput.value;
+  pass = passwordInput.value;
+
+  fetch("/login", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      username: user,
+      password: pass,
+    }),
+  })
+    .then((response) => response.json())
+    .then((login) => {
+      if (login) {
+        //loginPage.setAttribute("hidden", "hidden");
+        //plannerPage.removeAttribute("hidden");
+        //updateTable(user);
+        //warn.innerHTML = "";
+        window.location.href = 'top.html';
+        //TODO: set page (home page)
+        console.log("logged in");
+      } else {
+        
+        console.log("not logged in")
+        
+        //TODO: tell them wrong username or password
+        
+        
+        //warn.innerHTML = "incorrect username or password";
+      }
+    });
+
+  return false;
+};
+
+const onClickRegister = function () {
+  user = usernameRInput.value;
+  pass = passwordRInput.value;
+  
+
+  fetch("/register", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      username: user,
+      password: pass,
+    }),
+  })
+    .then((response) => response.json())
+    .then((reg) => {
+      if (reg) {
+        console.log("registered")
+        
+        usernameInput.value = user;
+        passwordInput.value = pass;
+        onClickLogin();
+        //warn.innerHTML = "registered";
+      } else {
+        
+        console.log("not registered")
+        //warn.innerHTML = "username taken";
+      }
+    });
+
+  return false;
+};
+
+const loginVisible = function() {
+  loginDiv.removeAttribute("hidden");
+  registerDiv.setAttribute("hidden", "hidden");
+  return false;
+}
+
+const registerVisible = function() {
+  loginDiv.setAttribute("hidden", "hidden");
+  registerDiv.removeAttribute("hidden");
+  return false;
+}
+
+loginTogglebtn.onclick = loginVisible;
+registerTogglebtn.onclick = registerVisible;
+loginbtn.onclick = onClickLogin;
+registerbtn.onclick = onClickRegister;
diff --git a/public/create.html b/public/create.html
new file mode 100644
index 000000000..0ec06833b
--- /dev/null
+++ b/public/create.html
@@ -0,0 +1,89 @@
+<!--create/submit playlists page -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Submit</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+  </head>
+
+  <body class="bg-light">
+    <h1 class="text-primary ms-1">Submit a Song</h1>
+    <p>
+      Enter the song's genre ('Rap', 'Pop', 'R&B', 'Rock', or 'Country'), along
+      with the song's title and artist
+    </p>
+    <form>
+      <!--<input type="text" id="genre" value="enter a valid genre" />
+      <select id="genre" name="genre" size="3">
+        <option value="Rap">Rap</option>
+        <option value="saab">Saab</option>
+        <option value="fiat">Fiat</option>
+'Pop', 'R&B', 'Rock', or 'Country
+        <option value="audi">Audi</option>
+      </select>-->
+      <select class="form-select form-select-sm" aria-label=".form-select-sm example" id="genre">
+        <option selected>Genre</option>
+        <option value="Rap">Rap</option>
+        <option value="R&B">R&B</option>
+        <option value="Rock">Rock</option>
+        <option value="Pop">Pop</option>
+        <option value="Country">Country</option>
+      </select>
+      <br>
+      <input type="text" id="title" value="enter song title" />
+       <br>
+      <input type="text" id="artist" value="enter song artist" />
+       <br>
+      <button>Submit Song</button>
+    </form>
+    <form>
+      <button type="backToTop" id="backToTop">
+        Back to Top Songs Playlists
+      </button>
+    </form>
+    
+  </body>
+</html>
+
+<script>
+  
+  const backBtn = document.getElementById('backToTop');
+  
+  const submit = function (e) {
+    e.preventDefault();
+
+    const genre = document.getElementById("genre"),
+      title = document.getElementById("title"),
+      artist = document.getElementById("artist")
+      //json = { genre: genre.value, title: title.value, artist: artist.value },
+      //body = JSON.stringify(json);
+      //console.log(body)
+    if(genre.value != 'Genre'){
+      fetch("/submit", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({genre: genre.value, title: title.value, artist: artist.value, vote: 1 }),
+      })
+      .then(function(response) {
+        return response.json();
+      })
+      .then(function(json) {
+        console.log(json);
+      });
+
+      window.location.href = 'top.html';
+    }
+    return false;
+  };
+  
+  backBtn.onclick = () => {
+  window.location.href = 'top.html';
+  return false;
+}
+
+  window.onload = function () {
+    const button = document.querySelector("button");
+    button.onclick = submit;
+  };
+</script>
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 000000000..5af97e44c
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Listplay - Login</title>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content ="width=device-width, initial-scale=1.0"/>
+    <meta name="description"
+          content="Login for Listplay"/>
+    
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <style>
+      /*Basic formatting rn, until we decide on a style*/
+      body{
+        text-align:center;
+      }
+      h1, h2{
+        font-size: 2.5em;
+      }
+      label{
+        font-side:1.5em;
+      }
+      input[type=submit]{
+        padding:5px, 15px;
+        cursor: pointer;
+        border: 1;
+        border-radius: 5px;
+        font-size: 1em;
+      }
+      input[type=text]{
+        cursor: text;
+        border:1;
+        border-radius:3px;
+        font-size: 1em;
+      }
+      input[type=password]{
+        cursor: text;
+        border:1;
+        border-radius:3px;
+        font-size: 1em;
+      }
+    </style>
+    
+     <script src="/client.js" defer></script>
+    
+  </head>
+  <body class="bg-light">
+  <div id="login">
+    <h1 class="text-primary ms-1">
+      Log In
+    </h1>
+    <form action="/login" method="POST">
+      <label for="username">Username</label>
+      <br>
+      <input type="text" name="username" id="username">
+      <br>
+      <label for="password">Password</label>
+      <br>
+      <input type="password" name="password" id="password">
+      <br>
+      <br>
+      <button id="loginbtn" class="btn btn-success ">Log in</button>
+      <button id="registerTogglebtn" class="btn btn-warning">Register</button>
+    </form>
+    <br><br>
+  </div>
+  <div id="register" hidden>
+    <h2>
+      Create Account
+    </h2>
+    <form action="/register" method="POST">
+      <label for="newusername">Username</label>
+      <br>
+      <input type="text" name="username" id="newusername">
+      <br>
+      <label for="newpassword">Password</label>
+      <br>
+      <input type="password" name="password" id="newpassword">
+      <br>
+      <br>
+      <button id="registerbtn" class="btn btn-success">Create Account</button>
+      <button id="loginTogglebtn" class="btn btn-warning">Log in</button>
+    </form>
+  </div>  
+  </body>
+</html>
diff --git a/public/top.html b/public/top.html
new file mode 100644
index 000000000..288556f2f
--- /dev/null
+++ b/public/top.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>input { display:block }</style>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
+      crossorigin="anonymous"
+    />
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="A page to view the songs in each playlist"
+    />
+    <title>Playlist Page</title>
+    <script src="/top.js" defer></script>
+  </head>
+  <body class="bg-light">
+    <h1 class="text-primary ms-1">Top Songs Playlists</h1>
+    
+    <form>
+      <button type="addSong" id="addSong">
+        Add Song
+      </button>
+    </form>
+    
+    <h2 class="text-secondary text-dark">Rap</h2>
+    <section class="Rap">
+      <table
+            id="rapTable"
+            class="table table-striped table-hove table-bordered table-sm table-dark"
+          >
+            <tr>
+              <th>Song</th>
+              <th>artist</th>
+              <th>Rank</th>
+              <th>Up Vote</th>
+              <th>Down Vote</th>
+            </tr>
+      </table>
+    </section>
+    
+    <h2 class="text-secondary text-dark">R&B</h2>
+    <section class="R&B">
+      <table
+            id="R&BTable"
+            class="table table-striped table-hove table-bordered table-sm table-dark"
+          >
+            <tr>
+              <th>Song</th>
+              <th>artist</th>
+              <th>Rank</th>
+              <th>Up Vote</th>
+              <th>Down Vote</th>
+            </tr>
+      </table>
+    </section>
+    
+    <h2 class="text-secondary text-dark">Pop</h2>
+    <section class="Pop">
+      <table
+            id="popTable"
+            class="table table-striped table-hove table-bordered table-sm table-dark"
+          >
+            <tr>
+              <th>Song</th>
+              <th>artist</th>
+              <th>Rank</th>
+              <th>Up Vote</th>
+              <th>Down Vote</th>
+            </tr>
+      </table>
+    </section>
+    
+    <h2 class="text-secondary text-dark">Rock</h2>
+    <section class="Rock">
+      <table
+            id="rockTable"
+            class="table table-striped table-hove table-bordered table-sm table-dark"
+          >
+            <tr>
+              <th>Song</th>
+              <th>artist</th>
+              <th>Rank</th>
+              <th>Up Vote</th>
+              <th>Down Vote</th>
+            </tr>
+      </table>
+    </section>
+    
+    <h2 class="text-secondary text-dark">Country</h2>
+    <section class="Country">
+      <table
+            id="countryTable"
+            class="table table-striped table-hove table-bordered table-sm table-dark"
+          >
+            <tr>
+              <th>Song</th>
+              <th>artist</th>
+              <th>Rank</th>
+              <th>Up Vote</th>
+              <th>Down Vote</th>
+            </tr>
+      </table>
+    </section>
+    
+    
+    
+    <!--
+     <table
+            id="results"
+            class="table table-striped table-hove table-bordered table-sm table-dark"
+          >
+            <tr>
+              <th>Destination</th>
+              <th>Distance to Destination</th>
+              <th>Average Speed</th>
+              <th>Time to Destination</th>
+              <th>delete</th>
+              <th>modify</th>
+            </tr>
+-->
+    
+    <form>
+      <label>
+        <button type="logout" id="logout">
+          Log Out
+        </button>
+      </label>
+    </form>
+
+  </body>
+</html>
diff --git a/public/top.js b/public/top.js
new file mode 100644
index 000000000..2e93c7991
--- /dev/null
+++ b/public/top.js
@@ -0,0 +1,194 @@
+
+// fill the page: Rap (Test; doesn't work yet)
+const rbTable = document.getElementById('R&BTable'),
+      popTable = document.getElementById('popTable'),
+      rockTable = document.getElementById('rockTable'),
+      countryTable = document.getElementById('countryTable'),
+      Raptable = document.getElementById('rapTable'),
+      logout = document.getElementById('logout'),
+      addBtn = document.getElementById('addSong');
+
+//document.body.appendChild(document.createElement('p').innerHTML=req.cookies['user'])
+
+//const test = function(){
+//  fetch("userCookie", {method:"POST"})
+//  .then(response => response.json()) // parse the JSON from the server
+//  .then(user => {console.log(user)})
+///}
+//test();
+
+const appendNewSong = function(song,type) {
+  const newListItem = document.createElement('li');
+  if(song.vote == undefined)
+    song.vote = 0;
+  newListItem.innerHTML = song.title + " " + song.artist //+   '    &#x2191 ' + song.vote; //+ '  &#x2191' + '   &#x2193';
+  if(song.vote > 0)
+    newListItem.innerHTML += '    &#x2191 ' + song.vote;
+  if(song.vote < 0)
+    newListItem.innerHTML += '    &#x2193 ' + song.vote;
+  type.appendChild(newListItem);
+}
+
+
+
+
+
+fetch("/get", {
+    method: "POST",
+  })
+  .then(response => response.json()) // parse the JSON from the server
+  .then(songs => {
+    
+  
+    // remove the loading text
+    
+    //rapList.firstElementChild.remove();
+    //rbList.firstElementChild.remove();
+    //popList.firstElementChild.remove();
+    //rockList.firstElementChild.remove();
+    //countryList.firstElementChild.remove();
+  
+    songs.forEach(element => {
+      switch(element.genre){
+        case("Rap"):
+          //appendNewSong(element,rapList);
+          appendNewSongTable(element,Raptable);
+          break;
+        case("R&B"):
+          //appendNewSong(element,rbList);
+          appendNewSongTable(element,rbTable);
+          break;
+        case("Pop"):
+          //appendNewSong(element,popList);
+          appendNewSongTable(element,popTable);
+          break;
+        case("Rock"):
+          //appendNewSong(element,rockList);
+          appendNewSongTable(element,rockTable);
+          break;
+        case("Country"):
+          //appendNewSong(element,countryList);
+          appendNewSongTable(element,countryTable);
+          break;
+        default:
+          break;
+          
+      }
+      console.log(element);
+      
+
+    })
+  })
+
+const appendNewSongTable = function(song,type) {
+        const row = type.insertRow(1);
+        const cell1 = row.insertCell(0);
+        const cell2 = row.insertCell(1);
+        const cell3 = row.insertCell(2);
+        const cell4 = row.insertCell(3);
+        const cell5 = row.insertCell(4);
+        cell1.innerHTML = song.title;
+        cell2.innerHTML = song.artist;
+        if(song.vote > 0){
+          cell3.innerHTML = song.vote + '  &#x2191  ';
+        } else if(song.vote < 0){
+          cell3.innerHTML = Math.abs(song.vote) + '  &#x2193  ';
+        } else {
+          cell3.innerHTML = song.vote;
+        }
+        cell4.innerHTML = "   &#x2191   ";
+        cell5.innerHTML = "   &#x2193   ";
+        cell4.addEventListener("click", function () {
+          upVote(song); //remove item
+        });
+        cell5.addEventListener("click", function () {
+          downVote(song); //remove item
+        });
+}
+
+const upVote = function(song){
+  console.log("upvote");
+  song.vote += 1;
+  fetch("/update", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(song),
+  })
+  window.location.reload();
+}
+
+const downVote = function(song){
+  console.log("downvote");
+  song.vote -= 1;
+  
+  if(song.vote <= -10){
+    fetch("/delete", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(song),
+    })
+  } else {
+    fetch("/update", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(song),
+    })
+  }
+  window.location.reload();
+}
+
+//{genre: genre.value, title: title.value, artist: artist.value, vote: 1 }
+
+/*
+
+<th>Song</th>
+              <th>artist</th>
+              <th>Rank</th>
+              <th>Up Vote</th>
+              <th>Down Vote</th>
+
+
+//get the table
+const table = document.getElementById("results");
+
+//delete all elements (i used for reload)
+
+const rows = table.rows.length;
+  for (let i = rows - 1; i > 0; i--) {
+    table.deleteRow(i);
+  }
+  
+  
+
+//add a row ( i used element.forEach((item) => {
+        const row = table.insertRow(1);
+        const cell1 = row.insertCell(0);
+        const cell2 = row.insertCell(1);
+        const cell3 = row.insertCell(2);
+        const cell4 = row.insertCell(3);
+        const cell5 = row.insertCell(4);
+        const cell6 = row.insertCell(5);
+        cell1.innerHTML = item.dest;
+        cell2.innerHTML = item.miles;
+        cell3.innerHTML = item.avg;
+        cell4.innerHTML = item.time;
+        cell5.innerHTML = "   ^   ";
+        cell6.innerHTML = "   V   ";
+        cell5.addEventListener("click", function () {
+          del(item); //remove item
+        });
+        cell6.addEventListener("click", function () {
+          modify(item); //remove item
+        });
+*/
+
+
+addBtn.onclick = () => {
+  window.location.href = 'create.html';
+  return false;
+}
+
+logout.onclick = () => {
+  window.location.href = 'index.html';
+  return false;
+}
diff --git a/server.js b/server.js
new file mode 100644
index 000000000..bfe39425f
--- /dev/null
+++ b/server.js
@@ -0,0 +1,221 @@
+const express = require( 'express' ),
+      http = require( 'http' ),
+      mongodb = require( 'mongodb' ),
+      ServerApiVersion = require('mongodb'),
+      fs   = require( 'fs' ),
+      cookieParser = require('cookie-parser'),
+      // IMPORTANT: you must run `npm install` in the directory for this assignment
+      // to install the mime library used in the following line of code
+      mime = require( 'mime' ),
+      morgan = require('morgan'),
+      app = express(),
+      dir  = 'public/',
+      session = require('express-session'),
+      port = 3000
+
+const appdata = [
+  { 'model': 'toyota', 'year': 1999, 'mpg': 23 },
+  { 'model': 'honda', 'year': 2004, 'mpg': 30 },
+  { 'model': 'ford', 'year': 1987, 'mpg': 14} 
+]
+
+
+
+//Connect to Server
+
+const uri = `mongodb+srv://${process.env.USER}:${process.env.PASS}@${process.env.URL}`;
+
+const client = new mongodb.MongoClient( uri, { useNewUrlParser: true, useUnifiedTopology:true, serverApi: ServerApiVersion.v1 })
+let collection = null
+let usercollection = null
+
+client.connect()
+  .then( () => {
+    // will only create collection if it doesn't exist
+    return client.db( 'Final' ).collection( 'data' )
+  })
+  .then( __collection => {
+    // store reference to collection
+    collection = __collection
+    // blank query returns all documents
+    return collection.find({ }).toArray()
+  })
+  .then( console.log )
+
+
+
+client.connect()
+  .then( () => {
+    // will only create collection if it doesn't exist
+    return client.db( 'Final' ).collection( 'users' )
+  })
+  .then( __usercollection => {
+    // store reference to collection
+    usercollection = __usercollection
+    // blank query returns all documents
+    return usercollection.find({ }).toArray()
+  })
+.then( console.log )
+
+
+
+app.use( express.static('public') )
+app.use( express.json() )
+app.use(morgan(':method :url :status :res[content-length] - :response-time ms'))
+app.use(cookieParser())
+app.use(session({secret: "Shh, its a secret!"}));
+
+// <-- Express Middleware --> //
+
+
+
+/*
+//Get every Playlist
+app.get( '/', (req,res) => {
+  if( collection !== null ) {
+    // get array and pass to res.json
+    collection.find({ }).toArray().then( result => res.json( result ) )
+  }
+})
+*/
+//add a playlist to db
+app.post( '/submit', (req, res) => {
+  console.log(req.body)
+  collection.insertOne( req.body ).then( result => res.json( result ) )
+})
+
+
+//delete 1 playlist with id == body._id
+app.post( '/delete', (req, res) => {
+  collection
+    .deleteOne({ _id:mongodb.ObjectId( req.body._id ) })
+    .then( result => res.json( result ) )
+})
+
+//get a user with the username == body.user
+app.post("/getUser",(req,res,next)=>{
+   if( collection !== null ) {
+    usercollection.find({ username:req.body.username }).toArray().then( result => res.json( result ) )
+  }
+})
+
+//return wether or not body.username and body.password match a user in the db
+app.post("/login",(req,res,next)=>{
+  console.log("in login")   
+   if( collection !== null ) {
+    usercollection.find({ username:req.body.username }).toArray().then( result => res.json(result[0].password == req.body.password))
+  }
+  console.log("redirecting to top.html")
+  //res.redirect( 'top.html' )
+  //TODO FIX REDIRECT
+})
+
+
+app.post("/get",(req,res,next)=>{
+   if( collection !== null ) {
+    collection.find({}).toArray().then( result => res.json( result ) )
+  }
+})
+
+app.post("/userCookie",(req,res) => {
+  res.json(JSON.stringify(res.cookie['user']))
+  console.log(res.cookie['user'])
+})
+
+
+
+//add a user to the db, username: body.username, password: body.password
+app.post("/register",(req,res,next)=>{
+   if( collection !== null ) {
+    // check to see if name is taken
+     console.log(req.body.username)
+     console.log("registration")
+    usercollection.find({ username:req.body.username }).toArray().then( result => {
+      console.log(result.length)
+      if(result.length == 0)  usercollection.insertOne( req.body )
+      res.json(result.length == 0)
+    })
+  }
+})
+
+app.post( '/update', (req,res) => {
+  //console.log(req.body)
+  
+  collection
+    .updateOne(
+      { _id:mongodb.ObjectId( req.body._id ) },
+      { $set:{ genre:req.body.genre,title:req.body.title,artist:req.body.artist,vote:req.body.vote } }
+    )
+    .then( result => res.json( result ) )
+})
+
+
+//TODO update function
+/*
+
+{genre: genre.value, title: title.value, artist: artist.value, vote: 1 }
+
+
+const server = http.createServer( function( request,response ) {
+  if( request.method === 'GET' ) {
+    handleGet( request, response )    
+  }else if( request.method === 'POST' ){
+    handlePost( request, response ) 
+  }
+})
+
+const handleGet = function( request, response ) {
+  const filename = dir + request.url.slice( 1 ) 
+
+  if( request.url === '/' ) {
+    sendFile( response, 'public/index.html' )
+  }else{
+    sendFile( response, filename )
+  }
+}
+
+const handlePost = function( request, response ) {
+  let dataString = ''
+
+  request.on( 'data', function( data ) {
+      dataString += data 
+  })
+
+  request.on( 'end', function() {
+    console.log( JSON.parse( dataString ) )
+
+    // ... do something with the data here!!!
+
+    response.writeHead( 200, "OK", {'Content-Type': 'text/plain' })
+    response.end()
+  })
+}
+
+
+
+const sendFile = function( response, filename ) {
+   const type = mime.getType( filename ) 
+
+   fs.readFile( filename, function( err, content ) {
+
+     // if the error = null, then we've loaded the file successfully
+     if( err === null ) {
+
+       // status code: https://httpstatuses.com
+       response.writeHeader( 200, { 'Content-Type': type })
+       response.end( content )
+
+     }else{
+
+       // file not found, error code 404
+       response.writeHeader( 404 )
+       response.end( '404 Error: File Not Found' )
+
+     }
+   })
+}
+
+*/
+app.get( '/', ( req, res ) => res.send( 'Hello World!' ) )
+
+app.listen( 3000 )
diff --git a/src/colors.json b/src/colors.json
new file mode 100644
index 000000000..7a1480dce
--- /dev/null
+++ b/src/colors.json
@@ -0,0 +1,150 @@
+{
+  "aliceblue": "#f0f8ff",
+  "antiquewhite": "#faebd7",
+  "aqua": "#00ffff",
+  "aquamarine": "#7fffd4",
+  "azure": "#f0ffff",
+  "beige": "#f5f5dc",
+  "bisque": "#ffe4c4",
+  "black": "#000000",
+  "blanchedalmond": "#ffebcd",
+  "blue": "#0000ff",
+  "blueviolet": "#8a2be2",
+  "brown": "#a52a2a",
+  "burlywood": "#deb887",
+  "cadetblue": "#5f9ea0",
+  "chartreuse": "#7fff00",
+  "chocolate": "#d2691e",
+  "coral": "#ff7f50",
+  "cornflowerblue": "#6495ed",
+  "cornsilk": "#fff8dc",
+  "crimson": "#dc143c",
+  "cyan": "#00ffff",
+  "darkblue": "#00008b",
+  "darkcyan": "#008b8b",
+  "darkgoldenrod": "#b8860b",
+  "darkgray": "#a9a9a9",
+  "darkgreen": "#006400",
+  "darkgrey": "#a9a9a9",
+  "darkkhaki": "#bdb76b",
+  "darkmagenta": "#8b008b",
+  "darkolivegreen": "#556b2f",
+  "darkorange": "#ff8c00",
+  "darkorchid": "#9932cc",
+  "darkred": "#8b0000",
+  "darksalmon": "#e9967a",
+  "darkseagreen": "#8fbc8f",
+  "darkslateblue": "#483d8b",
+  "darkslategray": "#2f4f4f",
+  "darkslategrey": "#2f4f4f",
+  "darkturquoise": "#00ced1",
+  "darkviolet": "#9400d3",
+  "deeppink": "#ff1493",
+  "deepskyblue": "#00bfff",
+  "dimgray": "#696969",
+  "dimgrey": "#696969",
+  "dodgerblue": "#1e90ff",
+  "firebrick": "#b22222",
+  "floralwhite": "#fffaf0",
+  "forestgreen": "#228b22",
+  "fuchsia": "#ff00ff",
+  "gainsboro": "#dcdcdc",
+  "ghostwhite": "#f8f8ff",
+  "goldenrod": "#daa520",
+  "gold": "#ffd700",
+  "gray": "#808080",
+  "green": "#008000",
+  "greenyellow": "#adff2f",
+  "grey": "#808080",
+  "honeydew": "#f0fff0",
+  "hotpink": "#ff69b4",
+  "indianred": "#cd5c5c",
+  "indigo": "#4b0082",
+  "ivory": "#fffff0",
+  "khaki": "#f0e68c",
+  "lavenderblush": "#fff0f5",
+  "lavender": "#e6e6fa",
+  "lawngreen": "#7cfc00",
+  "lemonchiffon": "#fffacd",
+  "lightblue": "#add8e6",
+  "lightcoral": "#f08080",
+  "lightcyan": "#e0ffff",
+  "lightgoldenrodyellow": "#fafad2",
+  "lightgray": "#d3d3d3",
+  "lightgreen": "#90ee90",
+  "lightgrey": "#d3d3d3",
+  "lightpink": "#ffb6c1",
+  "lightsalmon": "#ffa07a",
+  "lightseagreen": "#20b2aa",
+  "lightskyblue": "#87cefa",
+  "lightslategray": "#778899",
+  "lightslategrey": "#778899",
+  "lightsteelblue": "#b0c4de",
+  "lightyellow": "#ffffe0",
+  "lime": "#00ff00",
+  "limegreen": "#32cd32",
+  "linen": "#faf0e6",
+  "magenta": "#ff00ff",
+  "maroon": "#800000",
+  "mediumaquamarine": "#66cdaa",
+  "mediumblue": "#0000cd",
+  "mediumorchid": "#ba55d3",
+  "mediumpurple": "#9370db",
+  "mediumseagreen": "#3cb371",
+  "mediumslateblue": "#7b68ee",
+  "mediumspringgreen": "#00fa9a",
+  "mediumturquoise": "#48d1cc",
+  "mediumvioletred": "#c71585",
+  "midnightblue": "#191970",
+  "mintcream": "#f5fffa",
+  "mistyrose": "#ffe4e1",
+  "moccasin": "#ffe4b5",
+  "navajowhite": "#ffdead",
+  "navy": "#000080",
+  "oldlace": "#fdf5e6",
+  "olive": "#808000",
+  "olivedrab": "#6b8e23",
+  "orange": "#ffa500",
+  "orangered": "#ff4500",
+  "orchid": "#da70d6",
+  "palegoldenrod": "#eee8aa",
+  "palegreen": "#98fb98",
+  "paleturquoise": "#afeeee",
+  "palevioletred": "#db7093",
+  "papayawhip": "#ffefd5",
+  "peachpuff": "#ffdab9",
+  "peru": "#cd853f",
+  "pink": "#ffc0cb",
+  "plum": "#dda0dd",
+  "powderblue": "#b0e0e6",
+  "purple": "#800080",
+  "rebeccapurple": "#663399",
+  "red": "#ff0000",
+  "rosybrown": "#bc8f8f",
+  "royalblue": "#4169e1",
+  "saddlebrown": "#8b4513",
+  "salmon": "#fa8072",
+  "sandybrown": "#f4a460",
+  "seagreen": "#2e8b57",
+  "seashell": "#fff5ee",
+  "sienna": "#a0522d",
+  "silver": "#c0c0c0",
+  "skyblue": "#87ceeb",
+  "slateblue": "#6a5acd",
+  "slategray": "#708090",
+  "slategrey": "#708090",
+  "snow": "#fffafa",
+  "springgreen": "#00ff7f",
+  "steelblue": "#4682b4",
+  "tan": "#d2b48c",
+  "teal": "#008080",
+  "thistle": "#d8bfd8",
+  "tomato": "#ff6347",
+  "turquoise": "#40e0d0",
+  "violet": "#ee82ee",
+  "wheat": "#f5deb3",
+  "white": "#ffffff",
+  "whitesmoke": "#f5f5f5",
+  "yellow": "#ffff00",
+  "yellowgreen": "#9acd32"
+}
diff --git a/src/pages/index.hbs b/src/pages/index.hbs
new file mode 100644
index 000000000..b235d01db
--- /dev/null
+++ b/src/pages/index.hbs
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    
+    <!-- 
+      This is the main Handlebars template for the site 
+      - When the user visits the homepage or submits a color the app calls the endpoints in server.js
+      - The server script passes data in here and the Handlebars code builds it into the HTML page
+    -->
+    
+    <meta charset="utf-8" />
+    <link rel="icon" href="https://glitch.com/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>{{seo.title}}</title>
+    
+    <!-- Meta tags for SEO and social sharing -->
+    <link rel="canonical" href="{{seo.url}}">
+    <meta name="description" content="{{seo.description}}">
+    <meta property="og:title" content="{{seo.title}}">
+    <meta property="og:type" content="article">
+    <meta property="og:url" content="{{seo.url}}">
+    <meta property="og:description" content="{{seo.description}}">
+    <meta property="og:image" content="{{seo.image}}">
+    <meta name="twitter:card" content="summary">
+
+    <!-- Import the webpage's stylesheet -->
+    <link rel="stylesheet" href="/style.css" />
+
+    <!-- This is a handlebars IF statement
+         Checking for a custom "color" parameter from server.js -->
+    {{#if color}} 
+    <!-- If there is a color value, update the style for the page title -->
+    <style>
+      .title {
+        color: {{color}};
+      }
+    </style>
+    {{/if}}    
+  </head>
+  <body>
+    <div class="wrapper">
+      <div class="content" role="main">
+        
+        <!-- This is the start of content for our page -->
+        <h1 class="title">Hello Node!</h1>
+        
+        <!-- Add text indicating that we've changed color OR had an error -->
+        {{#if color}}
+          <p class="color-info">
+            Now available in <b>{{color}}</b>!
+          </p>
+        {{/if}}  
+        
+        {{#if colorError}}
+          <p class="color-info">
+            
+            <!-- The server script passes colorError if the user submission can't be matched -->
+            Hmm. Couldn't find <b>"{{colorError}}"</b>. 
+            <a href="?randomize=go">Try a random color?</a>
+          </p>
+        {{/if}}
+        
+        <div class="color-form">
+          
+          <!-- Our default paragraph/message -->
+          {{#unless colorError}}
+            {{#unless color}}
+          
+            <!-- There are fancier ways to do this, 
+                 but nesting two "#unless" statements sets up an 
+                 "if these are both missing..." condition -->
+            <p>
+              Learn about communication with a server by talking about color.
+            </p>
+            {{/unless}}
+          {{/unless}}
+          
+          <!-- The "What's your favorite color?" form sends a POST request to the server
+               Check server.js to see how it works -->
+          <form class="color-search" method="post">
+              <label for="color">
+                
+                <!-- We use the handlebars "#if" statement so the form can adapt to its situation -->
+                {{#if color}}
+                  Try another color?<br>
+                {{else}}
+                  What's your favorite color?<br>
+                {{/if}}
+                <input id="color" name="color" required="required" type="text">
+              </label>
+            
+            <!-- If the user submits a value through the form 
+                 it'll be passed to the server in the request body  -->
+            <button type="submit">Submit</button>
+          </form>
+          
+          <!-- This randomize link communicates with the server (server.js) 
+               using a querystring and GET request instead of a form POST -->
+          Can't decide? <a href="?randomize=go">Use a random color!</a>
+        </div>
+        
+        <div class="illo-container">
+          <img src="https://cdn.glitch.com/c62efef6-1e75-45cf-b248-afeccdda9477%2Fillustration.svg?v=1618196069568" class="illustration" alt="Node logo" />
+        </div>
+        
+        <!-- Instructions on using this project -->
+        <div class="instructions">
+          <h2>
+            Using this project
+          </h2>
+          <p>
+            This is the Glitch <strong>Hello Node</strong> project. You can
+            use it to build your own app. Check out README.md in the editor for
+            more info and next steps you can take!
+          </p>
+        </div>
+        
+      </div>
+    </div>
+    <!-- The footer holds our remix button — you can use it for structure or cut it out ✂ -->
+    <footer class="footer">
+      <div class="links"></div>
+      <a
+        class="btn--remix"
+        target="_top"
+        href="https://glitch.com/edit/#!/remix/glitch-hello-node"
+      >
+        <img
+          src="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FLogo_Color.svg?v=1618199565140"
+          alt=""
+        />
+        Remix on Glitch
+      </a>
+    </footer>
+  </body>
+</html>
diff --git a/src/seo.json b/src/seo.json
new file mode 100644
index 000000000..df7503a16
--- /dev/null
+++ b/src/seo.json
@@ -0,0 +1,7 @@
+{
+  "glitch-help-instructions": "For a custom domain, change the 'url' parameter from 'glitch-default' to your domain _without_ a traling slash, like 'https://www.example.com'",
+  "title": "Hello Node!",
+  "description": "A simple Node site built with Glitch. Remix it to get your own.",
+  "url": "glitch-default",
+  "image": "https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2Fhello-node-social.png?v=1618161394375"
+}