# Week-7-rcmn --- <!-- Mariya --> ## Roles Quality - Nafisa User - Chun Facilitator - Mariya Deployment - Rosie --- <img style="float: right;" src="https://media.giphy.com/media/KoBphUqHYTsSKlaYJd/giphy.gif" height=300> ## Ideas * book reviews * job site (upload cv) * photo library - add pics of things to shared library? could include filtering, different photo albums --- ## Chosen app - Travel Photo App * Upload images of favourite places/ nice pictures and then tag it with key words :heavy_check_mark: * We can then filter using those key words :heavy_multiplication_x: * You will need to have an account to upload pictures :heavy_check_mark: * You can only delete you own pictures :heavy_multiplication_x: * Anyone can view all images and filter them :heavy_multiplication_x: --- ## Spikes - Uploading files Allow users to upload files to your server (like images or audio clips).  --- ## Design <img src="https://i.imgur.com/nHpi4e6.png" style="height: 520px;"> --- <!-- Chun --> ## Project board & pairs https://github.com/fac21/Week-7-rcmn/projects/2 --- ## Demo https://week-7-photo-app.herokuapp.com/ --- <!-- Nafisa --> ## Struggles we were really confused on how the get function for the images, the req.params.id and the source of the image linked. --- with displaying the images in their correct form, before we were inserting the image directly in the src ``` <img src="${photos.photo}" alt="" width="64" height="64"> ``` which displayed the images in their binary form:  --- What we learned: - the img src needs to include the id of the image - you can use that src/url as the route - you can then access the id of the image with request.params.photoid to get the correct photo from the db and send it ``` <img src="photos/${photos.id}" alt="" width="64" height="64"> ``` ``` server.get("/photos/:photoid", photoPic.get) ``` --- <!-- Rosie --> ## Hints and tips To get a full path name for file (Mac users sorry Windows!): 1. use finder to locate the image 2. click view 3. click show path bar 4. when the path bar appears at the bottom, right click on the file itself and click: copy ```<file name>``` as pathname --- Postico Postico is a download for Macs(sorry! :/ ) which lets you view your database in a slightly clearer way - this was very useful for us when looking at the image column in our tables https://eggerapps.at/postico/ --- ## Deleting from database <img src="https://i.imgur.com/7UzcVpA.png" style="height: 520px;"> --- ### Questions * Why do we install some things as a development dependency only? * ...And why did we need to npm install cookie-parser every time?! * Do we need npm run start (node server.js) if we're also using nodemon (npm run dev)? ---