The program allows users to find specific movies and add them to a favorites list. The user can search by Movie Title, Actor, or Director and see most popular movie results. The user can then add certain demographic or identity tags to the movie. The intent of this project is to create a program that will allow users to see positive representations of their own or others' identities in media. This is particularly important for underrepresented groups as studies show that positive media representation is a critical factor in equity and social justice for marginalized communities. Future stretch goals include: the ability to rate the representation as more or less positive, rate the movie overall, create a forum to discuss representations in pop culture, and to create/store tagging metadata in an API database that others can access to get movie recommendations.
| Steps | Example |
|---|---|
| Follow this link to the project repository on GitHub. | Link to the project repository |
| Click on the "Clone or download" button to copy the project link. |  |
If you are comfortable with the command line, you can copy the project link and clone it through your command line with the command git clone + project link. Otherwise, I recommend choosing "Download ZIP". |
 |
| Once the ZIP file has finished downloading, you can right click on the file to view the zip folder in your downloads. |  |
| Right click on the project ZIP folder that you have just downloaded and choose the option "Copy To...", then choose the location where you would like to save this folder. |  |
| Navigate to the final location where you have chosen to save the project folder. | |
| To view the code itself, right click, choose "open with..." and open using a text editor such as VS Code or Atom, etc. | |
| Once you have cloned or downloaded the project and opened it in VS Code or another text editor, open a new terminal by navigating to Terminal -> New Terminal. A terminal will open on the page. |  |
Follow the steps below in the Setup and Installation of Node.js and npm section, then complete the next step in this sequence, running npm install |
## Setup/Installation of Node.js and npm |
In the terminal type the command npm install and hit enter to install node modules. You should see a file called node_modules appear and it should be greyed out |
 |
You can now view the project in your browser by typing the command npm run start in the terminal |
npm run start |
| Steps | Example |
|---|---|
| Download Node.js installer from the Node JS Website |  |
| Once the installer has finished downloaded, click on the 'downloads' link in the browser or navigate to the download on your desktop | |
| Follow the instructions to complete installation of the Node.js software | |
Verify that you have correctly installed Node.js by opening your command terminal and typing node -v |
 |
Verify that you have correctly installed npm by opening your command terminal and typing npm -v |
 |
| Steps | Example |
|---|---|
| To get an API key for the Project Me Finder website, go to the The Movie Database website. | Go to the tMDB site |
| Create an account with TMDb | Join TMDb |
| Enter your information to sign up for a free account | Sign up for a free account |
| You will need to verify your email address and then log into the site. | Click settings under your profile tag |
| Access the API settings | Click API on settings sidebar |
| Access the API key | Scroll to "API Key" |
Your API key is unique to you. DO NOT SHARE YOUR KEY. Below are the instructions for Add .env file which will walk you through setting up a .env file. You will store your key inside of that file to keep it private. |
see Add .env file below |
| Steps | Example |
|---|---|
| Create a file named .env in the head (top) directory of the project | |
| Once you have added the .env file it should be greyed out!!! A greyed out file indicates that it is private, will not be available to the public if you push the project to github and will keep any information inside of it (such as your API key) private |  |
| Inside of your .env file, you can add your API key. See the format in the image to the right. |  |
| IMPORTANT NOTE: Do not delete or change anything in the project's .gitignore file. This file specifies which directories and files are private and should not be shared or shown to others. The .gitignore should look as it does in the example to the right |  |
After you have added your API key to your .env file, type the command npm run build into your terminal and hit enter. This will incorporate your unique API into the project |
-
You will need to run npm install to install the node modules necessary to run this project.
-
Run a server to view this document using npm start.
| Behavior | Input | Output | Completed(Y/N?) |
|---|---|---|---|
| Program will search for result based on paramater and return any matching result | title | specific movie by title | Y |
| Program will accept a variety of parameters and return any matching result | actor, director, title | specific movies related to parameter selection | Y |
| Program will add predefined tags to movies | user selects a predefined tag | tag added to movie | Y |
| Program will create a favorites list | Favorite Movies | Waterworld | Y |
| Program will add a movie to a favorites list | User selects Add Killer of Sheep |
Favorite Movies: ["Killer of Sheep"]} | Y |
| Behavior | Input | Output | Completed(Y/N?) |
|---|---|---|---|
| Program will add multiple different favorites lists that user can name/title themselves | new Favorite object, new Favorite object | Favorite Directors, Favorite Genres | N |
| Program will add user rating to movies | User selects 2 stars for Sharknado | Movie object will have rating property | N |
| Bug | Resolved (Y/N) | How was the issue resolved? |
|---|---|---|
| When adding to favorites list it would add every item on the list again and give repeated results | Y | Moved favorites list click function outside of the submit function for favorites |
| After doing a search with 5 results, if the user then searced and received fewer than 5 results, the previous results would still show in the remaining spaces | Y | Hid each accordian on search and then showed results for only the new search |
| For any of the results, when user chooses and adds tags for a movie and then searches for a different movie or actor, the previous tags will show in the first movie with the tag checkboxes still checked | Y | Add a reset-tag class to all tags and set $(".reset-tag").each(function(){$(this).prop("checked", false); in main.js |
| For the second result and beyond, when looking at movies, if you add tags and then hit add tags and check a new tag, the original tags will be present, but then all three will be inserted so that you have multiples of the same tag - the first | N | n/a |
| When the second or third movies are added to the list, an empty bullet point is added below | Y | Set list style type to none for list item tags |
If you have any questions or comments, please reach out via email at mariel.hamson@gmail.com.
- HTML5
- CSS3
- Bootstrap v-4.5.0
- JavaScript
- jQuery v-3.5.0
- Visual Studio Code
- Git and Git BASH
- Node.js
- npm package manager
- Webpack
- API calls
- Asynchronous JavaScript
This site is licensed under the MIT license.
Copyright (c) 2020 Mariel Hamson, Jason Khan, Sara Kane, Chris Yoon & Brittany Lindgren