.prettierignore

For this project, in short, I decided to create a knockoff version of IMDb.

I went through a lot of deliberation about what I could create for this project. I originally had pitched an idea of a weather website to my mentor, I thought it would serve a significant purpose and a lot of interactivity for the user, being able to search for any place in the world etc. After starting that project and mocking up some designs etc. I soon changed my mind, it was a little bland and I didn't feel passionate about completing the whole website. So I tried turning the cogs in my mind and think of something that I use frequently, something that would interest me and hopefully others. Therefore I decided on a movie searching website. I quite frequently use IMDb or rotten tomatoes etc. to search for new movies, old classics, entertainment. So this seemed like an interesting project to work on. One I could use my own experience and family and friends to create something possibly worth using.

Above all I wanted functionality to be the main focus, rather than styling and looks like my last project was centered around. I had some hitches and walls to get past during this project but I am now happy with the result at my current level of web development. There's a lot to be left wanted but it serves a few primary functions very well in my opinion.

I really enjoyed this project, more so than the last one because of the new scope of languages and possibilities I could work with. Being able to allow users to truly interact with my site and enjoy it, explore it and learn new things. All possible because of learning Javascript, working with API's, creating my own custom buttons and more. It was incredibly interesting and sometimes very daunting to learn about the vast libary of different things I could now create with my fingertips.

I hope you enjoy it as much as I have creating it!

My main design choices and features were all in the aim to create something easy to use with a immediate attention focused on using the site, rather than making users dance around to find what they want.

To start I layed out a few quick goals for myself, they are as follows:

1. Easy to use and navigate
2. Easy on the eyes, text and information is presented clearly
3. Color scheme simple but elegant
4. Present multiple things for the user to do (engaging)
5. Not complicated

After that criteria was set I wrote down some possible user stories:

1. As a common user, I want to be able to immediatly use the site I have come to so that I don't lose interest or become frustrated

• Make sure that the main function of the website it immediatly present and easy to use
• Navigation is always present when user scrolls past certain elements

2. As a user, I want to be able to see information on movies that are popular at the moment so I can explore what to watch next

• Create a section that displays popular movies or similar

3. As a user, I want to be able to search for movies so I can find a particular one I am thinking or looking for

• Have a section / input that users can use to search for any movie they want
• Display useful information about the movie they have searched for e.g actors, director, runtime etc.

4. As a user, I want to be able to search for actors and actresses so I can look at other movies my favourite people have starred in

• Have a section that allows people to be searched for by name
• Display information about that person they have searched for, movies they have starred in, biography etc.

The purpose of these short user stories allows me to carefully plan what I want for the website to include and look like etc. Allows me to gather all of my thoughts into a single place and not have to suddenly come up with ideas in the middle of the project when I might not have coded for them, slowing my progress down.

On my last project I didn't express and create a plethora of designs that I could've used. I created a small wireframe for desktop view and then moved on to coding straight away. This was due to the fact that I knew exactly what my wesbite was going to look like inside my head and as I was the only person working on it I foolishly didn't think they were as important. This round I have learnt from my mistake and took a lot of time to create many different designs for the website beforehand. I know this is a valuable skill and routine to get into as later in my carrer I will be most likely working with teams and we need to be able to communiate and show off our ideas.

So below there are three different designs that I have created in Adobe XD. There are two seperate links for each, one is from Adobe's share function and anther a link to my oneDrive folders where I have all the seperate designs in as well. This is due to me personally not liking the XD share function all that much. But that is probably due to my lacking skills in that software.

• Design 1 on XD
• Design 1 on OneDrive

• Design 2 on XD
• Design 2 on OneDrive

• Final Design on XD
• Final Design on OneDrive

After my first website and looking at a lot of other very well built and styled websites I wanted to create something very functional but smart and elegant looking at the same time. I drew a lot of inspiration from IMDb and how their site it tailored very specifically to the users needs. This gave me great insight to what a user would want when coming to my page. In my original designs I was favouring looks over function. For example I wanted a massive home page as soon as you landed on the page rather than being provided with a search bar and the functions you came to the site to use. I soon realised that this wasn't optimal and would create a bad UX design for anyone coming to the site. At first use it might be nice but if you came to the site every day it would soon become old and annoying, driving potential users away. Therefore we landed with a comprimise, still having a large home background design but allowing the user instantly to use the site without needing to scroll or navigate anywhere else on the page.

Another huge design choice was to create a scrolling website or a multi-page website. This was entirely based on my own preferences. I don't like to navigate through tens of pages to get to where I want, especially if I am on mobile, I always love the look and feel of a scrolling website. So I built one, it's as simple as that.

