Visit the deployed site: Works-Of-Wes-Anderson

Works Of Wes Anderson is a website made to celebrate the films of Wes Anderson.
The website's fun and clear design shares information on each film along with positive comments from both critics and visitors.
Members can sign in, have their say and rate the qualities of each film.

• Works Of Wes Anderson
  • CONTENTS
  • User Experience
    • Who is the Website for
    • Design
    • Colour Scheme
    • Typography
    • Images and Icons
    • Wireframes
      • Navigation Bar
      • Home Page
      • Film Detail
      • Member Area
    • Model Structure
      • Film model
      • Critic Comment Model
      • Member Comment Model
      • Score Model
  • Agile Methodology
  • Technologies Used
    • Languages Used
    • Frameworks Libaries and Programs Used
  • Features
    • Navigation Bar
    • Footer
    • Home
    • Film Detail
    • Member Area
      • Each Film
      • Add Comment and Rating
      • Edit Comment
      • Delete Comment and Rating
    • Log In/Out/Register
    • Messages
    • Error Pages
    • Favicon
    • Scroll Container
    • Accessibility
    • Future Implementations
  • Deployment
    • Heroku
    • Fork Repository
    • Clone Repository
  • Testing
  • Credits
    • Learning
    • New learning
  • Media

The site is primarily for fans of Wes Anderson to celebrate his works, have thier say and enjoy other peoples views.
It can also be for users new to Wes Anderson's work to come and find out more.
The site also encourages return visitors by offering a registration service where they can comment and score the different qualities of each film.

Wes Anderson is known for his unique visual style. He likes using symmetry, beautiful color pallets and huge attention to detail.
This website is not trying to emulate Wes Anderson's style because that is not possible, but it does take elements of his design choices.
Wes Anderson sticks with a clear design theme throughout his films and usualy has a retro feel to them. This website is the same and has a simple retro, newspaper design that runs throughout and uses symmetrical layouts.

The color scheme fits in with the overal design goals.
Black text on a White background is used to keep to the simple, retro, newspaper theme and it also ensures the contrast is up to WCAG standards.
Each film has a unique color scheme, this site utilises them by using two of the colors from each film within the appropriate film's section. A color picker tool was used on images from the film to pick the two colors.
Below are the colors used for each element of the website.

The choice of Typography again follows the retro, newspaper theme. Special-Elite from Google Fonts was used throughout to replicate a typewrite style.

With the deliberately minimal design layout, typography and color scheme the icons are very important to make sure the site is visualy appealing. These icons are in keeping with the websites style, many of them are drawings related to Wes Anderson films. The icons were purchased from The-Noun-Project.
Each film has one image, it's poster. A more unique poster was chosen to add interest, the posters are from The-Poster-DB.

Below is the model structure of the website.

This is for the Admin to add a new Wes Anderson film.
All fields are required except the color class and icons. If these are not given default colors and icons will be used.
The Trailer link was taken from the film's Youtube embed link, the posters from The The-Poster-DB and icons from The-Noun-Project.

This is for the Admin to add critic comments for each film, it has a film field as a foriegn key for the film commented on.

This is for a member to add a comment for each film, it has foriegn keys for each film and user.
Each comment has an approved setting which is set to false until the admin approves it.

This is for a member to add a rating for each film, it has foriegn keys for each film and user.
Each category of rating has a choice of 1-5.

Please refer to AGILE.MD

• HTML
• CSS
• Javascript
• Python

• Git - Used for version control
• GitHub - Used to store the repository and GitHub projects for the Kanban board
• Django - Used as the framework
• Codeanywhere - Used as the development environment
• Jinja - Template engine for Python
• Bootstrap - Used to help build a responsive website
• Jquery - Used to help create the javascript functions
• Django allauth - Used for account registration
• Django crispy forms - Used to display forms
• Cloudinary - Used to store and serve images
• ElephantSQL - Used for the database
• Google Fonts - Used for the font
• balsamiq - Used to create wireframes
• lucid - To create model diagrams

• The navigation bar contains a logo for the website which links back to the home page.
• There is a hamburger dropdown menu on small devices which has been customised to an envelope opening and closing to fit in with the websites styling.
• The navigation bar has links to all relevant pages whether the user is loggin or out.
• There is a dropdown menu containing a link to each film with an icon for each film.

• This is provided to add structure to the website.

• There is a message informing the user what the website is all about and telling the user obout the benefits of becoming a member, along with a link to either the register page or member page depending if they are logged in or out.
• Each poster is displayed with a link on click to each film detail page.

• The poster for the film is clearly displayed with icons relating to the film or default icons.
• The color theme is the one chosen in the color class model relevant to the film or the default colors.
• The user can press the poster to see the film sypnosis and links to the films wiki page and a trailer that opens in a modal.
• Relevant critic comments for the film can be seen for the film.
• All the approved member comments can be seen for the relevant film.
• The average member rating can be seen for three categories and it changes when a member adds a rating.
• There is a Link to the member area if the user is logged in or to sign up if the user is logged out to encourage the user to contribute to the website.

• The member area is only avaliable to registered members.
• It contains an about statement at the top of the page providing information about the member area.
• There are two forms for the member to add/edit a comment and add a rating.
• Each film has information with a link to the relevant film detail page, the members comments and rating.

• The film title is displayed with the relevant icons and colors.
• Information about this section is provided inside three slides and a link to the relevant film detail page is provided.
• The members score (if they have one) is shown with a delete button underneath.
• All the members comments are displayed (if they have made any). Pending comments are styled differently and labled 'pending approval'. There is a delete and edit button for each comment.

