*Team Pongpong*

# DP4 Team Report

## POV, Target Users, & Tasks

### Point of View

**A enervated person who wants to start an active hobby but has not found a suitable activity in their surrounding.**

needs to

**be provided highly organized information such as influencer's experience and people's opinions about various activities, and moreover be motivated to continue the selected activity**

because

**the related information is scattered messily in Internet and doing an activity without a goal makes people lazy.**

### Target Users

A person who wants to start an active hobby but has not found a suitable activity in their surrounding and lack of information about what activities are affordable for them.

### Tasks

**1. Select an activity that fits your preferences and conditions.**

**2. After selecting an activity, choose some achievements you want to challenge and accomplish them.**

**3. Share your opinions about the activity you have done.**

---

## Implementation Notes

### URL

* Prototype: <https://pongpong-f1442.web.app>
* Git repository: <https://github.com/Pghrb99/HCI-DP4>

### Libraries and frameworks

#### Main Libraries and frameworks
* react (ver 17.0.2)
* bootstrap (ver 4.5.3)
* react-bootstrap (ver 1.6.0)
* react-bootstrap-range-slider (ver 2.0.2)
* ant-design (ver 4.15.5)
* fortawesome (ver 1.2.35)
* node-scss (ver 6.0.0)
* firebase (ver 8.6.2)
* jquery (ver 3.6.0)
* react-chartjs-2 (ver 3.0.3)

#### All Libraries and frameworks in package.json
"@ant-design/icons": "^4.6.2",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3",
"antd": "^4.15.5",
"bootstrap": "^4.5.3",
"chart.js": "^3.2.1",
"firebase": "^8.6.2",
"jquery": "^3.6.0",
"node-sass": "^6.0.0",
"react": "^17.0.2",
"react-autocomplete": "^1.8.1",
"react-bootstrap": "^1.6.0",
"react-bootstrap-range-slider": "^2.0.2",
"react-chartjs-2": "^3.0.3",
"react-cookie": "^4.0.3",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-toggle": "^4.1.2",
"styled-components": "^5.3.0",
"web-vitals": "^1.1.2"

### Representative screenshots
* Tag Search Page (Home screen)
In this page, the user can find some acitivites by entering some tags(autocomplete possible). There are two kinds of tags: Include tag and Exclude tag.
The user can determine include or exclude option by clicking the toggle switch.

* Side menu
By clicking the hamburger menu icon, the user can open this side menu. There are 5 options.
* Name search page
In this page, the user can search activities by their name.(ordinary search, autocomplete possible)

* Sign In Page
(Remeber me is implemented with cookie)

* Sign Up Page

* Category Page
User can see several categories select one of them. User can see several categories and select one of them.

* After selecting a category

* Hot Activity Page
The activities with high ratings(by the 5 fixed criteria) and popular activities are shown here.

* Tag Search Result
There is a priority select menu on the right so the user can choose the order of the results.

* Name Search Result

* Activity Information Page
You can hide and show achievements to click the triangle button. The location of the go-top button is weird because I captured whole page.

* My Progress Page
The location of the go-top button is weird because I captured whole page.

* Modify Selected Achievements
By clicking labels, you can select.

* Accomplish Achievements
Uploaded photo can be seen in their review. At the uploading, '파일 선택' is Korean, because my computer is set by Korean. If your computer is set by English, that word will be appeared in English.

* Progress Percentage and Selected Achievements
The progress percentage bar is immediately updated.

* Writing a Review

* My Review
My review is located at the top of reviews. (fixed) Also, other reviews is ordered by the number of likes.

* Adding Tags
You can add recommended tags (already in our Firebase) or your custom tags.

* Added Tags
If you hover the mouse over each tags, you can see its makers.

* My Page

---

## Individual Reflections

### Minseok Kim
#### 1. Which part of the UI did you directly contribute to?

I mainly made Name search Mypage, Mypage, something that related with achievements and some details.

#### 2. What were some of the difficulties you faced?
First this is my first time I used JavaScript through this class, so I think it was the most difficult to deal with synchronous asynchronous. and I solved by updating the dom again through usestate and useEffect.
Second, as the code became more complex, it was hard to me that sometimes situations happened where the existing code had to be replaced.
lastly, It was a bit difficult to merge outputs with team member as it was the first time to do a team project through GitHub.

#### 3. List one useful implementation skill you learned while working on this milestone.
I learned a lot from using react for the first time, but it was most helpful to be able to perform synchronous asynchronous processing through the use of callback function and async, await, promise, and then.

### Myeonggyu Kim

#### 1. Which part of the UI did you directly contribute to?

I mainly made ActivityInfoPage and MyProgressPage. (topbar and docs)

#### 2. What were some of the difficulties you faced?

