# Petarazzi  --- An app to post pictures of your pets! --- ### Core User Stories As a user, I want to... - sign up - log in - post a photo of my pet with a caption - have my username displayed within my post - see photos of other user's pets - log out - Stretch: be able to delete my post --- ### Day 1 - Plan the user experience flow and server routes - Project setup - Database schema - HTML templates for routes - Estimated: 7 points /Actual: 6 points --- ### Day 2 * Built Home Page * Built Sign Up Page * Built Log In Page * Built Profile Page (Authentication) * Created custom Middleware * Implemented Multer Middleware * Estimated: 20 points / Actual: 15 points --- ### Day 3 * Form validation (browser) * Tests * Sanitised user inputs * CSS styling * Deployed on Heroku by 4pm :confetti_ball: * Estimated: 16 points / Actual: 10 points --- ### Facilitator & DevOps (the ultimate control freak combo!) - Try new project dependencies: ESlint, Prettier, Gitblame - Less errors at runtime === better mental health - Morning and afternoon stand ups - More breaks === more brains :brain: - Use of GitHub project board tasks --- Github Project board tasks  ---  --- ESlint 'quick fix'  --- Adds comment to remind you that ESlint is disabled for this file  --- ### UX/UI - User Flow, seeing the design and features from the point of view of the user - Spacial awareness of how the forms look and approaching this from mobile first design - Conducting usabilty testing, testing the code does what the intention is --- - Accessibility, don't add aria-labels to buttons already with text descriptions, screen reader overload :exploding_head: - There were a lot more aspects to think about :thinking_face: with how a user can navigate to different routes, and how their username should follow them once logged in and I've learnt to make that a priority focus for future projects :crystal_ball: --- ### QA - We accessed almost everything from our SQL tables, we were close to figuring this out, maybe a fresh look tomorrow will spark the solution :bulb: --- ## get the cookie ` cy.getCookie("cookiename") ` <br> ## make assertions `.should("not.exist")` <br> ## delete the cookie `cy.clearCookie("cookiename")` --- ## Cypress Intercept  --- ` cy.intercept() ` Enables us to * access objects with information about the request and response. * make assertions about their properties. * mock a request's response. --- ### How can we use it We can use it to test real responses from the server It can be also very useful to mock responses. --- Implementation in our project: We used it to test that the profile page can't be displayed if the user is not logged in --- assign the request to an `Alias`  --- visit the route  --- wait on the alias  --- then make assertions  ---  --- ## Useful resources : [Cypress | Network Requests](https://docs.cypress.io/guides/guides/network-requests#Testing-Strategies) [Cypress | Intercept](https://docs.cypress.io/api/commands/intercept) --- ## What we have learnt - everyone - Sometimes Postgres shuts down your local postgres server when you restart your mac :confused: - Install Postgres with [Postgres App](https://postgresapp.com/) to prevent problems in future - UX is a combination of all the code files required correctly - We can write scripts and place them inside the public folder (?) - Multer middleware (uploading a file) --- ## What we are proud of * Achieving the core tasks * Taking time to practice everything we learned so far * Planning and organization * Good workflow - alternating driver/navigator * Writing pseudocode * Commiting often * Good team communication --- ## What we could have done more - Displayed user posts on dedicated profile page - GitHub OAuth login - Delete post functionality - Use Express Validator for server-side validation --- [DEMO](https://petarazzi.herokuapp.com/)