• The two forms are displayed at the top of the page with a paragraph about the form.
• The comment form lets the user choose the film and add a comment to the length of 250 characters.
• After the comment is added it is sent for approval and the user is informed of this by a message that pops up. It is then displayed in the relevant film section and after the administrator approves this comment it will be seen in the film detail page.
• The rating form lets the user choose the film and add a rating for Style, Humour and Story. The ratings are 1-5 and the default is set to 5.
• After the user adds a rating a message pops up telling them that this has been added and the score will appear in the relvant film section and the average score will be updated in the film detail page.
• If the user already has a rating for the film they attempted to rate a message pops up saying they need to delete the previous rating before adding another and no additional rating will be added.

• If the user chooses to edit a comment they can press the edit button under the relevant comment.
• When this is pressed the add comment form turns into the edit comment form with all relvant information, and fields updated.
• Once the comment is updated the user is notified by a message that it has been sent for approval. The updated comment will be in the relevant film section labeled 'pending approval' and removed from the film detail page (if the original comment was approved) until the administration approved the comment.

• The user can delete their comments or rating by pressing the delete button.
• If the user presses the delete button on the comment they will be asked for confirmation in a modal just incase they did it by mistake.
• Once the comment or rating is deleted a message will pop up confirming deletion and the comment/rating will be removed from the website.

A Favicon was created for this website at Favicon.io.

The horizontal scroll container is used throughout this website containing the comments and having custom scroll bar colors matching the relevant film.
This feature was choson as it fits in well with the newspaper/retro style. I also feel that it works well on mobile devices as peolple are used to swiping and scrolling whilst using other popular social media websites.
It has been mentioned that this typle of horizontal scroll isn't usually used with website content and it might not apeal everyone. I can see this point of view but decided to stick with the initial style choice and kept them in.

• The accessibility of the website was tested by both Wave and Lighthouse (score of 100), please see the TESTING page page for details.
• All the images have relevant alt descriptions.
• The link to wikipedia opens in a new tab.
• The buttons have clear hover effects and also have a focus effect for keyboard users.

This is the first release of this website that meets the scope of this project. As seen in the AGILE page and the project Issues there are remaing issues for future implementations.
I would like to improve the benefits to becoming a member. At the moment the benefits are being able to contribute to the website and make your opinion known by commenting and rating a film.
I would like the member to feel more connected to the website by being able to create a profile with added functionality like naming and changing their favorite film, having a watch list of Wes Anderson films and also have the ability to view other members profiles.
Another fantasic idea given to me by my mentor was adding a quiz to the website. I think that this idea would take the website to the next level.

This site was deployed using Heroku via GitHub and developed using codeanywhere. The following steps were followed to deploy the site:

• Makesure the development environment has:
  • All the requirements are up to date in requirements.txt
  • The settings.py is set up to use DATABASE_URL(ElephantSQL used for this project's database), CLOUDINARY_URL (Used for hosting images uploaded) and SECRET_KEY (Django secret key), all pointing to the env.py where the environment variables are stored or will be found in Heroku convig vars when deployed
  • An env.py file storing sensitive keys for Django (Secret_key), Database( ElephantSQL) and image storage (Cloudinary_url)
  • The static configuration is correct (In this project Cloudinary used for media and Whitenoise used to serve static)
  • A Procfile added with web: gunicorn project_name(worksofwes).wsgi
  • Debug set to only true in development mode
  • All migrations are made
  • All changes commited and pushed to GitHub where the repository is stored
• Log in to Heroku and create App with unique name
• Add following convig Vars to new App:
  • DATABASE_URL with database value in env.py (Copied from the relevant ElephantSQL database instance)
  • SECRET_KEY with django secret key value in env.py (Create this yourself)
  • PORT to 8000
  • CLOUDINARY_URL with cloudinary value in env.py (Copied from API environment variable in Cloudinary account)
• Add Heroku url to Allowed hosts in settings.py file and push this to GitHub
• Click on deploy and choose GitHub and link to the repository (Works-Of-Wes-Anderson-GitHub-Repository)
• Click on deply branch
• Open App

Visit the deployed site: Works-Of-Wes-Anderson

• Go to the Works-Of-Wes-Anderson-GitHub-Repository repository
• Click "Fork" which can be found in the top right corner

• Go to the Works-Of-Wes-Anderson-GitHub-Repository repository
• Under the repository click on "go to" then under the "local" tab copy the HTTPS clone URL
• In your local development environment go to the terminal
• Change the current working directory to the location you want the cloned directory to be made
• Type "git clone" and then paste the clone URL and press enter

Please refer to TESTING.MD

The code used for this project was taught to me by code insitute. The Code Insitutes project run through 'I think therefor i blog' helped me greatly with the development of my project.

The use of context-processors was Learnt from djangocentral.com

The use of scroll containers was learnt from Kevin Powell

For highlighting active links learnt from valerymelou.com

Reading the official documentaion for django and cloudinary was useful for many elements of this website including having a min and max validation for the model.

• Tinypng.com/ - Used to compress images
• Cloudconvert.com - Used to convert images to webp
• Favicon.io - Used to generate favicon
• Amiresponsive - Used to see site on different devices and create the image for the top of this README
• The-Noun-Project - Used for the icons
• The-Poster-DB - Used for the film posters