# NOT DECIDED YET
### Team members:
Qilman Beytullazada
Farid Talibli
Sanjarbek Rakhmonov
Baigutanova Aitolkyn

## Project Summary

1. The problem we are tackling is the lack of sense of competitiveness and motivation to exercies to the COVID-19 lockdown.
2. The solution we provide is to implement a platform which **requires only little** effort from the users to get involved into the competitions and provides ability to **check the ranking** among other users via leaderboard which play role in maintaining competitive feeling.
3. The uniqueness of our approach is firstly manifested as the duration as any excercise has to be done for only **1 minute** thus requiring less time from users and encouraging to see others' exercising, and secondly, to evoke people's interest, they can **create the challenges** by themselves.

## Instructions:
* Main page: when a user logs in he can right away see the list of active challenges with remaining timer for each. If a user didn't join the challenge already, he can click "Join" button to participate

* Joining a challenge: when "Join" button is clicked, a form to be filled pops up. The form's both fields are required to submit and it will accept only video files.


* Also when uploading a video you can directly record one using your device's camera

<!--  -->

* When "Create Challenge" button is clicked, then another form to add title and description appears (both required).

* Profile page: from where you can see all challenges you participated in and navigate the leaderboard. Also, you can see the videos you uploaded.

* When leaderboard is opened you can see your and others' results per each challenge you participated in. You can check the videos of others as well.

* You can filter which challenge you want to check from the dropdown on top.

* Navigation between the tabs is always available on the bottom

## URL of your prototype:

[Prototype](https://focused-goodall-2eebeb.netlify.app/)

The prototype is optimized for mobile web browser use, though can be used from desktop browser as well. Sign in with your google account is required. Important note is that the link should be opened directly from the browser rather than inside any other application (such as Messenger, etc.)
The prototype also does not keep track of the history and previously visited pages by the user. Once the user reloads the page, if the user is signed in the default page with challenges is loaded. If the user is not signed in however, the sign in page loads up until the user signs in.

## URL of your Git repository:

[Git repo](https://github.com/faridt4242/SocialComputing)

## Libraries and frameworks:

* MDBootstrap: Design UI for styling
* jQuery: JavaScript library
* Redom: JavaScript library to create and manage DOM elements

## Individual Reflections:

**Qilman:**
1. I created the profile page for the users, where the user can see all the challenges he participated in, what score he obtained there, to compare progress overtime and see the video he uploaded, along with basic user information and an option to sign out. I also worked on the router for the application, where I switched the active tab of the application in the navigation menu, depending on the one that the user presses. Finally I added the sign in part for the application, and linked it with router to check whether the user is signed in or not.
2. The main difficulties I had during the involved some of the basic ones like difficulties in choosing the proper class names, so that it is also understandable for the teammates. Also, the figma prototype with non-symmetric styling was a bit confusing to refer when I wanted to set the appropriate paddings and margins for keeping it consistent.
3. During working on this project I familiarized myself with the js redom library and implemented the feature by using it.

**Farid:**
1. When it comes to the challenge screen, I implemented the overall logic of the application, where the user can see all the challenges on the screen as well as build new challenges or enter the current ones. I sorted them and tested if they have over 10 participants or they are expired on the client side on every load because we have no backend server to do this. I also worked with the initial entries on the setup of the database and linked the OAUTH to the web app. In addition, I added the functions for my teammates to collect data from the database along with handling and submitting the forms.
2. One of the major difficulties was of course holding the meetings with teammates to catch up due to time and schedule differences. Another difficulty was figuring out how to optimize the database entries to have less sorting and easier access to the required entries. Finally, a somewhat funny difficulty was revisiting my own code and figuring out what I wrote and why I wrote that.
3. I understood more about the importance of modularity and reusability of the code and why we need to organize it. Also, I learned to make single page web applications with vanilla setup using minimum amount of external libraries.

**Sanjarbek:**
1. I worked on the html file and linking all the interactions together with the javascript files. I worked on choosing the appropriate libraries, designig the overall application and the layout along with which screens should be added and what should be present on them. I also provided my teammates with some of the final html code for individual elements and pages, that was a prototype for them to work on and add on the DOM. I created a modal for the page and provided my teammates with appropriate IDs and bootstrap/custom designed classes. I also contributed to the CSS.
2. I had difficulties finfing the appropriate props for the html tags in the video upload modal, as the props work differently on different browsers. Also, finding the appropriate icons for navigation was tideous and time consuming. Finally, although we had good communiciation in the team, it was difficult to collaborate through zoom because explaining the ideas/ implementation plans live is easier.
3. I learned how to manage the html to be suitable for being a single page web application, where the body is re-rendered on navigation, i.e. which elements should be fixed, which not and where to put them.

**Aitolkyn:**
1. I worked on the storage setup to save uploaded videos separately for each user. Also, I contributed to the leaderboard page to filter it according to challenge selected and display ranking. For the challenges tab, I added some stylings to improve the aestetics (such as setup color pallete for the website and setup timer for challenges) and added form for joinig a challenge. Also, recorded the input from this form to the database.
2. Some of the difficulties were to collaborate remotely, because it was hard to fit everyone's schedule. However, I think setting TODO items for each member and our own deadlines is really helpful. Another difficulty for me was understanding my teammate's codes and continue coding from their created parts, though I really enjoyed when with time we get familiar with each other's style and understand code easily.
3. I practiced my skills with using git, especially in creating pull requests. The command combinations are easily forgotten if not used regularly, so I searched for those and memorized better. One more useful skill was to learn using modals in bootstrap, they are quite convenient and styled nicely. Especially for the short forms and popups they are much faster to implement then doing it from scratch. Finally, I encountered asynchronicity issues with JS, which are the most difficult part for me when working with this language. I learned to figure out and apply async/await functions appropriately.