Functionality for PhotoQ App

Everyone: These are NOT the mock-ups for PhotoQ, so do not try and get your Web pages to look like the enclosed .pdf. It would be a complete waste of your time.

If you want to do your own designs for the PhotoQ project, here are some simple sketches to illustrate the functionality that we want it to have. From these, Dana will make mock-ups for most of the students to use. If you want to make your own mock-ups of what the site should look like, using your own design ideas, please go for it! We will grade your final submission of the project based in part on how well it matches your mock-up, not Dana's.

You will need a mock-up picture for pages 2, 3, 4 and 5 of the enclosed PDF, along with mobile versions for each.

Feel free to consider fonts, background colors, logos, lines or other dividers, and the layout of controls and also of the image gallery itself.

1. The first slide shows what controls are available when the user first arrives at the page. There is a search box with a button to initiate the search of the photo database by tags, and an "add" button to add a photo to the database.
2. The second slide shows the user entering text into the search box, and available tags showing up to auto-complete what the user entered. We will not implement autocomplete until the third part of the project, but you do need a design for it.
3. The third slide shows Dana's idea for how tags will be displayed as the user chooses them. Of course, give this some thought. The user can select as many tags as they want.
4. When the user pushes the search button, the set of photos matching the selected tags is returned (via an AJAX call!). The fourth slide shows how the photos returned by the search are displayed. Dana here is using a layout similar to that in Google images; another possibility is arranging them more like Pinterest. We'll do the Google-type layout using this React component, so if you want a Pinterest-type layout, or something else, you need to consider the technical details of how you'd achieve it.
5. The fifth page shows what happens when the user clicks on "add" to add an image to the database. The user needs to enter a URL, and submit. If the URL is not found or does not contain an image, PhotoQ should display an error message. Otherwise the new image should become the first image in the gallery (so the other images will have to move around...the React component will handle that, if you choose to use it).