# Project Brief Build a microblogging site. It should allow users to submit their own posts and view all the posts submitted by others. Theme: :movie_camera: movie microblogging. <iframe src="https://giphy.com/embed/xUOrwafTKBZR78xeyQ" width="280" frameBorder="0" class="giphy-embed" allowFullScreen></iframe> --- # Team members and roles: **User:** Chisha (_absent: Weds 14:00-14:30; Thurs 14:00-14:30_) **Quality:** Neville **Deployment:** Safia (_absent: Thurs 14:30-15:00_) **Facilitator:** Sevda (_absent: Thurs 15:30-16:00_) --- # Action Plan:  --- :movie_camera: **_In a group we started to organise with the following:_** - General disscussion on ideas and looking at FAC20 for an overall project reference. - As a design idea we've looked into thumbl's microblog. - Looked through past challenges from Oli's sessions on Server as a code reference. - Assigned the roles and noted any absences. - Agreed on a theme - creating a Movie Sharing and Reviewing blogpost. --- :movie_camera: **_In a group we started to organise with the following:_** ... - Put our ideas into actionable points by creating pseudocode. - Used Kanban Board to assign the issues, user stories considering velocity. - Modules used for testing: Cypress - As a team we set up the files. - Split in pairs by names in a hat:tophat: method and worked through issues and user stories. --- :movie_camera: **_In a group we started to organise with the following:_** ... - Swap pairs so everyone works on all parts of the code. - We put our ideas into plan as a team of 4 so everybody can visualise what we are building in the same way. --- **Kanban board**:star2:  --- <img src="https://i.imgur.com/epfVy2z.png" alt="" width="250"> <img src="https://i.imgur.com/S0S0c3r.png" alt="" width="250"> ---  ---  --- :movie_camera: **_Followed previous object code to assist with the project_** :smile_cat: **Oli's code** :stars: ```javascript= let dogs = { alphonso: { name: "Alphonso", breed: "German Shepherd" }, lassie: { name: "Lassie", breed: "Golden Retriever" }, pongo: { name: "Pongo", breed: "Dalmation" }, luna: { name: "Luna", breed: "Cocker Spaniel" }, }; ``` > **Our code** :star2: ```javascript= let movies = { Matrix: [{reviewer: "Chisha", post: "not my cup of tea"}, {reviewer: "Sevda", post: "loved it"}], Superman: [{ reviewer: "Neville", post: "Excellent movie"}, {reviewer: "Safia", post: "Did not like it"}] } ``` --- :movie_camera: **_JS code to add items to our movie object_** ```javascript= server.post("/search", bodyParser, (req, res) => { const movieTitle = req.query.movie; const post = req.body; const reviewer = post.reviewer; const review = post.review; const blogObj = { reviewer: review, post: review }; movies[movieTitle].push(blogObj); let posts = ""; const reviews = movies[movieTitle]; for (const review of reviews) { posts += `<li>${review.reviewer}, ${review.post}</li>`; } ``` --- :movie_camera: **_A Testing Time: Homepage_** ```javascript= describe("homepage", () => { it("Has correct title", () => { cy.visit("/"); cy.get("h1").contains("Movie Review Blog!"); }); it("Movie link works", () => { cy.visit("/"); cy.contains("superman").click(); cy.url().should("include", "/search?movie=superman"); }); }); ``` --- :movie_camera: **_A Testing Time: Review Page_** ```javascript= describe("movie review page", () => { it("Can add a post", () => { cy.visit("/search?movie=matrix"); //reviewer input, review input and then click cy.get("form").find("input[name='reviewer']").type("neville"); cy.get("form").find("input[name='review']").type("cool!"); cy.get("form").find("button").click(); //test if output matched to the input. cy.get("li").eq(2).should("contain", "neville"); cy.get("li").eq(2).should("contain", "cool!"); }); }); ``` --- :movie_camera: **_Testing CORS Error_** :frowning: ```javascript= { "baseUrl" : "http://localhost:3000", "chromeWebSecurity": false } ``` ---  --- :movie_camera: **_Code to assist displaying the object_** # Quick checklist - [x] Create Kanban Board, Issues and connect to Project - [x] Create server - [x] Homepage with name, movie review post - [x] Allow users to post comments - [x] Allow users to view comments - [ ] Allow users to delete comments - [x] Test Test Test via Cypress - [ ] Check accessibility: [wave](https://wave.webaim.org/extension/), [lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en) --- # Woulda Coulda Shoulda **Learnings:** :brain: ```css - /* Node is server-side, media-queries are client-side. */ @media only screen and (max-width: 600px) { .movie-review-list { margin-left: 350px; } } ``` ---  --- **If we had more time:** :watch: - Clearer idea of what each frame should look like - Refactor some code - Do more tests - Assign it on Heroku - Follow previous course challenges to help guide us --- ### :clap: Special thanks to this weeks mentors **_Azizi_** and **_Rihard_** for giving a looooooooot of their time and making it easier for us!  --- Thank you for listening ---