Team Foodstory DP4 Report
====
2021.05.27

Point of View(PoV)
----
- We met a young sns lover that taking picture for every meal.
- We were amazed to realize that she takes a lot of pictures of foods to make memories. From these pictures, share only pictures that she thinks they looks good. We also surprise that when she share, she does not want to use original her SNS account but on "food only" account.
- It’d be a game changing to help her have some “food only” place to keep her food memory in a form of both private diary and SNS to share good pictures directly.

Target Users
----
<!--Should be one sentence-->
Our target users are who wants to make food memory and share to others good pictures about what they ate

Tasks
----
Foodie who loves taking a picture of food and share good pictures for his friends. Like any other days, she is organizing everything in Foodstory.
1. Foodie uploade food pictures to diary to organize all of his pictures. She suddenly want to also organize and filter them by location and origin of the foods.
- Precondition
- Foodie already posted some private food diary.
- She has a food picture in her device.
- Task
1. Food wants to add a food picture, so she enter food diary page.
2. She clicks a blank icon next to the last diary
3. She selects the food picture from her device.
4. She use location and origin filters.
- Relation to PoV
- Persona wants to have a place to save some food diaries private.
- Insight includes letting her to manage her food diary using filters.
2. Foodie takes a look at her feeds and is curious about her friends' feeds. She has a really good pictures and she decides share the feed to others.
- Precondition
- Foodie already posted a private feed.
- The feed already has hashtags, food origin, restaurant (location), and companions information.
- Task
1. Foodie enter social media page.
2. She sees feeds from her and others
3. She clicks orange "Public" button on the feed to share it public.
4. She sees added details such as likes and comments of the feed.
- Relation to PoV
- Persona wants to save some food diary is private, but wants to share some very good and beautiful of them and communicate with others.
3. She saw a really pictures of her friends foods and she decide to take a look at the at: she wants to know where is the restaurant so that she can go and try, she wants to know how people are taking about it, whether it is a hot place or "hot food" in social media through hashtag.
- Precondition
- Foodie has feeds with hashtag #Italy
- Other people also posted feeds with hashtag #Italy
- Task
1. Foodie clicks the hashtag #Italy.
2. She sees others's feeds with the hashtag.
3. She pick one of the feeds, and read the feed.
4. She gives feedback via like or comment.
- Relation to PoV
- Persona wants to communicate with others, and interacting with who also tagged the same hashtag or visited where she visited will make commons between them. Finally, it will encourge consistent communications.

Implementation Notes
---
<!--
Prototype URL is accessible and works properly?
Repository URL is accessible and contains README?
Libraries and frameworks used are listed?
Screenshots are added?
Screenshots capture representative moments of the prototype?
The prototype captures the three tasks?
The prototype is complete in that it supports an end-to-end scenario?
The prototype follows good practices in visual design, layout, color, etc.?
-->
### URLs of our prototype
Because there are some problems in hosted page, we recommend to test it locally.
- High-fidelity prototype: https://foodstory-c6226.firebaseapp.com/
- Git repository: https://github.com/thixd/Food-story.git

### Libraries and Frameworks
To implement high-fidelity prototype, our team used some dependencies such as...
- react
- a javascript library
- used to implement UI in more convenient way
- react-router-dom
- used to implement router system in our website
- react-select
- used to implement asyncronized filtering in diary page
- firebase/firebase-tools
- we used firebase storage as cloud storage that stores images
- we used firebase realtime database to store information of users, diaries, restaurants, and locations
- we used firebase hosting to deploy our service
- Mapbox
- To display location of each restauraunt in diary page.
- material-ui
- used to use icons such as addPhoto icon, share icon, and arrow icons
- used to implement Grid component
- Also used to decorate the elements.
- mui-rte
- The Material-UI Rich Text Editor and Viewer
- used to input text for the food diary

You can check all package dependencies at `package.json` in our repository.

### Screenshots
#### Main Page
The main page of our website is shown below. The main page consists of menu bar, friend's stories, and the user's food diaries. The menu bar includes foodstory logo, home button, food diary button, social media button, and profile image. Friend's stories list public feeds by the user's friends. The user's food diaries list private and public diaries of the user.

#### Task 1
<!-- Task 1 -->
<!--
My food diaries for specific month
can add new diary (image, text, hashtags, location, origin)
filter by location and origin
-->
If the user clicks Food diary button in the menu bar, the user can enter food diary page as shown below. There are food diaries of the user within a month.


To filter the diaries according to location and origin of the food, the user can use the filters at the right top of the screen.

<!---->

If the user clicks a camera button with plus icon, The user can upload image and upload new diary.

<!-- To Be Uploaded -->

#### Task 2
<!-- Task 2 -->
<!--
see others's feeds and own feeds
click "private" button to change the range
click like button and check the icon changes
click comments and move to the singlefeed page
-->
If the user clicks Social Media button in the menu bar, the user can enter social media page, which contains feeds by the user and others. There is a dummy feed that the user can upload new feed, which works equally with uploading new diary as in Task 1.


Let's assume that the user wants to make the first feed to be public and share to others. Then, she can click the orange button, and select the range. Then, the feed is set to public. Although our prototype can't show effect of private/public in the current version, we will update it to make users feel the effect.

<!---->

If the user clicks like button, then the heart icon gets pink so that the user can realize she already clicked the button. If she clicks it again, the like reaction is cancelled and the button gets gray again.

<!-- To Be Uploaded -->

If the user clicks the comments button, then she moves to the single feed page, and see comments for the feed.


#### Task 3
<!-- Task 3 -->
<!--
in task 2, click hashtag and move to the restaurant page
click one feed
click like button
leave comments
-->
When the user clicks hashtag, then the website will show the feeds with the hashtag. For example, image below shows feeds with hashtag #Italy.


