# Web App UI
[Link to the project on codepen](https://codepen.io/AmanFatima/full/oNzdyOE)
[Link to research design document](https://1drv.ms/w/s!AvlQ7b-0PKdEkASjMWR7_kcw_gEJ?e=gvMFh3)
### Background
The inspiration for this web app came from a [research project](https://1drv.ms/w/s!AvlQ7b-0PKdEkASjMWR7_kcw_gEJ?e=gvMFh3) idea I explored in my Research Methodologies Course. The proposal was to explore the idea of home and identity in refugee adolescents in Pakistan through a participatory reseach design.

One of the suggestions I got to this proposal was how, by allowing the participants to share their projects in more cohesive and public form, might allow richer engagement in the workshops and sharing sessions. Also facilitate in fulfillment of participant ownership ideas that are at core of any participatory research.

The web app UI I have created, is a mockup of a potential website which would provides the participants and facilitators of the program to make their profiles and share and edit the projects created during the study on a accessible public forum.
### Overview
The main purpose of the web app is to allow the participants and facilitators to share and if need be, edit the projects.

When I say project, I refer to a card with 4 images and some text (descriptive response to the prompts in the study) that the users can upload on the website.

An example has been included in the web app.

### Description of the possible functionalities
##### Navigation Bar
The navigation bar used right now, is not fixed as I could not figure out how to do that but ideally that is what I would want.

This navigation bar would appear on all pages allowing the users to access different fuctionalities on it.

The navigation bar has the following parts:
1. Projects
This button will have an 'a' tag with the href to the page with all the projects on it.
2. Log In
This will open a modal for returning users to log in their credentials in text fields given on it.
3. Sign Up
This funtionality is not available right now but will allow the users to create new profile for themselves by entering their emails and passwords in the modal. The string enteries will be used to create new grandchildren in the profiles class under its children classes of pariticipants or facilitators.
The facilitators will have the ability to edit all existing projects while the pariticipants will only be allowed to edit their own project.
4. Search
All projects will have keywords tagged by hash sign in them. The string entered in this field will be matched (using a java script function) against the keywords-project id pairs. If the string input matches keyword for a project, the id of the project will be used to display (by creating the container and divs/the page projects page being scrolled down to where that project is) that particular project.

#### Banner
The only button in this section is the 'Join Now' button. This button has an 'a' tag that will open the login/signup functionalities that the navigation bar leads to.

#### 'Overview' Section
This section contains a brief description of the initiative and a carousel of images from the program. The funntionalities in this section are limited to the navigations on the carousel.

#### Project
This part of the web app will dispaly the projects but not all. The idea is that as the participants populate the app with their work, the latest 3 projects will be displayed here.

I initially planned on using a large image with collage of pictures and text in this area. But when I thought more about how I could make this section dynamically updateable in future, the idea of snipping a picture of the projects on the projects page to display here seemed unachievable using a java script fuction.

My solution to this was to make a group card with the id of the participant's name. This will allow us to access the source property in the cards by their ids to update them with user inputs. Similarly the description and name of the user can also be populated using the user imputs. This also is a allow the content to be responsive whcih would not have been possible with a single image with collage and the text.

#### Create Project Section
I added this section after the projects section to allow the participants to see what a sample project may look like. The text has been kept brief as the workshops part of the study, will also cover the use of this webapp in them. But to allow easier transition, in future a more broken down, step by step section may be added that guides them through the process.

By pressing the create button right now, a modal pops up that includes a form. The idea is that when the save changes button is pressed a new div col element will be created in our projects container. The first two and the last field will store the input string in variables and use them to populate the heading in the card, assign an id to the card and add the text description in the card. The other field in this form will have file inputs. The file input will allow the user to browse their devices and upload the images on a free file hosting service like imgur maybe? The links of these images will be then used as the sources for the images our card. All of this will happen in the background using java script fuctions I believe.

### Going Forward
* I would like to add viewer comments sections with the projects to allow more community interactions.
* I would also like to add edit button below the projects on the projects page. The button will be disabled and abled on the basis of whether the user has logged in or not and if they have then if they are a participitant or the facilator. The edit button will pull up a new page or modal with a form for the user to input new string/href values for the text fields and image sources respectively.
* Another possibility could be that the image pop up in higher resolution when the user hovers the mouse over the image in the cards to view each image . This could be done using the transform property to scale up but I do not think if that would be a higher resolution display. Maybe javascript can help here.
* I would like to use Masonry in the future to allow creation of more complex project displays like a lot of websites these days.

### Challenges and limitations
* I found it hard to make the banner so that it had text displayed over it. I was initially trying to vuild it using bootstrap regular grid system with my image element in the parent row and box of row and columns on top of it to add the text. Unfortunately I had trouble making the background image responsive. I ended up using a card to create the banner but could not get rid of the round edges. ANother possible way to do this was possibly wit hthe use of z-index I think but I didnt understand it properly to employ it here.
* To allow a more streamlined view in the projects section, I had to use square dimensioned images only which I know poses a limitation to what the users can upload. I think the masonry option or a more dynamic group-card system might help in this regard.

### Reflection
Just by learning basic functionalities of bootstap I can see how much easier the process was this time around when designing the content. The documentation was easy to understand and apply. This makes me hopeful of the future in terms of future self-learning opportunites to expand the skillset.

### Resources
I heavily relied on the [bootstap](https://getbootstrap.com/docs/4.0/getting-started/introduction/) website to create the different elements on this webpage. I also took help from stack exchange posts to clear my confusions at some points.