The color scheme was heavily based on a few things that I took into consideration. One being that red (although not the shade I chose) is the color associated with the worlds largest streaming platform, Netflix. You see red on the tv and I bet a large majority of people, even subconsciously think of Netflix. This would allow the user to associate the two together and provide a better user experience because of that. I also used this website article to do a little research on what colors mean and how the populace percieves them. The article states that red stands for: passion, excitement and anger. It can signify importance and command attention. Which I think is very true, so it helped me pick what sort of colors would fit best with the "brand" I was building.

I had to make a few design adjustments during the coding process due to certain limitations or overall walls that I faced. This is why while the designs reflect a very similar outcome on the actual website it still has some differences. The main difference and possibly questionable design choice is the massive gaps the trending movie cards have inbetween the image, text and button. I originally wanted it to be tight and uniform with a lot of white space around the element, but due to an oversight in the design process (not taking into account that some movie titles are very large) the way I have achieved the uniform button at the bottom is by setting a set height on the card and using the attribute - justify-content: space-between on the parent. This makes all of the children within the element spread out from eachother. This is also used in the navbar to achieve a similar effect. If I could change this I would, although I think spending hours possibly days changing every little styling to fit the desired outcome is overkill for this project. Of course if I was building a website for a client I would happily change and revamp the website to fit there needs, luckily I am the client in this instance.

• Navigation bar

  • Allows the user to navigate through the page through clickable text buttons
  • Always present, fixed navbar allows users to always be able to go to different sections of the website no matter where they are
  • Smooth scrolling makes it easy on the eyes to go to different sections rather than sudden sharp changes in the websites information
  • Links collapse into a hamburger icon for devices that are smaller than laptop sized

• Home page image and text

  • Allows the user to immediately know what type of site they are on if it is their first time coming to the site
  • Achieved by having a relevant image displayed and some text highlighting what this site can do for them

• Movie / TV show search bar

  • Allows the user to search for any movie or tv show they wish by inputing text into the search bar
  • Displays the user with movies with the name they have searched for (can be more than one if the input was broad i.e the word Home)
  • Button at the bottom of each search results that when clicked displays relevant information about the movie or tv show
  • Collapse button which will collapse all of the search results if clicked

• Person search bar

  • Allows the user to search for an actor or actress by name
  • Retrives data and displays the search results for the user
  • Button at the bottom of each person (if more than one was searched for i.e the name Brad) which displays extra information about the person
  • Collapse button which will collapse all of the search results if clicked

• Trending carousels

  • Carousel built using the slick.js plugin
  • Displays the trending movies, tv shows and people through a carousel
  • Button at the bottom of each result which will display the relevant information about the element that the user has clicked
  • Updates weekly for different results

• Footer

  • Serves no functionality for the user, but has copyright Jon Howells and signifies the end of the page

This section will be a little more detailed and include what limitations I have faced when creating this project.

Most of the dominant movie searching websites you will go to will have one search bar to function any search a user could want. Due to my own coding knowledge, or lack thereof, I don't know if it would even be possible to create a search bar that could all on multiple api calls at once and depending on the information entered produce a suitable reply to the user. Therefore I have to have two seperate search bars for movies, tv shows and people.

A function where once the user starts to type in words there would be a drop down of all the corresponding search results, e.g when the user starts to type "Int" there would be a drop down of results that include those characters. Again this feature is outside of my current knowledge and possibly not provided by the api's I am using.

Currently my details buttons provide the user with a modal that displays some information about the element that they have clicked. But this is limited. I could approach this issue in a few ways, one would be to have seperate pages load when the user clicks on a button which would they redirect them and display more information about said element. This could include a list of actors of a movie with profile pictures and details buttons for each of those actors. Or for tv shows it could show each episode in a list which would be clickable to see synopsis, actors, date ran etc. The same could go for actors and actresses as well, a details page that included all of the films they have acted in, future films etc.

While I could implement a feature like this to a certain extent I wanted to keep it all on one page for the user, for ease of navigation and loading times, being presented with a modal with some information is useful and easy to click off and on of. Rather than being navigated to another page for a single element and needing to navigate back to the previous page to do another search can become tedious. This feature would work better if I had a universal searchbar like mentioned above so the user, even when on another page, could search for another movie without going back and forth through pages.

