# Final Project
[Link to the project on codepen](https://codepen.io/AmanFatima/pen/ZEpVBzL)
[Link to research design document](https://1drv.ms/w/s!AvlQ7b-0PKdEkASjMWR7_kcw_gEJ?e=gvMFh3)
## Overview

For the final project I decided to use the same concept as the earlier project of Web App UI design. The app provides the user to post their projects, created during the study on a accessible public forum. In contrast to the web app UI assignment, this time however, I focused primarily on the projects display and creation parts of the app. These two were chosen specifically keeping in mind the potential user of this web app, young adolescents with limited exposure to technology.

I wanted to keep the design simple and straight forward which would allow the user to view the projects and upload their own work. The sample projects have been displayed first to allow the user to get familiar with the design and components of how they can present their work.

## Navigation

I have included a fixed navigation bar with buttons to go to different parts of the web app. Because the web app is in form of a single page, I wanted to provide the user with the flexibility to jump to the part that they want to go to, rather than having to scroll all the way down. This becomes especially important when the page gets populated with a large number of projects each with their own comment stream.

I would have liked to add a scrollspy feature and a search feature in the navigation bar to allow more ease in navigation around the content.

## Projects Section
This section houses the major chuck of data on this web app. With two example sections already published, the section will get updated with more porject as the user utilize the create project functionality. A particularly important feature here is the user interaction allowe din the form of comments.


I would have like to display comments in a more cohesive manner with the name of the commenter displayed at the top of each comment. But it would have made more sense to do this had the web app also allowed the sign in, log in feature to keep track of who is commenting and uploading when.

It was particualrly challenging making the comment section dynamic to allow users to add comment on every project. Initially I had decided to use the method discussed in class to populate the page, i.e. make an array of objects, update any changes made to data in the array and then use the array to print out the data.

The first two project displayed have been printed in this way using the printProject() function with a template inside it. However, things became more complicated when I wanted to access the id of the project when the comment button was clicked. Due to the layout of bootstap gridded content, I was unable to find an efficient way to manipulate data this way. I also knew that each time the user refreshed, any data in form of comments or new projects would get lost anyway. It did not make sense to print out the entire array of projects every time a comment was made. Hence I decided to manipulate the HTML directly using the same idea of template but this time to append html for one project at a time.


## Create Project Section
This section allows the user to create their own project by filling in text fields for their name, image urls and description of the project. I would want to be able to allow the users to upload the images directly from their devices but in order to do that I think an external data base needs to formed or files have to be hosted somewhere.

I added the if condition in the 'createProject' fuction to avoid blank cards to be created in the projects section. he users can still leave the description section empty but all other sections need to be filled for a new project object to be created.

Another thing I struggled with was to close the modal once the button 'save changes' is pressed. Right now the user has to press first 'save changes' button and the 'close' button to get rid if the modal from their view.


## Challenges
I encountered multiple challenges over the course of this project and course generally. What I've learnt is that the way to learn coding is to do coding and keep on doing it even when you can not do it. I also learnt that a lot of times it important to let go of idea you have initially and move forward with the rest of the project rather than getting stuck on one single component. For example, one of the tasks where most of my time was spent spent initially was in making multiple pages; landing page, projects page, projects creation page. I tried making this in multiple ways (z-index, play with visibility of components)but was not able to execute it. Instead of spending so much time on the outlook element of the design, I could have moved forward with adding more fuctionalities and interactions in the code.

## Resources

I made use of stack overflow, bootstap documentation, w3Schools and other free coding related resources available on the web. At all times, I tried to modify the code to my use instead of exactly copy pasting.