The user would choose one feed, and she will enter the single feed page. The user can see detail info of the feed, and click like button to react to the feed.


At the bottom, there are other people's comments. The user can communicate with them via adding comments.

<!---->

Individual Reflections
---
<!--
Individual contribution clearly specified?
Difficulty discussion has enough depth and insight?
Non-trivial implementation skill added?
-->
<!--
Which part of the UI did you directly contribute to?
What were some of the difficulties you faced?
List one useful implementation skill you learned while working on this milestone.
-->
### Sanghyeok Nam
#### Contribution
I contributed to Task 2 (Social Media part).
- Get feeds list from firebase realtime database
- Publish feed component
- Implement functionalities such as react via like, private/public switching
- Apply changes in feed to firebase realtime database
- Link new feed button, hashtag, and comment button to other screens

#### Difficulties
- Our team divided parts by tasks, so ensure consistency between the interfaces were quite hard. To solve the problem, we set core colors to be used, and common icons for same features such as like icon and message icon.
- Setting database structure were hard because each of the members need different informations, so each thinks various optimized database structure in their perspective. We will unify the structure and make it clear before the user testing.
- We used react, which has class type and hook type. Some including me used hook type, but another used class type. So there were some difficulties using `history` and other router functions.

#### Useful implementation skill
- I realized that firebase realtime database supports event lister for frontend. So, I didn't have to set custom event listener for the database. Instead, I can just type `firebase.database().ref().on("value", (snapshot) => {})` to update my react components. I had used MySQL as database in my previous projects, but I will use firebase realtime database or firestore to my further projects.

### Junu Kim
#### Contribution
I took Task 1: food diary part. I implemented and decorated most of this part. It includes
- Upload user's image to firebase
- Dynamically load user's image from firebase
- Provide filtering by reading metadata in firebase
- Display information of clicked image with overlay, including map(with Mapbox-gl)
- Automatically organize the filtering labels(ex. Seoul, Daejeon in Location) from user's feeds.

#### Difficulties
The hardest one in my part is dynamic filtering. Because all data in the page is loaded dynamically, take a long way around this problem was the hardest part. To filtering the images, it must know the metadata of images. Also, the filtering conditions should be dynamcally generated by finding reducing common elements from user's whole image metadata.

#### Useful implementation skill
In this project, I learned how to organize the DB structure to avoid doube reference. When the overlay in diary open, it originally find which feed the image included, and read metadata of the image from feed. It doubley reference the database so inefficient. To avoid it, I copied some required data from /Feeds to each user's data, so the web page effectively reference the database only once. It makes the page load speed faster.
<!-- Individual Reflections -->

### Thi Nguyen
#### Contribution
My contribution including:
- Homepage
- A grid design for homepage in both my friends stories and my private diary
- Upload images/ continuously listen to Firebase image to show new uploaded picture
- Diary:
- Fix the grid design diary to make diary and homepage looks consistant
- Make write new feed page
- Making a codebase, routing between pages, Navbar design
- Go through all the code and finallizing if the design looks consitance in Foodstory (with Hoang)
#### Difficulties
It is was not too challenging for me to develop the codebase, homepage, write new post but it is challenging to combine, fix bugs and modifies code so that our Foodstory could work well. Since even in the same ReactJS, our code style is different(using function, class, html, etc.) make it takes time to read, debug and modified.
#### Useful implementation skill
I have learn how to:
- Working with Firebase
- Once/ continously reading data from Firebase
- Organize data in Firebase so it is easy to save/query
- More confident in developing ReactJS applications overall
- Understand re-render: useState, useEffect, etc.
- using ReactJS Material UI framework
- Due with significant amount of code
<!-- Individual Reflections -->

### Dang Minh Hoang
#### Contribution
- A page shows all posts about a specific hashtag or restaurant
- A page shows a single post from the user
- A page for writing posts (with Thi)
- Merging code from members together so that the whole platform work smoothly (with team)
- Getting Hastags from the users' text and make it able to redirect to the page shows all posts contain that hashtags
- Implementing the adding comments to a single posts
#### Difficulties
- I had a little knowledge in react js and firebase when we started doing this project.
- Especially, the asynchronous function took me a lot of time to get accustomed to and debug
- The page re-render after changing the state
- The differences in the way of passing properties and storing properties of members took me a lot of time to modify, add features, fix bugs so that everything can work.
- At first, we planed to get to a single post page when clicking the share button in the diary page. However, I and Thi could not figure out the way to change the properties. In addition, we both realized that our platform didn't have the page for user to write a post. Therefore, I and Thi had work together to create the page for writing posts .
#### Useful implementation skill
- Update the state at the end of the async function (getting data from firebase) so that the state change only when all data is achieved
<!-- Individual Reflections -->

Studio Reflection
----
<!-- Studio Reflection -->
<!--
Is feedback well summarized?
Is feedback addressed, or is the plan for addressing feedback concrete?
-->
We would reflect the feedbacks before user test by below directions.
- About design choice
- Change the background of the food diary to note to look like diary
- Change the format of date to YYYY/MM/DD, which is more minimal
- Change the location of like/comment icon in hashtags page to right of the text
- Make wider the overlay in diary to able to see without scroll
- Add 'Go to top' button in feeds page
- About Functionalities
- Link main page's elements(ex. "Diary" text, friend's icon) to others
- Make possible to choose the location and origin of each image when upload it.

Our classmate recommend that we also need to have options to let users choose where to put the picture of food so it is more flexible for users. We think that is a creative idea that we will consider to do in the future version.
Even we try to make the data looks realistic, The TA and some students mentioned that we should use real-like data in user test step. We would reflect this feedback at next design project.