> For the complete documentation index, see [llms.txt](https://softstack-factory.gitbook.io/mean-stack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://softstack-factory.gitbook.io/mean-stack/backend/wk6/final-project.md).
# Announce Final Project
Create mock designs, implement frontend, and setup a backend to store data from your frontend.
## **Overview**
Create an Angular web app you can either make a movie search app or Stock Search.
* [The MOVIE DB](https://www.themoviedb.org/documentation/api)
* **Example**\
[**http://angularexpo.com/movies-finder/**](http://angularexpo.com/movies-finder/)
* **API Doc** [**https://developers.themoviedb.org/3/search/search-movies** ](https://developers.themoviedb.org/3/search/search-movies)
* [Stock Search API ](https://www.alphavantage.co/)**Example:** [**http://angularexpo.com/ng2-finance/**\ ](http://angularexpo.com/ng2-finance/)
For this part of the project we are focused on just the frontend of our application. You will need an api key from either api in order to access it, so you will have to sign up.
## **Mandatory Steps Before Coding**
* [ ] Choose an API above to create a project
* [ ] Make sure that you have node, angular-cli, and npm all installed on your machine (you should already).
* [ ] Make sure that your workspace is showing hidden files. You can find it on the cogwheel on the left sidebar at the top.
* [ ] Once you’ve verified all that, verify that you are in the root project directory
**(i.e. phortonssf:\~/workspace/)**,
we will make a final-project folder to contain our work by running the following command in the terminal:
**`mkdir final-project`**
* [ ] Then change directory into the final project-folder you just created:\
**`cd `**
**Important Notes:**
{% hint style="warning" %}
Going forward we will be creating a **front-end folder** and a **back-end folder** inside of this new **final-project folder**.
**We need to make sure that we are not creating a back-end folder inside of the front-end folder,** **rather we need to create a back-end folder inside of the final-project folder.**
{% endhint %}
**Additionally:**
{% hint style="warning" %}
We will not be making new directory by running the following command:
**`$ mkdir `**
Instead after we make sure we are in the **final-project folder** and we run the following commands these folders will be created for us:
**`Creating front-end folder`**
**`$ ng new final-project-front`**
**`Creating a back-end folder`**
**`$ lb`**
{% endhint %}
* [ ] Now create a new project within the final-project folder using:\
**`ng new final-project-front`**
* [ ] change directory into final-project-front: **`cd `**
* [ ] Test out your app to make sure it runs correctly. In order to run your app, use: **`ng serve`**
* [ ] Run the following add command inside the front-end directory to use Clarity as a UI framework:**`ng add @clr/angular`**
* [ ] Git setup
* [ ] You’ll need to get your git repo created. Follow steps 1-3 of this [Git](https://docs.google.com/document/d/1tom32r-Z0_ObYjIHuDJ0d0sfETjKd3xR_x6hwrpSUvs/edit#) doc to get your remote repository created.
* [ ] Once you have your repo, go back to your final-project directory:
**\*if you see:**
| **phortonssf:\~/workspace/final-project/final-project-front(master)** |
| --------------------------------------------------------------------- |
**\*then skip the below command. Else enter:**
| **phortonssf:\~/workspace/final-project/final-project-front `$ git init`** |
| -------------------------------------------------------------------------- |
* [ ] Add the remote repository you created. Your URL (in << >>) should be specific to your own remote repo url:
| **phortonssf:\~/workspace/final-project/final-project-front `$ git remote add origin <>`** |
| ---------------------------------------------------------------------------------------------------- |
* [ ] Lastly, we’re going to add the files and push it up to the remote repository. Run the following command:
| **phortonssf:\~/workspace/final-project/final-project-front `$ git push -u origin master`** |
| ------------------------------------------------------------------------------------------- |
### **Project Setup**
1. Create a simple mock of what your app will look like using the following tool:
2. Create a component that will be the view for the main page of the app and setup your router.ts and place the \ in the app.component.html
3. Create a service that will be used to make the http call to your select app api.
4. Then an \ so the user can search. You will need to use ngModel and bind it to a value in the service created in step 3. This way our search will eventually be dynamic.
5. Now make the http call dynamic by using the variable in the service this 2 way bound to the input box. Console.log the data you get in the response.
6. Once you have data back from the server check what properties are available and think about what you want to display and use. For example movie title or the picture or stock closing price.
## **Requirements**
1. Use NgFor: Using structural directives such as \*ngFor is critical in angular.
2. Retrieve data from an API: Making http calls is another common task needed to have a real functional app.
3. Install Project Clarity
4. Use Flex Box or Project Clarity Grid: Creating layouts is critical to any web application
5. Click Event: Executing function onclick events or button press is another must know task for any web application
6. NgModel: Allows us to accept user input and use it in our http call.
7. Components: Create components for your repeated code.
8. Service: must have a service that makes an http call and display data.
## **Specifications**
Your web application will have a search bar that takes in user input and allows them to search your chosen API for information. From there the user can add the results of the HTTP request to a favorites list. The favorites list should update in real time after the user clicks, add to favorites once the backend has successfully been integrated.
## **Implementation Resources**
{% content-ref url="/pages/-LvraSg94oL60C4bOwoT" %}
[Register](/mean-stack/backend/wk7/register.md)
{% endcontent-ref %}
{% content-ref url="/pages/-LSS\_i98artdrZ47Y6qK" %}
[Create Persisted Models](/mean-stack/backend/wk7/persisted-models.md)
{% endcontent-ref %}
{% content-ref url="/pages/-LSrjhxjgQAUhA55DX5C" %}
[Relations](/mean-stack/backend/wk8-final-project-relations/relations.md)
{% endcontent-ref %}
\
**Advanced Techniques**
-----------------------
**For those of you looking to further your skills**
* @Input: Pass data into components with input decorator
* @Output: Emit data from our components using output decorator
* Pipes: Create a custom angular pipe to filter user input data
* Async Pipes: Use angular async to subscribe to an observable