Front-End-Project

The Captain

Similar to Siri, Alexa, and Cortana, meet your decision-making assistant: The Captain. He will be the user's assistant in making a decision for a topic that the user inputs. The output can be refined based on certain criteria such as location, preferences, and timing, which will be included in future releases.

This front-end project was based on developing a minimum-viable-product (MVP) that included key functionality, without having to sacrifice the user experience. The team's goal was to have a contemporary design that enages and targets the current market, as other decision-making games on the web have a rustic or antiquated design. This front-end project was based on developing an minimum-viable-product (MVP) to assist the user to make a decision.

Initial Whiteboard Plan

whiteboard_plan

When we began developing our project, we listed out the requirements of the project and started to develop our initial layout of how we would design our page. We initally thought of how there are many rustic spinwheels that exist on the internet that act as a decision-maker for people depending on the category. Majority of the time, if a spinwheel of that kind of searched for on the internet, it is a designed in an 90's style manner with old graphics. This diminishes the experience for the user.
We set out to create a modern design that takes into account the user experience.


Responsive Design Plan for Desktop & Mobile

responsive_design

Once we understood the scope and our initial plan for our project, we took into account a responsive design for both desktop computers and mobile design. Many individuals are using a computer or their mobile phone when using an application like this, so we wanted to make sure the user experience is targeted and optimized for both. With the desktop version, we had plenty of real estate to work with; however, when utilizing a mobile device, we had to take into account of how we would layout our cards (which you will see further down within the README).


Mobile Layout

mobile_layout

This is the initial example of our layout for the mobile device, and how we planned to have the cards collapse and reveal their respective content. Compared to the desktop version, we have vertically layed out the cards due to the smaller screen size of mobile devices.


Desktop Layout

desktop_layout

This is the initial example of our layout for the desktop, and how we planned to have the cards collapse and reveal their respective content. Since a desktop or a laptop has a larger screen, we were able spread out the cards.


Mobile Layout developed via Sketch

sketch_wireframe

Desktop Layout developed via Sketch

desktop_wireframe

Cards Layout developed via Sketch

cards_wireframe

Lessons Learned

After working on our first major front-end project and having a chance to reflect over our initial goals, the key lesson we learned was that:

  • Being in an immersive bootcamp and having a short-time span to develop a project, we had many goals and features that we wanted to implement. However, going through the process and as we approached the deadline, we understood that all of the initial goals that we had set would not be accomplished. With that said, we were able to setup our MVP to address the requirements of the project without comprising our initial and core goal to provide a great user experience.


Built With:

HTML5 - setup the structure of the website
CSS3 / Bootstrap4 - used to design and style
JavaScript / jQuery - developed front-end functionality to retreive user input search and prompted an API call
Application Programming Interface (API) - used jQuery to call APIs and pull information that we determined was needed for our site
Amazon Web Services (AWS) - hosted the website
Git / Github - version control to manage workload between three developers

Authors

Erick Thai
Steven Fisher
Anuj Saheba

Acknowledgments / References

EDAMAM - API used to retreive recipe information
OpenWeatherMap - API used to retreive weather information based on user's location