StreamingPal is a website that helps the user to decide what to watch on streaming from Netflix, Prime Video or Disney+ in short time by providing them with only the information they really need for their choice.
You can visit the website by clicking here.
Streaming pal is a consultancy website that people can use to plan their movie night and get ideas on what to watch.
Many people, like me, love watching tv series and movies and when planning to do so, spend several minutes browsing through the titles on their streaming platform, then going online to read the reviews and maybe, after a few minutes of watching the chosen one, they realize is actually boring. This website was created for them.
StreamingPal's goal is to reduce drastically this waste of time.
The website includes a presentation of myself, so that people can relate (or not), to the kind of tv series and movies I prefer.
It also includes a carousel of movies and tv series of the three main streaming platform (Netflix, Prime Video and Disney+), and clicking on them, the user will find just a few information to make him/her understand when and where to watch it and if it is worthy or not.
- As a moderator, I want to give an easier way to users to choose what to watch so that the research for the right movie will not be so time-consuming anymore.
- As a user, I want to easily and quickly browse between tv series/movie titles so that I can pick what to watch and start my movie night.
- As a moderator, I love tv series and movies and I want to share my opinions with others.
- As a moderator, I want to become one of the most user friendly and reliable website on the topic, so that I will attract more visitors and gain popularity.
- As a moderator, I want the homepage to be eye catching, so that the user will understand that this is a professional website.
- As a user, I want a wow effect when I enter the website, so I will be motivated to look into.
- As a moderator, in the footer I provide the social medias where I am more active, so that users can contact me anywhere and many more people can learn about my website.
- As a user I want to be able to find StreamingPal on the most used social media so I can share it with my friends.
- As a moderator, I want to inform the user a bit about me, so that he/she could understand my vision and my taste about movies/tv series.
- As a user, I want to know more about the moderator so that I can relate or not to her reviews.
- As a moderator, I want users to be able to locate movies and tv series based on the streaming platform they have, so that it will not create confusion or disappointment for finding an interesting movie/tv series that is on a platform they do not have.
- As a user, if, for example, I have a Netflix subscription, I want to click on the Netflix tab so that I can see reviews about only the movies/tv series that I can find on Netflix.
- As a moderator, I want to communicate in a friendly and fun way to users just a few important details and my opinion on the movie/tv series, so that they will not get bored and could browse easily between them.
- As a user, I do not need all the names of actors and a long plot, I want to quickly see what is interesting about this movie/tv series so I can go watch it or continuing searching.
- As a moderator, I want people to advise me about movies/tv series that they think are cool and deserve to be reviewed, so that I can keep my website always updated and full of titles.
- As a user, I found this hidden gem of a movie/tv series and I want to recommend it so that other people could watch it.
The wireframes were designed on Balsamiq. Click on the following link to view them.
-
Logo: It represent a couch with a pack of pop corn on to communicate the field of the website. It also include the name of the website "StreamingPal". By clicking on it, you will be redirected to the homepage.
-
Navigation bar: It includes the pages that can be explored on the website (in the responsive mobile version, this menu becomes a hamburger menu).
-
Footer: It includes the connection to the social media where "StreamingPal" is more active - Facebook, Instagram, Youtube and Twitter (at the moment, they are connected just to the homepage of those social medias).
Logo, Navigation bar and footer are consistent throughout all pages
-
Title: The title, on top of the browser shows the name of the website and the page where you are at the moment.
-
Homepage: It includes a slogan to attracts the user, a little description of what the website does and a few opinions that some important people gave about "StreamingPal"(fictional). The background is a gif that intend to give the WOW effect and interest the users.
-
About me: This section include a picture of myself and a description of me and the website. Also, a list of the kind of tv series and movies I like an the ones I do not.
-
Netflix / Prime Video / Disney+: These section are similar, the only difference will be the movies and tv series belonging to the different platforms. Every category has its name on the top and underneath there are 2 carousels. One with tv series and one with movies. When a movie is clicked, a few information about it appear in a modal.
-
Inspire me: In this section the user can fill the form if they would like to recommend me a movie or tv series to watch and review to make it more popular.
- The possibility for users to comment under my reviews and give their opinion
- A fun little option called "What shall I snack?" that, when clicked, it will randomly advise a snack to have during the movie.
- Trailer of the movies
- A search bar
- To make the Inspire me form work for real
- HTML5 - to create the code for the website.
- CSS3 - to create the styling.
- Balsamiq - to create the wireframes.
- Gitpod - to host the code and styling.
- GitHub - to hold the repository.
- Canva - to design the logo.
- Bootstrap - for ideas about elements.
- Googlefonts - for the website's font.
- Fontawesome - for the icons.
To verify my HTML code I used W3C:
All my HTML code return with this same warning:
I decided to keep the line noted as warning as helped me to control better the responsiveness of the website.
To verify my CSS code I used W3C:
The CSS code came out without errors:
The tools used to test the responsiveness are DevTools and Responsive-Design-Checker.
Here below the devices the website is been tested on and returned positive results:
| Mobile | Tablet | Desktop |
|---|---|---|
| Iphone 5-6-7 | Ipad mini | 13" notebook |
| Iphone 5-6-7 plus | Ipad Pro | 15" notebook |
| Samsung Galaxy S5-S6-S7 | Amazon Kindle Fire | 19" desktop |
In each of these devices the design, images and functionality work without issues.
The website displays and functions correctly on the following browsers:
However it seems to have some problems with Internet Explorer: the browser seem to not recognize the picture carousels.
- As a moderator, I want to give an easier way to users to choose what to watch so that the research for the right movie will not be so time-consuming anymore.
- As a user, I want to easily and quickly browse between tv series/movie titles so that I can pick what to watch and start my movie night.
- As a moderator, I love tv series and movies and I want to share my opinions with others.
- As a moderator, I want to become one of the most user friendly and reliable website on the topic, so that I will attract more visitors and gain popularity.
On my website I shared a carousel of movies and tv series that I seen and I reviewed them by providing my opinion and a few extra information as when and with who to watch it, besides some general information like year, genere and plot.
The users, once on the homepage, will just have to click on the streaming platform they have and select the tv series or movie they are interested in in order to read the information.
- As a moderator, I want the homepage to be eye catching, so that the user will understand that this is a professional website.
- As a user, I want a wow effect when I enter the website, so I will be motivated to look into.
- As a moderator, I want to provide the social medias where I am more active on, so that users can contact me anywhere and many more people can learn about my website.
- As a user I want to be able to find StreamingPal on the most used social media so I can share it with my friends.
I set a gif as homepage background in order to give the WOW effect to everybody visiting the website and invite them to look more into.
I also added some (fictional) reviews to make users understand that many people have a positive opinion about StreamingPal.
In the footer, users can find the socials where I have an account with my website: Facebook, Instagram, Youtube and Twitter.
- As a moderator, I want to inform the user a bit about me, so that he/she could understand my vision and my taste about movies/tv series.
- As a user, I want to know more about the moderator so that I can relate or not to her reviews.
The users can click on the About me tab to see my photo and read some information about me and why I created the website.
Besides, they will also find a list of movies and tv series generes that I like and the ones I dislike.
- As a moderator, I want users to be able to locate movies and tv series based on the streaming platform they have, so that it will not create confusion or disappointment for finding an interesting movie/tv series that is on a platform they do not have.
- As a user, if, for example, I have a Netflix subscription, I want to click on the Netflix tab so that I can see reviews about only the movies/tv series that I can find on Netflix.
Once on the homepage, the users can select the streaming platform where they desire to watch the tv series or movie; the choice is between Netflix, Prime video and Disney+.
- As a moderator, I want to communicate in a friendly and fun way to users just a few important details and my opinion on the movie/tv series, so that they will not get bored and could browse easily between them.
- As a user, I do not need all the names of actors and a long plot, I want to quickly see what is interesting about this movie/tv series so I can go watch it or continuing searching.
In the modal the users will see when selecting a movie they will find a really short plot and my opinion. The text is written in a fun and brief way so the users could decide in just a few minutes what is the movie or tv serie that will suit them better.
- As a moderator, I want people to advise me about movies/tv series that they think are cool and deserve to be reviewed, so that I can keep my website always updated and full of titles.
- As a user, I found this hidden gem of a movie/tv series and I want to recommend it so that other people could watch it.
From the homepage, the users can click on the Inspire me tab. In that section they will find a little form that they can fill if they just seen a tv series of movie that they really enjoy and that is still not on the website. The form requires a name, email address, streaming platform and a few information about it.
-
One of the bugs I found is the menu that, when displayed on smaller devices, wasn't easily accessible. I solved this problem by creating a hamburger menu that activates only on devices that are too small to display the normal one.
-
Another bug I found was that when you are in the section Netflix, Prime Video or Disney+ and click on one of the arrows of the carousels, the page scrolls completely up. I couldn't find what provoke this bug so I decided to contact the tutor team to ask for suggestions. In their opinion this could be stopped just by using JQuery and JavaScript, however, at the moment I have no knowledge about those programs so I decided to not use them. When I will acquire those knowledges I will go back and try solve this problem.
-
Another problem I had is that to create the previews for the movies I created too many HTML files (one per movie). I solved this by writing the information about movies and tv series in modals that appear when a movie is clicked.
The website was deployed on Github pages. The procedure was the following:
- Open Github
- Select the right repository
- Click on settings
- Scroll down to the Github Pages section
- Select Branch as Master and save
- Refresh the page
- Scroll down to the same section
- This time a message will say "Your site is published at:..."
- Click on that URL and you will be redirected to StreamingPal
To clone the project from Github you can follow these instructions:
- Open Github
- Select the right repository
- Click on the Code button on the right
- Copy the HTTPS link
- Open your terminal and select the position where to clone the project
- Then type git clone and paste the copied link
- Press enter and you will be able to find the file in the selected location
All the text is been created by me
I got some advices from StackOverflow when I had some bugs.
I followed some tutorials from W3schools to center the pictures, and the footer.
I got the code to do the responsive hamburger menu from CodePen.
I watched RaddyTheBrand 's tutorial on how to create a carousel.
I got the base for the body from the Rosie resume from CodeInstitute.
I got all the pictures from Netflix , PrimeVideo and Disney+.
The gif used for the homepage is from AdWeek.
A big thank you to my mentor Precious Ijege that gave me great advices and help me to go through this first milestone.
To my partner Cathal for creating the name and the slogan, for the spelling check and more important, for sustaining me mentally and emotionally, always.
To my parents Monica and Gabriel, for believing in me from day one and sustaining me even from far.
To Declan, Ann, Roisin, Padraig, Niamh and Aisling for introducing me to Code Institute and for being my second family.