Foodie is an a discussion forum where people post and comment on a food recipe.
·
DEMO
·
User Stories
·
Application Goals from User Stories are:
- Sign-up and Create Profile Foodie User
- Anyone can See Posts and Comments
- Signed-in user able to post a Post and comment
- Signed-in user able to delete it's own Posts and Comments
-
We used the async fetch to give a better user experience, so that user won’t wait for a long time to see all the posts.
-
The navigation bar we used the conditional render to show different content for the logged in user and random visitor.
-
We set up a home button for the profile page. In case our user who just updated their profile page and want to go back to home page to continue reading posts.
-
In the signup page, we set the html input type to email and password, to avoid any invalid form submit.
-
Stop repeating Code in html. So used JS to type code. Create functional components to tackle this.
* Post function postDiv(post, comments = []) { return ` <div class="card post-card"> <div class="card-body"> <div class="row"> <div class="col-md-12"> ... ... </div> </div> </div> <div/>`; }
-
Add click eventlistener into Raw html buttons.
function createPostDiv() { let div = document.createElement("div"); div.innerHTML = ` <div class="card post-card"> <div class="card-body"> <div class="row"> <div class="col-md-12"> ... <button ... onclick="createPost()"...</button> ... </div> </div> </div> </div>` return div; }
-
Adding multiple comments into Posts with reference to Post id.
function postDiv(post, comments = []) { return ` <div class="card post-card"> <div class="card-body"> <div class="row"> ... </div> </div> ... --> comments.map(comment => commentDiv(comment)).reverse().join('') } </div> <div/>`; }
-
Creating Profile with Signup
(function createSignup(){
fetch("http://thesi.generalassemb.ly:8080/signup", {
headers: ...,
method: "POST",
body: JSON.stringify({
...
})
})
.then(res => res.json())
.then(res => {
localStorage.setItem("foodieUser",JSON.stringify(res));
----------> creatProfile(res.token);
})();
----------> function creatProfile(token) {
fetch("http://thesi.generalassemb.ly:8080/profile", {
headers: {
...
},
method: "POST",
body: JSON.stringify({
...
})
})
.then(res => {
if (res.status === 200){
window.location.href = 'index.html'
}
})
.catch(res => {
console.log("Error:" + res);
});
}
});
-
Requirement Analysis
-
Tuesday(Sep 24, 2019) - user stories
We give our user stories points, so that we could priority our development steps
https://www.pivotaltracker.com/n/projects/2400262
-
-
Development
- Wednesday(Sep 25, 2019) - Home page, fetch all users post and comments and display on the home page.
- Thursday(Sep 26, 2019) - Sign up page and login started
- Friday(Sep 27, 2019) - All the post and comments functional works.
- Friday(Sep 27, 2019) - Manual Testing - Finished profile page and testing all the possible error.
-
Deployement
-
Friday(Sep 27, 2019) - Deployed onto Github Sites
-
-
Presentation
- Monday (Sep 30, 2019) - Presentation
We use the Bootstrap to style our html elements, paste following code inside the head tag:
- Installation instructions
Include These files into he index.html
<head>
..
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
..
</head>
<body>
.
.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
- Webstorm
- VS Code
- VS Code Live Server
- Postman (API Testing and Calls)
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
cognizant-p1/
├── README.md
└── src
├── css
│ ├── main.css
│ ├── profile.css
│ └── signup.css
├── js
│ ├── main.js
│ ├── profile.js
│ └── signup.js
├── index.html
├── profile.html
└── signup.html
Mingjing Tang
Mohammad Javed
https://bootsnipp.com/snippets/M5obX