In this project, you will create a search bar for your item catalog. This will be the final step in your FullStack education. In this project you will see the separation of concerns between a frontend and a backend. This is also the final project before you create your own project. For that reason, there is less step by step and more of a general framework to follow, much as you would have in a final project.

You'll notice two folders: frontend and backend. The backend already contains a VagrantFile. You should just be able to drop your catalog folder inside that folder and have everything working. You then should be able to run the following commands

cd backend
vagrant up
vagrant ssh

You should then be able to run your project just like you did for the last project.

The frontend is already an Angular project. To get it up and working you should run the following commands OUTSIDE OF YOUR VAGRANTBOX (i.e. in a separate terminal window from which you ran your backend)

cd frontend
npm install

You should now be able to run ng serve and go to localhost:4200 to see the Angular welcome page.

You should create components for each of your classes in your database_setup.py except for user. You should then display the appropriate information for each component using your JSON methods. You may find this article helpful.

For right now I would just be able to load the data (save the POST requests for a bonus).

To me it makes more sense to handle the login on the frontend and only authorize calls to the backend if a user is logged in.

To implement login with Angular you should use Angular X Social Login

The final part will be implementing the Google Search Bar. It will be very similar to the Spotify API Search Bar found in this project

You'll need a search endpoint on your backend. This will be another JSON endpoint. It will take in a search and query the database for all entries that contain the search. It will end up looking something like this though probably a lot less complicated.

You will also need to add bolding to the parts of the search that match what's in the search bar. I would use a pipe to accomplish this task.

Finish linking your frontend by implementing the ability to add, edit, and delete to your catalog from the Angular frontend. Make sure that you are authorizing users.