This feature was my original idea for the website. To have a single carousel of movies to be displayed on page load but the user would be presented with multiple buttons such as "TV shows", "People", "Trending Today", "In Theaters" etc. Therefor adding a deeper level of functionality to the page and displaying all the information in a clean and concise manner. Unfortunately due to the limitations of the carousel plugin I am using there is no way of displaying information then overwriting it with anothers again and again. My original solution was to unwrite the html output of one api call and write in a new one simultaneously therefore achieving this goal. But there is no such feature present in the slick.js libary.

With all that said, I could complete this feature a different way, by creating the slick.js carousel within the base HTML file and then adjusting each slide with information from the api. But this would results in very messy and non-intuative code as I would have to select each "slide" / div within jQuery and edit it upon button press. Producing hundreds of lines of javascript. The way I have coded the JS currently I believe is to a better standing, at the expense of a valuable feature possibly.

• CSS3

  • This project uses CSS3 to create custom styling for the website

• HTML5

  • This project uses HTML5 to build the base structure of the website

• Javascript / jQuery

  • I used mostly all jQuery to code my javascript functionality within the project. Using it I created all of the buttons, carousels and more.

• Bootstrap

  • I used Bootstrap to style and create a more responsive website using their built in content.

• Font Awesome

  • Font Awesome was used to add icons to some of my features and create a more attractive website.

• Google Fonts

  • The fonts on this website were all procured fron google fonts.

• Hover.css

  • The hover.css libary was used to style the hover function of my buttons.

• W3Schools

  • I used the immense libary of W3Schools website to learn and refresh my mind on anything CSS or HTML related that I needed to implement features onto my site.

• Adobe XD

  • I used XD to create my designs and mockups for the layout of the website.

• slick.js

  • A javascript plugin created by a gentleman called Ken Wheeler which allows you to quickly create very customisable carousels. Instead of creating my own from scratch which is slightly outside of my depth I used his plugin to create the three carousels on my site. See my tending.js file.

• VS Code Editor

  • This is the editor I used to write all of my code for this project.

• OMDb API

  • This is one of the api's I used to populate the search results on my website.

• TMDb API

  • This is another api that I used which allowed me to pull more data in from an external source.

Throughout my testing process as I was coding there were some different methods this project compared to my last one. I employed the use of jasmine which I learnt in a module covered by the Code Institute to test my javascript functions, along with simpler methods which I will outline in another readme.md file called tests.md. Please refer to this page to view my testing process.

To depoly the finished work to Github I had to push all of my current commitments made to the git repository I had created at the start of the project. At the start of my development I installed GitHub desktop on my computer and loaded a new workspace into VS code directly from the application. This created a local repository that I could then push and pull using the terminal inside the code editor.

In detail the process was:

1. Open a new terminal in VS code
2. Check the status of the current workspace by typing "git status"
3. Make sure all files that haven't been added to the repository are added using "git add ." or specific pages instead of the "."
4. Commit any files to the repository to finalise them using "git commit -m "..." with "..." being a description of what the changes were made before the last commitment. I tried to use atomic commits later into the project after reciving feedback that it is better for many valuable reasons and to achieve a closer experince to the proffesional standards
5. Then finally write "git push" to push the latest commitment to the github page
6. From there go to Github and select my current project
7. Locate the settings and scroll down to Github Pages, select the master branch under source and wait for your website to go live

There were no major differences between my deployed version and my local hosted version, apart from a few random scrolling elements which you could scroll on the Y axis. So to reprimand that I added some css styling: overflow-y: hidden; to the code which fixed the issue.

I ran my website locally to test the website using the extension Live Server which imitates a real live version of my wesbite on my choosing of web browser.

While some of these I have already mentioned these technologies or libaries above in the readme I will credit them again for extra reference.

• TMDb API

  • This API is amazing, it has a massive libary of different functions and calls that you can perform to gather a lot of different data about movies and tv shows etc. It was used a lot in this project as it is the baseline for this whole idea, without it I would have a static website without any functionality what so ever.

• OMDb API

  • This is the other API I used. I chose to use two beacuse the TMDb api doesnt supply as indepth information about a single movie or tv show such as actors and directors. I wanted to supply the most useful and as much information as possible to the user so I chose to use both because this allows me the get the best of both worlds.

• Awwwards

  • I have used this site a lot inbetween projects and during to get some inspiration as to what kind of sites and layouts are recieved best by the public.

• w3schools

  • This is a resource I have used a lot of for quick references to lessons about certains things throughout all 3 languages used during this project if I had forgotten or wanted to brush up on any of my skills.

• Unsplash

  • This website is a free image searcher for thousands of photos and high quality images to be used royalty free within my project. Both the images on my page are from this resource.