# Week 4 Project
## 😱 > 🤯 > 😭 > 🧐 > 🎉🥂🔥
---
### A Movie Search Engine
#### for slow typers :snail:
---
## Our Dream
We want to improve the user experience of movie lovers by suggesting movies they might be thinking of while they type the title.
We intend to query an API and use the results to populate a dropdown list. We aim to use a **front-end AND a back-end API** :muscle:
---
## User Journey
---
## The user should be able to:
- Load the app
- Type a movie title into the search field
- Be served a list of movies based upon their search
- Submit the search
- Receive a movie synopsis for the chosen movie
---
Design... It's not stealing if it's done with love and admiration.
---
## Architecture
---
---
---
## Problems
- Connecting the initial server request to the 3rd party API
- Using URLs to pass information between modules
- Connecting files throughout different modules and writing file paths
- Keeping track of what each module was doing and where it was connected to
- Asynchronicity
---
## Call requests
**We created a request to the server in the front end**
```js
let xhr = new XMLHttpRequest();
const frontCall = (searchInput) => {
var url = `search=${searchInput}`;
console.log('search input: ', searchInput);
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
let frontObj = JSON.parse(xhr.responseText);
} else {
console.error(xhr.responseText);
}
}
xhr.open("GET", url, false);
xhr.send();
};
```
---
**This request triggered our API call on the back-end** --> _Via the router + handler_
``` js
var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var searchInput = "";
var key = process.env.API_KEY;
function apiCall(inputValue) {
var url =
"https://api.themoviedb.org/3/search/movie?api_key=" +
key +
"&" +
inputValue;
console.log(url);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
let movieObj = JSON.parse(xhr.responseText);
console.log("This is req:", movieObj);
}
};
xhr.open("GET", url, false);
xhr.send();
}
```
---
**Our handler tells it what to do**
``` js
const handleCall = (request, response, endpoint) => {
parsedEnd = endpoint.substring(1, endpoint.length);
var unfiltered = query.apiCall(parsedEnd);
var filtered = filterResults(unfiltered);
response.writeHead(200, { 'content-type': 'application/json' });
response.end(JSON.stringify(filtered));
};
const filterResults = Obj => {
let movies = Obj.results;
let titles = [];
for (i = 0; i < 5; i++) {
titles.push(movies[i].title);
}
return titles;
};
```
---
## Code snippets
---
### Substring for query
Our endpoint included a slash but the API didn't want one, so we took it out:
---
### path.extname(endpoint)
---
### Things we would have liked to do
- Pull additional data from the API
- Display movie summary, actors, poster, etc. on the screen after selecting movie
- Add a search icon
- Refactor code wherever possible
- Get rid of console errors
- Create additional tests
{"metaMigratedAt":"2023-06-14T23:04:41.130Z","metaMigratedFrom":"Content","title":"Week 4 Project","breaks":true,"contributors":"[{\"id\":\"f4dbbfdb-23d9-45e5-b500-a9d1c32a9ce4\",\"add\":918,\"del\":417},{\"id\":\"de1daa10-3284-4174-992b-8976c25a1232\",\"add\":735,\"del\":17},{\"id\":\"6d4d3154-b883-4d43-b76c-2e58b74a5e3d\",\"add\":2133,\"del\":402},{\"id\":\"2967aacf-1990-431e-b963-91e79ce4a2bf\",\"add\":706,\"del\":1}]"}