Film Club is a website where my friends and I are able to review films and give our personal opinions on them.

The idea to create the film club website came from my dad. He does a film club of his own with his friends where they go to see films and talk about them in their whatsapp group. I thought it would be better and easier to make a website that displayed the reviews better and more clear while also being more accessible.

This is my third of four milestone projects that make up my Full Stack Web Development course at THE CODE INSTITUTE. The main requirements are to make a responsive website with HTML5, CSS3, Java Script, Python, Flask and MongoDB.

Here is the link to my live website :

• To provide a easier experience for the users to submit reviews on films they have watched.
• To allow users to be able to browse through reviews easily and efficiently.
• To create a responsive website that can be used on tablets and phones.
• To create a website that can be navigated easily and not being difficult to use so that the user is not frustrated.
• To create a website that has a consistent menu and theme that is very clear at getting all of the information across.

• I am a new user who wanted to be able to post my film reviews and see if they had similar thoughts on films as others did.
• I am a new user who was looking at other websites to see reviews on with a good search engine to be able to see reviews quick and easy.

• I am a returning user who wants to be able to edit their reviews and change scores on repeat viewings of the film.
• I am a returning user who wants to be able to delete their reviews if the review feels outdated.

• I am a tablet user and I was able to use the website fine on my tablet.

1. Strategy plane : When planning on what I wanted my film club website, I wanted to make a website that was easy to navigate and clear and representing the information that the website was presenting. I didn't want the website to be complicated and be user friendly. I asked a few friends and family one what would be a suitable display and theme to meet these goals.

2. Scope plane : Now that I had planned what I was going to do with my website, I then needed to plan what sort of features I wanted to add to the website. For the reviews I decided to make clear buttons to edit and delete my reviews. I also made a search function so that I was able to search through the reviews. I made a page to manage the genres so that I was able to create and remove genres for the films. I also added an a profile page so that I could see my reviews.

3. Structure plane : For the structure of the website my first made it so that the user will encounter review page, the login and register pages before going into the rest of the site. From there the user will be able to access the reviews and there profile when they have made an account. Admin will be able to access the genre management pages too.

4. Skelton plane : To navigate the Film Club website there will be a simple navigatation bar at the top right corner of the page on every page. I thought this was best as it meant it was easy to navigate through the website with no issues and is very clear.

5. Surface plane : For the look of the website I decided on a simple theme of white and purple being faded. I did not want the colours to take away from the website as the main reason for the website was to present information and at the same time I didn't want the website to look to bland.

Now that I had planned all of this and had a good picture in my head of what I wanted to do I went on the figma to start designing my website.

To make sure that I fully understood what me website was going to look like before creating the website I created my layout on Figma. This give me an idea on what I was going to do and what tools I would be using.

Link to my Figma https://www.figma.com/file/u0ouO3CFuPqyFSy1H8bnW3/Movie-Review-Website?node-id=0%3A1

This website will include 5 pages that a normal user will have access to and 1 page that only the admins will have access to.

• Page will have a username input box.
• Page will have a password input box.
• Page will have a login button.

• Page will have a username input box.
• Page will have a password input box.
• Page will have a email address input box.
• Page will have a register to webiste button.
• When registering the user will get a confirmation email.

• This page will start with a search bar so that the user can search for whatever review, genre or author they want.
• Each review will have a edit and delete button which only the user who created the review will be able to see.
• Each review is collapsable.
• There will be a button at the bottom of the page to send the user back to the top of the page.

• The page will start a title showing the users name.
• Then reviews for the user will show under that.

• From this page users will be able to create, edit and delete genres.
• Each genre will be in card panel form in a sort of grid.

• HTML5
  • HTML5 was used to create and add the content to my website.
• CSS3
  • CSS3 was used to style all of the content in my website to match what I had designed on Figma beforehand.
• Javascript
  • Javascript was used to create anmiations for my reviews and dropdown boxes as well as make the EmailJS work.
• Materialize
  • Materialize was the framework I used to format and create the navbar as well as the card panels and general formating of pages.
• Github
  • Github was used to organsie and store my files so that they are accessible.
• GitPod
  • GitPod is the workspace I used.
• Jquery
  • Jquery was used to help make the Javascript statements.
• EmailJS
  • EmailJS was used to make automated emails when registering.
• MongoDB
  • MongoDB has is being used to store all of the data.
• Heroku
  • Heroku is being used to run the webiste.
• Python3
  • Python3 is being used to commuicate between Heroku and MongoDB to present the data.

• Figma
  • Figma was used to design the website.

The testing I have done has been documented on a different document. This is the link: https://github.com/callumhearne/movie_club/blob/master/Testing.md

To deploy my app/website I have used Heroku the link for the app is here:

To deploy my work on Heroku I did the following:

1. I first went on Heroku and created a new app, named it and selected the region.
2. I then clicked on the Github connect option in the deploy tab.
3. I searched for my repositories and select the correct one and press connect.
4. I then went down to 'Deploy a GitHub branch' selected the master branch.
5. Then selected 'Deploy branch'.

All of the details and information that were in my website were completely made up for the purpose of the website.

Thank you to the following people who helped with support and guidance at different stages in the project:

• The guidance and support of my mentor Seun Owonikoko.
• The supportive Code Institute community, including my fellow students and the tutor support team.