First, locating the horizontal bar to the top with sticky was difficult. Even though I had written 'position: sticky;', the bar did not sticked at the top. But Minseok told me that I must combine documents with 'div' tag. It solved this problem.
Second, syncronize informations between ActivityInfoPage and MyProgressPage was also hard. Before we used Firebase, I had found that I can deliver a variable (with useState) and its setting function. Then, I learned useHistory and useLocation by Changhae. For now, we used Firebase, so we read and write at Firebase with useEffect in each components.
Last, when I use onClick, it is tricky to give the order of elements. Therefore, I used a trick: adding index at className. It makes onClick function able to access index. For example, see clickModifyLabel function in MyProgressPage/Sections/ProgressDocument/ProgressDocument.js. (It is hard to explain with English. Sorry;;)

#### 3. List one useful implementation skill you learned while working on this milestone.

Most impressive thing which I learned is that using '&&' and '? :' in the html part. (which means inside the return function of each component) 'b && div' means div is created if and only if b is true. Furthermore, 'b ? div1 : div2' means div1 is created if and only if b is true, and div2 is created if and only if b is false.

### Sangmin Lee

#### 1. Which part of the UI did you directly contribute to?

I mainly made the login, register page and routing, authentication system. For some details, I worked on all components with authentication, routing, accessing to user information. Also, contributed in design details such as colours, button shape, css positioning etc. Suggested antd library for design too.

#### 2. What were some of the difficulties you faced?

We had lots of datas to transfer between components and state didn't support those functions. So we talked about using redux but we didn't use it. Instead we used context and props to do those things. Also bootstrap was hard to read because of complicated id usage and I suggested to use antd library instead, because antd was more concise and easy to implement. To make a working website online, we had to use database such as firebase and using database always created problems with sync and async. As I worked with authentication sync, async was very important issue to think so I used provided onAuthStateChanged() to catch the difference and used async function with await and then to work after getting user information.

#### 3. List one useful implementation skill you learned while working on this milestone.
I learned how to use react context to manage global data. I used to give props every steps without redux, but in this project we decided not to use redux for conciseness. So source code was too complicated and error-prone. Since we found react context, out source code got much simpler and concise. Moreover, I liked the map function working for components mde our work much more clean and fast.

### Changhae Lee
#### 1. Which part of the UI did you directly contribute to?
I mainly made tag search, name search, search result, category, and hot activity pages. I also gave additional help for selecting color scheme.(color of tags, horizontal bar etc.)

#### 2. What were some of the difficulties you faced?
Since this is the first time I used React and even javascript, I had to search everything I need whenever I tried to do something. It took many hours to watch tutorial videos on Youtube. Sharing git repository with other members was also not easy. At the beginning there were many merege conflicts. But soon, I came to know how to use git branch propely in collaborative work and believe the power of git.

The most diffuclt problem I had to solve was about searching. Since the intrsuctors recommend us not to have additional backend server, I had to make the most out of the apis in firebase firestore. Acutally there are many things not supported by it. For insance, we cannot query documents that has a field value containing the given string as a substring. Also, we cannot query documents by using the elements in array in firebase. So we had to construct a proper data structure for firebase. After this we could implement the tag search feature using collection groups. But still, name search was hard to solve and I had to query all acitivies and find some that has name containing the search keyword as a substring. I know this is very inefficient..

#### 3. List one useful implementation skill you learned while working on this milestone.

Since this is a team project, it was essential to write codes as clean as possible. So during the overall process I tried to find ways to write clean codes. The following are what I've learned by now.
1. Try not to use else statement.
2. Pick some exceptional cases and return early.
3. Exploit the functions filter, map, foreach
4. Make small functions so that is can be self-explanatory.

---

## Feedback

#### 1. I wish there is information about numerics.
\- Thanks to the feedback, we added information and examples of numerics in ActivityInfoPage.

#### 2. I think the achievemnts are too quantifiable and those may not be meaningful in the real case.

\- Agree. Hence, for each achievement, we will focus more on experience (whether do or do not) than the number of times.

#### 3. I wish the cards are equal in height.

\- The size of cover images are different from each other and we wanted to maintain the ratio of them. So we fixed the width of each cards by using grid and let the height of each cover image be free. In fact, we were highly impressed by the grid layout of Pinterest. In the prototype live demo, there were not many activity cards in the search result page. So we understand it might look a little ackward.

#### 4. I wish the radar chart is shown along with the card. (no click is needed)

\- We agree with you, but if the rader chart is shown straightly, a screen will give users too many information. Therefore, we provide the rader chart if a mouse hovers the card.

#### 5. I think showing email addresses right away is not a good idea, because people can do some bad stuff with it. Maybe just nicknames or some full names would be fine.

\- Very good feedback. We are going to change e-mails to nicknames. Thank you.

#### 6. It is hard to know what these numbers and scale in radar chart really means.
\- This was TA's feedback and we agree with this opinion, so we added some numerics information button to show the explanation of each numerics. If user clicks that button they can read the explanation. We think this could not be the effective solution so at DP5 we will test with real users and try to figure out better solution.