# Team Plan H : High-Fi Prototype
## Project Summary

Most of the options regarding exercise became unavailable due to COVID-19. In order to provide various and engaging options, our team designed online routine sharing platform utilizing crowdsourcing and peer evaluation. We've simplified the process of writing a routine and enforced various feedback system to ensure the quality and variety of the routines.

## Instruction:

1. Create Account or login in (email : [e-mail] / password : planh2020)

2. Go to home page and see several routines

#### Write
1. Click on the Write button from the menu bar.


2. Type in the title of your routine, set the level of hardness.
3. Type in the tags as you wish. You could add more tags by clicking on "Add a New Tag" button.


4. Type in the name of the action, steps and guidelines regarding the action, and time required for the action. You could add more actions to your routine.
5. Hit submit and you'll be able to see your routine on the main screen.

* Be sure to be logged in when you're writing your routine.

#### Search
1. Click the icon on the header bar and open the search box
2. You can choose your query among time duration, level, and tags


3. After input form filled, click the purple magnifier icon at bottom of the box and start searching
4. Check only routines you wanted


#### Review
1. See More Detail of the routine.


2. Try to read more reviews of the routine.
3. Upvote or downvote any comments or suggestions.
4. Try sorting reviews in various options.


5. Now write your own review!
6. Check the review you wrote right before.
#### Update
1. Now go back to routine that you wrote before.
2. Try to update your routine based on reviews (if review exists)
3. Finally, check your routine updated

## URL of your prototype:
https://planh-67172.web.app

## URL of your Git repository:
https://github.com/yimjisu/planh2020
## Libraries and frameworks:
ReactJS + Firebase (Realtime Database, Authentication)

Downloaded react template : https://www.wrappixel.com/templates/materialpro-react-admin-lite/

Several ReactJS libraries were used.

You could check them inside package.json file in our repository.

## Individual Reflections:
Each member should write this part on their own, reflecting on their own experience. Merge all members' mini-reports in the final report. Answer the following questions:
Which part of the system did you directly contribute to?
What were some of the difficulties you faced?
List one useful skill you learned while working on the high-fi prototype.

#### Jisu Yim
* Which part of the system did you directly contribute to?
I searched for react template that suits with our low-fi prototype. Then I made the big frame (e.g. add logo & title, change sidebar and make files according to each sidemenus) and organized files so that other teammates can work on easily. I mainly worked on 'home' page, where each routine is shown in same format. Also, I worked on authentication so that user can actually sign up and sign in. User can write their own routine, and add review on other one's routine and this is shown differently from each users. I worked some on review page : changing the design of review page and several linkings so that review according to each routine can be shown.

* What were some of the difficulties you faced?
I first tried using react 'free template'. It is very heavy and complicated, so first I was hard to understand what components I need to fix. I had to organize well so that other teammates will be better to work, I worked hard to organize structure well. I had to spend lots of time until I was used to this template. Also, hosting the website did not work well because default package.json file created by the template had an issue. Like this, the fixed template gave some errors that would not happen if I had just created newly react app.

* One useful skill I learned
However, using react template is very comfortable to use (when I am used to)since I can just copy some components and change the contenst. It is very helpful to reduce spending on designing the components. I would now try to utilize lots of react templates.

#### Taehyung Kim
* Which part of the system did you directly contribute to?
I've made writing the routine part.

* What were some of the difficulties you faced?
Adding tags and actions dynamically was a bit of a challenge. I've used hook to address this issue, which was not friendly with the Firebase when no libraries were used. Since I was not friendly with React, it was hard to organize and parse data into format I wanted.

* One useful skill I learned
Using state in React was unlike that of an array and confusing, but it became useful when I've got used to it.

#### Myeongyu Park
* Which part of the system did you directly contribute to?
I have worked with three parts: (1) search box layout on the header bar, (2) check your level page, and (3) querying databases. Search box takes input queries of time duration, level, and tags, and sends them to another page so that it can query the database using those inputs. Among them, tag input form supports auto-completion for better usability. By these, a user can easily discover only routines which he/she wants to see.

* What were some of the difficulties you faced?
This was my first time on React and even web programming, so I had to learn from the bottom of the world. What is difference between 'const' and 'class'? How do I render a page and interfaces? How do parent components send aparameters to child components, and how about in the reversed direction? It costed a lot to read documentation for React and Google Firebase and colleagues' code for references.
After I got fairly used to React, I spent a lot of time to implement the real searching function and troubleshoot. I had considered how a user would play with the search box and decided to implement restrictions and several usability improvement, such as clearing the input form and auto-completion of user keyboard input. Also, I allowed searching with incomplete input form, because it sounded unreasonable to require a user to fill all the form every time.

* One useful skill I learned
Because I was a completely freshman to web programming, it is hard to choose the only one skill I learned. However, the function which was the most interesting to implement was 'Auto-completion' for tags in the search box. This was involved with reading realtime database, displaying a list of possible inputs, and .

#### Jeongwoo Park
* Which part of the system did you directly contribute to?
I contributed the review system. Review system consists of two parts, "review writing" and "review list". Following are parts that I implemented.
For "review writing", I had to add radar graph that visually shows the user's rating of the routine in detail. Users can use sliders to adjust the rating and changes are directly applied to the displayed graphs. There are review writing areas that can change between comment and suggestion tab. When they wrote all they can press submit button to upload the review.
For "review list", accumulated datas in backend are displayed in list of general format. It contains radar graph, comment and suggestion areas. Comment and suggestion area have upvote, downvote, report buttons. Those are all connected with the backend so changes are applied to database in real time. Users can edit or delete reviews they wrote. User authentication are used to prevent users to write reviews, upvote, downvote or report when they are not logged in. "review list" also provides sorting functionalities. There is a dropdown menu that users can choose to see only comment, only suggestion or to see review sorted by recent or most upvotes.

* What were some of the difficulties you faced?
It was my first time to use react and make a web application. It took some time for me to adapt to the platform. I was not used to the css styling and html formatting. I got advices from the other members for organizing review part more appealing.
Other technical difficulties also existed. It would be necessary to make users to only vote once for each review. I somehow mananged to make them only vote once by making toggle buttons, but they can upvote,downvote again after refreshing the page. To implement correct functionality, it needs to keep additional user informations. It was the most difficult part.

* One useful skill I learned
I learned many things but the most valuable one was to "make things expandable". When I implemented, there were always additional functionality that should be added. I started with plans but these were usually not followed. To cope with it, I considered what will be needed next and left space that could be used for further functionalities. It was really helpful for me to write codes efficiently.