Final Project

Single Page Application with Multiple APIs Integration

Objective: Develop a single-page application that combines multiple APIs into a unified interface for searching, displaying, saving, and deleting images.

Instructions:

Starter Code (opens new window)

Setup and Structure:

• Create a private repo on github named mad9014-w24-finalProject
• Create a project folder to organize your files.
• Root level: - index.html, .gitignore, readme.md files with folders for css and js
• Initialize HTML structure with a navigation links/buttons for search and saved images.
• Set up CSS for basic styling and layout.

Search Interface:

• Implement the search interface:
• When the "Search" button/link is clicked, display a search form.
• Starting with the pixabay (or pexels, or shutterstock, or unsplash API) to search for a group of images. The user will fill out a form with search parameters and click a button to start the fetch.
• Pixabay lets you search by adding the following queryString values (image_type: photo), (orientation: horizontal), (category: people), (per_page: 30) plus a keyword for the search.
• The fetched images should all be of people. Control this through the search parameters.
• Make sure url and active link/button in navigation will let users know that they are on the search page

Image Details Dialog:

• Implement a dialog for displaying full-sized images:
• When a user clicks on an image result, show a
  centered on the page with the full-sized image.
• Include "Save" and "Cancel" buttons in the dialog.
• The "Save" button should save the image using the Cache API.
• The "Cancel" button should hide the dialog.

Saved Images:

• Implement functionality for displaying saved images:
• When the "Saved" button/link is clicked, clear the main content area.
• Change the active link/button in the navigation and update the url with new hash value
• Read saved images from the Cache and display them in a responsive grid, similar to search results.
• Clicking on a displayed saved image should show a dialog with the full-sized version of the image.
• This dialog should have a close and a delete button.

Face Detection with MediaPipe AI API:

• Utilize the MediaPipe AI API for face detection on only saved images:
• When a saved image dialog is opened, use the MediaPipe AI API to examine the image. hint: make sure you are using image src URL from a blob object
• If no faces are found, display a message indicating so.
• If faces are found, draw bounding boxes around the faces, dots on facial landmarks, and display the confidence percentage for each bounding box.

Delete Button within Modal:

• Delete button should remove the item from the cache API.

Hint: after removing the item from the cache, display the saved images again and close the modal.

History API

• Make sure browser back and forward arrows are working and showing the recently visited data/pages

Efficient Coding and Accessibility:

• Write clean, efficient code following best practices.
• Ensure accessibility by using semantic HTML, providing alternative text for images, and ensuring keyboard navigation.

Testing and Debugging:

• Test the application thoroughly in different scenarios and environments.
• Use browser developer tools for debugging and fixing any issues encountered.

Documentation:

• Document your code with comments to explain complex logic.
• Provide clear instructions for users on how to interact with the application.

Final Touches:

• Polish the UI/UX and make any necessary adjustments.
• Feel free to use a css library.
• Feel free to use google fonts to give your application a personal touch.

Important Links:

• History API: Course Notes (opens new window) , MDN resources (opens new window)
• CacheAPI: Course Notes (opens new window), MDN resources (opens new window)
• Dialog video: Steve's video (opens new window)
• Media Pipe API (opens new window)
• Starter Code (opens new window)

Submission

Due Date **Week 15**

(See BS LMS for exact date)

After you have uploaded your code, go to the Settings page and click on the Collaborators link in the left-hand menu. Add your instructor as a collaborator to your repo.

Open BS LMS and go to the Activities > Assignments page.

Go to the assignment5 and submit the link to your repository into the text area. Then submit the form and look for confirmation.

---