Code Institute - Milestone Project 2
Live GitHub Pages Link: https://mark-obeirne.github.io/delish-tv/
Delish TV is a Netflix companion site that enables users to find the various restaurants featured in their favourite Netflix Original culinary shows.
Food television is the fastest-growing niche in unscripted TV, according to a recent study by The Hollywood Reporter. After dipping its toe into the waters in 2015 with the release of Chef's Table, Netflix became one of the leaders in investing in original culinary programming. Today, Netflix's catalogue of culinary shows includes the humble street stands of Street Food Asia; Michelin star chefs in Chef's Table and Chef's Table France; and a smorgasbord of cuisines and settings in Ugly Delicious, starring celeb chef David Chang.
Brandon Riegg, Netflix VP of nonfiction series and comedy specials, said that food and cooking shows are the frontrunners when looking at categories of programming that people respond to globally. Lisa Nishimura, Netflix VP independent film and documentary features, said that people connect with these shows because "even though you can't smell or taste this food through the screen, you can absolutely feel it."
While these shows can give us a sense of what it is like to visit a particular business and allows viewers to witness hosts delighting at the food on offer, it can be challenging to find more information about the various settings that they explore. If a viewer wishes to find more information, they must become proficient with Google and be willing to peruse article after article that may provide them with some tidbits of information.
The purpose of this site is to connect users with the restaurants and businesses featured in Netflix Original culinary shows and provide them with relevant information should they wish to experience it for themselves rather than live through an on-screen host. This adds another dimension to the traditional methods of sourcing more information about a restaurant, as convenient episode links enable users to see a restaurant's menu or ambience brought to life rather than judging a location on still photos, menus, and user reviews of varying quality and trustworthiness.
The site's main target is fans of Netflix Original culinary shows. However, the crossover of food and bringing these food experiences to life also makes it useful for people travelling to or living in an area in which a local restaurant has been featured in an episode. As a business, we have our own distinct goals, as reflected by the following user stories.
"As a viewer of culinary shows, I am often automatically recommended other reality TV shows that have nothing to do with food. I would like to find similarly themed series that would be of interest to me."
"As a fan of Breakfast, Lunch & Dinner, I would like to find out more information about some of my favourite restaurants featured in the series."
"As someone travelling to Japan, I would like an easy way to find out more about Toyo's restaurant, as seen on Street Food Asia, so that I can experience the food and performance for myself."
"As a foodie, I would like to thoroughly research restaurants in my area to ensure that it appeals to me and that I will get value for money."
"As a business, we would like to showcase our range of culinary series, as we would like users to keep finding value for money in their subscription and attract new customers."
"As a business, we would like to highlight the restaurants involved in series, which rewards them for allowing a series to be filmed there."
"As a business, we wish to continue making original culinary series. We would like to provide this added value to participating restaurants to encourage others to get involved."
When a user visits the site, a Netflix Original series is chosen at random to be displayed as the Jumbotron. This provides the user with more details about the series, the opportunity to watch a trailer to see if it is to their liking, and the option to watch it on Netflix if it is. If a user chooses a different series from the dropdown menu, this jumbotron is updated to reflect this choice. The jumbotron also ties in with the Google Maps feature, as detailed below.
The Google Map is one of the focal points of this project. Upon an initial visit, the map is populated based on the restaurants featured in the randomly chosen spotlight series. When a user chooses a new series or location, the map updates to reflect the locations of restaurants that match the chosen filter. The user is also able to find out more information by clicking on a marker, which provides them with the address, series name, episode, and an episode link so that they can watch immediately. It is also possible to choose an individual restaurant card, which focuses the map on this location.
A number of individual restaurant cards are displayed to a user depending on the chosen filter. These cards present the user with information about the restaurant such as its general address and the series that it is featured in. When an individual card is selected by the user, the map zooms in on that location as previously mentioned and the card provides the user with a button to watch the episode that the restaurant is featured in. The user is then presented with a link to bring them back to the previous list of filtered restaurants.
We plan to add a feature which enables users to add individual restaurants to a wishlist of places that they would like to visit or save for looking up again later. This wishlist would include a link to the relevant Netflix episode, which could entice users to rewatch an episode or delve into one for the first time.
Currently, users are able to search by series or by country. We plan to offer users a more extensive search feature that would enable users to search by restaurant name, city, country, or by series. This search feature would then suggest searches based on the user's input or, if no matches are found, will offer suggestions that a user could search for.
While we tested embedding YouTube trailers in a hidden iframe that displayed when a user clicked on the More Info button in the spotlight panel, since replaced by the Trailer button, we found that it slowed down the performance of the site. For the next release, we would have the opportunity to implement the YouTube API in order to display trailers for the featured series in a more streamlined way.
Originally, the tablet and desktop sites were larger versions of the mobile site, spacing out the individual restaurant cards better.
However, in testing it became clear and was recommended that the space could be better utilised. The result is the altered layout that can be seen on the desktop site where the restaurant cards push up alongside the map allowing users access to all information easily. This did result in an issue whereby there was a lot of unused space beneath the map so a max height was added to the restaurant card column with a scrollbar available if there were more cards.
As Delish TV is built as a Netflix companion site, we have chosen to base our colour scheme on that used by Netflix.
The background and text colour of #181818 provides good contrast, making it a suitable choice for text and the background to other elements. When acting as a background colour, it allows the map, series jumbotron, individual restaurant cards, and additional buttons to stand out. The exceptions to this are the navbar and footer background colours, which start as a lighter shade (#696969) to enable the logos to stand out before blending with the site's overall background colour.
The red shade (#E30914) is perfectly suited to smaller buttons, such as the dropdown menus and buttons that are created when a user clicks on an individual restaurant card. These draw the eye without being overpowering and provides good contrast to white text or background elements.
Finally, a grey shade (#CCCCCC) is used for added flourishes such as hover colours as it provides the user with information that an element is being hovered over or can be interacted with without impacting the readability of the text.
While researching this project, Nunito Sans was highlighted as a font that is close to Netflix's own custom font. This is used for headings, most notably in the Featured Restaurants section. There it is used for the section heading as well as the name of the restaurant and the series that it is featured in.
The site uses Roboto for non-heading text. It is a good pairing for Nunito Sans without shifting the overall font style of the site.
HTML & CSS programming languages - For the basic site structure and design elements.
JavaScript - JavaScript makes up the lion's share of this project as it is used extensively to build and populate the site based on either a randomly chosen series or user choices.
Bootstrap 4 - Bootstrap 4 was used to prioritise the mobile design, while enabling the site to be responsive and look its best across a variety of screen sizes.
Balsamiq - Balsamiq was used to create a series of wireframes that the site was built based on.
Coolors - Coolors assisted in finding a colour palette that worked well.
Google Fonts - Google Fonts assisted in finding and sourcing fonts that would suit a site of this type.
Font Awesome - Font Awesome was used to find icons that would provide more detail for buttons such as the Play Now and More Info buttons as well as visual representations of social media platforms.
Git - To track changes in code during development.
GitHub - To host the project’s repository and to host the live website via GitHub Pages.
Gimp 2 - Gimp 2 allowed for image manipulation and was used to create the brand’s logo.
Birme - To ensure that images for the spotlight jumbotron panel were a similar height.
TinyPNG - To compress and optimise image files.
Favicon Converter - To create the favicon based on the brand logo.
WebFormatter - Used to tidy up and properly format the index.html file.
FreeFormatter CSS Beautifier - Used to standardise indents and tidy up the style.css layout and formatting.
Multi Device Website Mockup Generator - Used to create the multi-device image featured at the top of this README file.
-
Chrome Developer Tools - Throughout the development of this project, the Chrome Developer Tools were frequently used to ensure that the site behaved responsively, looked attractive across a range of screen sizes, and to ensure that there was sufficient contrast between background colours and text.
-
HTML Validator - The W3 validator was used to ensure code was valid throughout the project and issues were corrected along the way. The code was determined to be valid but warned that headings could be used in sections.
-
HTML Validator - FreeFormatter's HTML validation tool was also used to double check that no other issues could be found. The code was determined to be valid but warned that headings could be used in sections.
-
CSS Validator - W3's CSS Validation tool was used to ensure that the style.css file was valid and correct. The code was determined to be valid.
-
JavaScript Validator - The Esprima syntax validator checked the script.js file for mistakes and errors.
-
JavaScript Validator - JSHint was used to check the validity of JavaScript code contained in this project.
-
WAVE - This site was used to evaluate the accessibility the project. It produced one contrast error highlighting the series description as the source of the issue. However, in testing, a font colour of #000, which would pass the test, did not appear readable.
-
a11y - This site also performed checks on the colour contrast accessibility. Again, it highlighted the series description text as problematic, but did not take the background image or overlay into account, which has increased readability in practice.
-
Web Accessibility by Level Access - The Delish TV project received a total compliance rating of 91%. The site highlighted that links or controls that open new windows do not do so without a warning. We acknowledge that the trailer links and play now buttons contained within jumbotrons could provide more warning. However, other instances indicate that the user will be directed to watch the episode on Netflix, an external source, and it is best practice to open tabs such as these in a new tab.
This website was also tested manually on a range of devices and internet browsers. Please note that this project does not support Internet Explorer due to the use of ES6 features and notation.
Dell Laptop
- Google Chrome
- Microsoft Edge
- Mozilla Firefox
Mobile Samsung Galaxy S10:
- Google Chrome
- Firefox
- Opera
iPhone 8:
- Safari
- Google Chrome
The manual testing process included the following tests and steps:
-
Select Breakfast, Lunch & Dinner from the series dropdown menu.
-
Ensure that the jumbotron, map, and restaurants list change to reflect this choice.
-
Select Chef's Table from the series dropdown menu and repeat step 2.
-
Select Chef's Table France from the series dropdown menu and repeat step 2.
-
Select Street Food Asia from the series dropdown menu and repeat step 2.
-
Select a filter that results in marker clusters to feature on the map. e.g. Breakfast, Lunch & Dinner
-
Tap on a marker cluster. Ensure that the map zooms in to restaurants in this cluster without an error.
-
Zoom back out to ensure that the marker cluster reappears.
-
Using the map, navigate to a zoom that provides a view of individual markers or select a filter from the dropdown menu that shows individual markers. e.g. Japan.
-
Tap or click on a marker. Ensure that the resulting infowindow popup information matches the associated restaurant card identified by the label.
-
Repeat this process a number of times, checking a variety of filters and markers.
-
Choose a location from the location dropdown menu.
-
Ensure that the map changes to reflect this chosen filter and compare marker information to the featured restaurants.
-
Choose a series or location from the relevant dropdown menu.
-
Click on an individual restaurant card.
-
Ensure that the map displays this chosen location and that the infowindow matches the restaurant card's information.
-
Repeat this process.
-
When the page loads initially, ensure that the Back To All Filtered Restaurants button is hidden and that the text inviting users to click on a restaurant card to learn more (from this point on, referred to as "More Info text") is visible.
-
Click on an individual restaurant card. Ensure the Back To All Filtered Restaurants button is displayed and the More Info Text is hidden.
-
Click on a different series or location. Ensure the Back To All Filtered Restaurants is hidden and the More Info Text is displayed.
-
Click on a restaurant card.
-
Click the Back To All Featured Restaurants button. Ensure this button is then hidden and the More Info Text becomes visible.
-
Press the Play Now button on the jumbotron. Ensure that the series link to Netflix opens in a new tab.
-
Click the Trailer button on the jumbotron. Ensure that the YouTube link opens in a new tab.
-
Click on a restaurant marker on the map.
-
Click the Watch on Netflix link. Ensure this link opens in a new tab.
-
Click on the Watch on Netflix button attached to a restaurant card. Ensure this link opens in a new tab.
-
Click on a series in the series dropdown menu.
-
Ensure the jumbotron, map, and restaurant cards update to reflect this choice.
-
Click on a country in the location dropdown menu.
-
Ensure the jumbotron is hidden, and the map and restaurant cards update to reflect this choice.
-
Click on another series in the series dropdown menu.
-
Ensure the relevant jumbotron is displayed and the map and restaurants cards update to reflect this choice.
-
Click on the location dropdown menu
-
Click where the placeholder says "Enter Country".
-
Enter the name of a country.
-
As you type, the dropdown list should filter to only return countries that match the text entered.
-
Click on the relevant country to apply this filter.
-
Hover over the Play Now button in the jumbotron. Ensure that the background colour changes.
-
Hover over the More Info button in the jumbotron. Ensure that the background colour changes.
-
Hover over a restaurant card. Ensure that the background colour fades to grey.
-
Move the mouse away from the highlighted restaurant card. Ensure that the background colour fades to white.
-
Hover over the dropdown menu buttons. Ensure that the colours invert.
-
Hover over a select number of Watch On Netflix buttons. Ensure that the colours invert.
-
Hover over each of the footer links. Ensure that the colour darkens slightly.
Initially, the selectSpotlight function was used as the callback function in the google maps apis script, but this produced an error on page load occasionally. Removing the callback and instead adding a load event listener to the window that called this function has rectified this issue.
When a user clicked on a restaurant card, the Watch on Netflix span would be generated with a link to the episode. However, this button did not appear for restaurants where only one restaurant met the filter (e.g. Germany). Previously, the function checked if there was an existing span (as there was previously an issue whereby clicking on a card again would produce multiple spans). In the end, it was decided to create the button immediately upon creation of the card so that a user can click through to the episode immediately instead of taking an additional step to isolate a restaurant card.
As the site is designed with a mobile-first philosophy, an emphasis was placed on making the spotlight images appear well on mobile. However, at larger screen sizes the custom background position set caused a grey border to appear at the right of some images. Using a media query, the position of these images has been updated to render them correctly on larger devices.
This filter dropdown allows the user to type in a country name to filter the dropdown options to just the countries that match the text entered. If the dropdown menu is displayed above the button, the text entry field is at the top of the list and entering text causes the remaining menu options to seemingly float in the middle of the page.
-
"As a viewer of culinary shows, I am often automatically recommended other reality TV shows that have nothing to do with food. I would like to find similarly themed series that would be of interest to me." All of the shows featured on this site are food related, so there is no risk of being recommended a show about real estate or tattoos. When a user visits the site initially, a random series is featured in the spotlight jumbotron, which provides the user with information about the show, a trailer, and a link to the show. The user can explore further and select a new show from the dropdown menu, which in turn provides them further information.
-
"As a fan of Breakfast, Lunch & Dinner, I would like to find out more information about some of my favourite restaurants featured in the series." All of the restaurants contained within a series are featured when a user selects a series from the relevant dropdown menu. The user is presented with a visual display of where these restaurants are located and can get more detailed information about their location and the restaurant's website.
-
"As someone travelling to Japan, I would like an easy way to find out more about Toyo's restaurant, as seen on Street Food Asia, so that I can experience the food and performance for myself." For those travelling (or living in a given area), it is possible to find out about restaurants via the location drop down menu. This filters restaurants by geographical location, providing further information about their location and website (where applicable). Those hoping to see more about a given restaurant can then click on the episode link to be brought to the episode of the relevant series in which this restaurant is featured.
-
"As a foodie, I would like to thoroughly research restaurants in my area to ensure that it appeals to me and that I will get value for money." While menus and user reviews provide a good deal of information to prospective diners, a link to a Netflix episode provides an added dimension. In all cases, viewers will see the food on offer in a more visual and meaningful manner. Seeing someone eating a dish and their reaction to it provides the viewer with more meaning than reading words on a screen. In many cases, viewers get to see how dishes are prepared and brought to life or get to know some of the personalities involved in the restaurant.
-
"As a business, we would like to showcase our range of culinary series, as we would like users to keep finding value for money in their subscription and attract new customers." As is stated previously, the spotlight jumbotron displays a random series when the page is loaded, thus exposing visitors to a range of Netflix Original programming. There are links to series and episodes provided throughout the site, which encourages users to watch, while those who do not have a current subscription will be brought to the series' page with links to sign up for a subscription.
-
"As a business, we would like to highlight the restaurants involved in series, which rewards them for allowing a series to be filmed there." All of the restaurants that have been involved in the featured series are on display on this site. Users are invited to find out more information about each business with map markers inviting users to click to find out more and restaurant cards that provide added details.
-
"As a business, we wish to continue making original culinary series. We would like to provide this added value to participating restaurants to encourage others to get involved." This is both a longer-term and ongoing goal. The site has provided additional visibility and value for participating restaurants and the hope is that this can entice other restaurants and business owners to partake in a series. This will enable us to continue to lead the way in producing original culinary series.
To deploy this website on GitHub Pages, I followed the following steps:
-
Navigate to the project’s repository
-
Navigate to the settings page
-
Scroll down to the section titled GitHub Pages
-
As my repository was private while I was working on it, I had to choose to make it public
-
Select Master Branch from the Source dropdown
-
The GitHub Pages section changed to inform me that my site "is ready to be published at https://mark-obeirne.github.io/delish-tv/"
To clone this project and to deploy it locally, follow these steps:
-
Navigate to the project’s repository
-
Click the green button marked “Clone or download”
-
Highlight the provided URL and copy it or click the copy button to the right. Alternatively, you can download a .zip file of the repository to run the website locally
-
Open your terminal
-
Navigate to the working directory where you would like to place the cloned repository
-
In the command line, type “git clone” followed by the URL copied previously
For more information or guidance, please see GitHub’s Help Section.
Show descriptions were provided by Netflix in the About section of the relevant series.
Information contained within the restaurants array was put together manually from a variety of sources, including Wikipedia, Bustle, Netflix's episode list, Food and Wine, and Google Maps.
Logos were sourced from Netflix, while screenshots from episodes were used for the jumbotron images.
How to autocenter map with multiple markers in unknown locations This ensured that it was not necessary to set a central location for the map without knowing where the map markers are situated. This was necessary as the central point for a series like Chef's Table France is quite different to Street Food Asia, for example.
Ensuring that the zoom isn't too close when the map features just one location The zoom of the map for this project has to suit both wide reaching locations, such as in Breakfast, Lunch & Dinner, as well as single locations where a distant zoom would not be user friendly.
Integrating MarkerClusterer with infowindow This code enabled the usage of both MarkerClusterer, which enables many markers in a location to be grouped together, and the infowindow popup to provide more information about a marker.
I would like to thank my mentor, Antonio Rodriguez for their support and advice. In particular, I would like to thank them for their feedback during our second call, which prompted a revision of the site's layout, leading to better flow and overall UI.
I would also like to thank my fellow Code Institute students and the alumni who provided support, advice, and a second opinion on Slack.
Finally, I would like to thank all those who took the time to test this website and provide feedback and suggestions.
This project is for educational purposes only.