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.
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.
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).
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.
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.
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.
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
Erick Thai
Steven Fisher
Anuj Saheba
EDAMAM - API used to retreive recipe information
OpenWeatherMap - API used to retreive weather information based on user's location