/the-fridge-frontend

WDI Project 3 - The Fridge File Storage Front End - http://macaroni-squad.github.io/the-fridge-frontend/

Primary LanguageHTMLOtherNOASSERTION

General Assembly WDI Project 3: -The Fridge- File Bucket

For this project, we were assigned to randomized teams and given a task, which we were to have fully implemented and ready for presentation one week later. We named our team Macaroni Squad, and we were assigned with creating a file bucket.

Back End Github Repo with API Documentation

The Fridge - What It Is, What It Does

The goal of this project was to create a file storage system, which would allow user to upload file to a remote server and access them from any computer from which they might log in. In addition to creating a front end interface to allow users to upload files, the app also stores metadata about the files in a database which is accessed by the app.

User Stories

![User Stories] (https://github.com/macaroni-squad/the-fridge-frontend/blob/development/user-stories.jpg "User Stories")

We wanted users to be able to do everything you would expect to be able to do on a file bucket: upload files from their computer; edit and delete remotely stored files, and download files onto their computer.

Entity Relationship Diagram

ERD

Our ERD was necessarily simple: each user will have many files. We could potentially have had files belong to more than one user, but given the limited time available, we decided that files being shared among multiple users was beyond the scope of what we wanted to do.

Wireframe

Wireframe

The major problem in terms of our front-end presentation was figuring out a clear and presentable way to present information about the files stored in the server. We had many options, but decided upon a list format, organized by directory.

Technologies Used - Front End

In order to implement our front end goals, we knew we would be starting with the basics: HTML, CSS, Javascript, and jQuery. Additionally, we used Bootstrap for front end styling, and Handlebars to handle the presentation of bulk data.

Team Approach

This is the first time any of us has had to program an app as a part of a team, so we took several steps to minimize the difficulty of coordinating with other programmers. We agreed to do as much of the work as possible together, meaning in the same room. We split up responsibilities on a task-by-task basis, stopping often to check in on what each team member was working on, and reassigning to other tasks as necessary. Several times, we decided to drop everything else and all tackle the same problem, leveraging our different skills and approaches to ensure that a "bottleneck" problem did not derail us from our work flow.

Without ever explicitly agreeing on it, our team seemed to emphasize putting our egos aside and sublimating any personal wants or needs for the benefit of the group. Tasks were accomplished without resentment, and problems were confronted without blame.

We never assigned specific roles, but Jen naturally took the lead in terms of organization and keeping us on a schedule. This dynamic proved very fruitful, because each of the four team members had flexible roles with respect to the code, and could be reassigned anywhere extra help was needed.

Major Challenges

Working with a remote server presented some major challenges. For example, trying to upload a file from a user's form input proved frustrating. When we finally got code which seemed to work correctly, it was only able to upload a file which was stored in our back end directory. Eventually we were able to figure out how to pull the file information out of the formdata request and send that to AWS, but it did not happen before some serious disruption to our team work flow.

Another major challenge was styling the presentation of the file information, while retaining the presentation of the directory structure which was one of our team goals from the very beginning. This involved a lot of frustrating trial-and-error work with CSS, HTML, and Handlebars, but eventually we were able to get a file presentation which all of us were happy with.

Teamwork Takeaways

All four of us agreed that we anticipated working on a team to be more difficult than it actually was. Perhaps we were lucky to only run into problems which could be solved before they became divisive, or perhaps we're all just such wonderful people that working on a team together happened seamlessly. In any case, the personal dynamics of teamwork were not a problem.

We all certainly became much more familiar with git and Github over the course of this project. We probably resolved at least ten times as many merge conflicts in the past five days than all of us combined have in our lives before then. It was a great learning point for all of us!

Why You Should Hire Us

In addition to us all being very likeable and good-looking people, we are excellent programmers and excellent team members, capable of working from brief project specs and delivering a viable and functional product.