The BoringApp
Description
This project has for purpose to challenge our skills with the latest knowledge in Javascript, HTML and CSS using different server API's by creating a real-world front-end application with the idea to potentially showcase it to future employers.
Objectives
The main objective of this project is to create an application that could be related to our daily lifes. And since 2 years our daily lives have been more online then ever. Which is factor of daily boredom. Thus the idea to help those people who are in need of a boredom cure.
The BoringApp team made an easy to understand application that will permit the user to cure boredom by entertaining them.
With the hope to give a productivity boost at the end of the break. Functionality
In order to prevent and control boredom during working breaks, we - Niko de Silva, Zahra Mammadli, Nabil Nasser and Olivier R.Measson - have been working on developing an interactive front-end application that has for purpose to "cure" your boredom. The application permits for a user to "make a choice" between watching random videos using the youtube API or to learn something using the bored API.
This project permitted us to learn how to work as a team. Using Github, we've been able to succesfully separate equally the tasks and maintain a proper workflow to achieve our goals. We learned how to create different branches and how (and also when) to merge them. We also learned how to apply different server-side API's in our application.
Usage
WHEN the user opens the BoringApp
THEN he is presented with the main page (inspired by Alice in Wonderland) where there is one button that will grab the attention and where he can access information such as: About us - Stats & Contacts
WHEN the user clicks this button
THEN they will access to the next page where the user will face a choice between two pills: a blue pill and a red pill (inspired by the matrix)
WHEN the user hovers his mouse over one of the pills
THEN text appears to inform the user about his choice possibility
WHEN the user clicks on the BLUE pill
THEN the user will access a page where he will have the choice to make an activity (based on the Bored server API) or to watch someone do it online ( by pushing the bored activity into the youtube search query)
WHEN the user clicks on the RED pill
THEN he will stay in the matrix and be directed to a page where he can watch random videos (Youtube API)
WHEN the user wants to know who the creators are
THEN he will find a "About Us" button in the navbar
WHEN the user access this page
THEN he will be presented with the following information
WHEN the user wants to know what the global percentage of choice for the pills is
THEN he will find the "Statistics" button in the navbar
WHEN the user access this page
THEN he will find a graph with the necessary information (by retrieving stats from the local storage and building it with d3.js)
WHEN the user wants to contact the creators
THEN he will find the "Contact US" button in the navbar
WHEN the user access this page
THEN he will be presented with a Contact Form and the email address of the creators
Credits
This work has been a collaboration between Niko de Silva, Zahra Mammadli, Nabil Nassar & Olivier R.Measson.With the tremendous help and support from Swapnil GaikwadLinks
Github
PRESENTATION
Presentation of The Boring App