My project is leveraging free Json API from CocktailDB, Creating a front end interface that allow a the website visitor to do the following:
- Browse all the cocktails in the DB, paginated by letter.
- Get a random cocktail.
- Find out all the cocktails feasible with a specific ingredient.
- Suggest to the webmaster any cocktail in particular to include.
This is a website allowing different kind of selection operations over the Cocktail DB, the purpose of the project is to allow visitors to extract information quickly and in different way.
First and foremost, people who never prepared a cocktail and have a little or no experience. Then People curious of what can prepare with what they have handy at the moment. Site can be also useful to More Expert people, that can browse the selection and see what they never prepared.
- Cocktail recipe for a specific cocktail.
- Random Suggestion to prepare a cocktail.
- Contact the webmaster for suggestions.
- Pictures of the Cocktail.
- Browser all the cocktail.
Barman or Amateur looking for a cocktail need to make an informed decision and they want to explore all the potential opportunities, not only in visual terms, but also having an ordered list of the ingredients. The site is presenting them, in a concise and easy-to-use way, everything they need to know.
The goal was to make a strong first impact with the landing page, and therefore move the exploration and the research on other pages.
- Picture landing page, for a striking first impression and link to functionalities.
- Catalogue with alphabetic navigation, each letter invoking an API.
- A Search by ingredients, page each request calling an API.
- A random functionality, calling an API and displaying a modal.
- A Modal invoking an API callable clicking on a Cocktail card.
- A Contact modal, sending mail to the webmaster.
As a visitor of the Cocktail DB website I expect the following:
-
To find with ease what I am looking for, I want the layout of the site to make sense so I am not confused or frustrated using it.
-
The information I am presented with to be laid out in a way that is easy for me to digest, so that I find my way through in the quickest possible way.
-
The site to be easily navigable from any device, desktop, tablet or phone. For the content to look good and be usable on any of these devices.
-
To learn more about the cocktails I see and their recipe, so that I can prepare them when I want.
-
To find all the cocktails I can with ingredients available.
-
To know how to prepare a cocktail.
-
Plenty of high quality images of the Cocktails I can prepare.
-
To be able to get in contact with WebMaster in a quick and easy way.
-
To have random suggestions when undecided.
Wireframe mockups, created using Balsamiq, is available in diffent format:
All the different part of the project are detailed below.
A responsive navigation bar with link to the landing page on top left. For mobile-sized devices a hamburger button on the top-right expands a menu with links to the different section on the website. On larger devices the expanded menu is shown instead. Navigation bar will be static on the top of the page, and will have a peach gradient color.
Landing Page presents a picture of a cocktail, along with a presentation heading, that introduces a visitor to the main features of the site: the search and the explore
A dedicated page for search has been designed, mimic google functionality, with a single search box, that gets moved when the search by ingredients is executed. A series of Card appears as a results. Each of them is clickable and call an API which populates a modal with cocktails instruction and ingredients.
A dedicated section to Browse Catalogue has been designed, with a toolbar for each alphabet letter. Clicking on each alphabet letter, the section below gets populated with a series of Card. Each of them is clickable and call an API which populates
This functionality is available only by the menu, and a Random cocktail is displayed by a modal, after an API call.
This page includes a form with 4 required fields:
- Name
- Title
- Email Address
- Message
JS controls have been implemented to avoid leaving the fields empty or to submit invalid mail addresses. Once the form has been validated, a mail will be sent to my personal mail address and the modal will be closed. In case of not validated fields, the user will see them with a wrong label displayed.
On the very bottom of the page a footer has placed, with a really simple design and warning about the creater. The footer is moving according to the number of cocktail displayed.
Peach has been used in Landing Page, along a combination of dark colour, while in features page, gradient of peaches and white, along with a simple design has been used.
From Google Fonts has been used Abril and Fatface font; for the rest of the Headings Roboto standard font has been used.
- allowing visitors to search directly from landing pages, but for this some back end technologies would be needed.
Beside the holy trinity of Web Development, HTML, CSS and JavaScript, I took advantage of the following technologies:
- JQuery
- The project uses JQuery to improve Scroll Up between Section and to show a Modal after submitting Contact Form.
- Bootstrap
- The project relies heavily on Bootstrap component and predefined styles.
- FontAwesome
- FontAwesome is the source of the icons.
- Material Design for Bootstrap
- has been used for some component, such as the contact modal and the button group.
- Google Fonts
- to style the website fonts
- Email.js
- to allow the contact form to send mail
In terms of Tools I used the following tools, to develop and design:
- PyCharm
- My favourite IDE, used to generate a local website and edit each file.
- Balsamiq
- WireFrame Designer, used with CodeInstitute license, definitively to best resource to wireframe.
- Google Chrome, Firefox,
Safari and Internet Explorer
- Site has been tested on all popular Browser for several distinct dimensions.
I used following validator to check the validity of the website code:
- css: W3C CSS Validation Service
- HTML: W3C Markup Validation Service
- JavaScript: JavaScript Beautify Tools
The work has been reviewed by a number of relatives and friend, mostly on the mobile, each of them giving suggestions.
The website has been test with multiple resizing to test the its responsiveness. via the inspect chrome functionality it has been examined for the most popular mobile devices such as
- Samsung 9+
- iPhone 6/7/8
- iPhone X
- iPad
- iPad Pro
- Galaxy S5
also following section has been tested:
-
Navbar: navigating through different pages and calling random feature.
-
Search: calling different ingredients, and testing different results.
-
Contact form via the following routine:
- Going to the "Contact" Section
- Trying to submit the empty form and verify that an error message about the required fields appears
- Trying to submit the form with an invalid email address and verify that a relevant error message appears
- Trying to submit the form with all inputs valid and verify that the mail is sent correctly.
-
Catalogue, browsing all the alphabet letters.
-
Random Features, calling each time a different cocktail.
-
Landing Page, accessing all the page of the site.
I kept track of all the test on this matrix
All 15 functionalities implemented by JavaScript functions have been tested by Jasmine. It took me some time to figure out how to process Fetch call, and I implemented it with promises. The automated testing functionalities was really helpful to prevent any code regression, and test can be executed at this link.
Bugs: most relevant bugs to tackle involved bootstrap4 card and they were shown after being returned by API query; in the first stage of the development they were managed by long JavaScript code, in the latest stage card-deck class by bootstrap was solving most of the issue.
Other problems were given by how to access all the informations provided by the JSON APIs, but this required more patience than anything less.
In the latest stage of development who reviewed my code found lack of responsiveness on small device, this was due to the usage of outdated bootstrap classes, and to the absence
Site has been developed on PyCharm and pushed to GitHub via terminal commands. Deployment and source control was entirely done via GitHub, using the following steps.
-
command git add 'filename' - to update what will be committed.
-
command git commit - to commit the changes.
Using git push command all changes from the local repository were pushed to the remote one on GitHub.
My repository can be found here:
I've published the source code built from the master branch using GitHub Pages
To deploy the project from GitHub follow these steps.
-
On GitHub website log onto account and navigated to the repository.
-
Under repository name, click on Settings tab.
-
Scroll down to the GitHub Pages section.
-
On the Select source drop-down menu I selected master as my GitHub Pages publishing source.
-
I clicked Save.
The live site can be found here:
There are no difference between the deployed version and the development version; GitHub Page has been chose for simplicity of deployment.
code can be fetched locally with following steps:
-
On GitHub navigate to the repository.
-
Under the repository name, click Clone or download.
-
In the Clone with HTTPs section, copy the clone URL for the repository.
-
Open terminal.
-
Change the current working directory to the location where to clone it.
-
Type git clone and paste the URL copied above.
git clone https://github.com/severian5it/CocktailWebApp.git- The structure of the project was modeled on the examples provided by the Code Institute, in particular on Haley Schafer Portfolio
Really useful resources during development were:
The last provided a lot of example to base my work on.
- The photo used in the Landing section was downloaded from Unsplash, and credit goes to to Ash Edmonds.
- While the structure of the Site is mine, all the back end api are provided by CocktailDB
- I received inspiration and guidance for this project from my mentor, Aaron Sinnot, and from Simen Daehlin, who reviewed my code and spotted defect on responsiveness.
To contact me feel free to email
pdelbuono@gmail.com