The VastMovieHub has been developed for my PP4 for Code Institute. At the VastMovieHub the user can search for a movie, see top 15 movies and view a movie's details. A registered user can also add/delete movies to their favourites list, comment on a movie and edit/delete their comment and give rating to a movie.
This website uses TMDB and the TMDB APIs but is not endorsed, certified, or otherwise approved by TMDB.
View the deployed project here
- Design
- User Experience (UX)
- Database Diagram
- Features
- Technologies Used
- Deployment and Local Development
- Testing
- Credits
This project uses the Bootstrap Framework and I chose to use the colours and fonts that it offers.
Bootstrap's Native font stack
Read more about Native font stack
The Agile Methodology was used to plan this project. This was implemented through Github and the Project Board. Through the use of the Kanban board in the projects view in Github, the project was divided into a few different sections:
- To Do - (All the User stories were initially entered in the 'To Do' column)
- In Progress - (then during development story they were moved into the 'In Progress' column)
- Done - (then finally they get moved into 'Done' once the development completes)
- Future features - (User stories to be implemented in the future)
Please find my Kanban Board with my user stories here.
- As a Site Admin I can approve comments so that I can filter out objectionable comments.
- As a Site User I can register an account so that I can comment and give rating to a movie and create favourites list.
- As a Site User I can visit an about page so that I can find more information about the site.
- As a Site User I can write a message to a contact form so that I can communicate with the admin.
- As a Site User I can search for a movie so that I can find more about the movie.
- As a Site User I can visit a page so that I can view the top rated movies.
- As a Site User I can view movie details so that I can find more details about the movie.
- As a Site User I can view the most popular movies so that I can discover what movies are trending to watch.
- As a Site User I can view the upcoming movies so that I can discover new movies.
- As a Registered User I can view comments on a movie so that I can read the conversation.
- As a Registered User I can access a webpage where I can comment on a movie so that I can be involved in the conversation.
- As a Registered User I can click to add a movie to my favourites list so that I can have my favourites movies organised.
- As a Registered User I can click to remove a movie from my favourites so that I can update my favourites list.
- As a Registered User I can add rating to a movie so that I can express how much I liked a movie.
- As a Registered User I can delete comments from a movie so that manage the content on the platform more effectively.
- As a Registered User I can edit my comments so that manage the content on the platform more effectively.
All pages on the site are responsive and have :
Site user navbar contains the logo (acts as home button), Home, About, Top 15 Movies, Login, Signup and the searh form.
Registered user navbar contains the logo (acts as home button), Home, About, Top 15 Movies, Logout and the searh form.
The Home Page displays the top 3 rated movies.
The About Page gives information about the website.
The Contact Page contains a contact form.
The Top 15 Movies Page displays the top 15 rated movies.
The Login Page contains the login form and reset password link.
The Logout Page logout button.
The Signup Page contains the sign up form.
Only registered users can visit the favourites page.
The Favourites Page user's favourite movies.
The Remove Favourite Modal asks the user to confirm movie removal.
The Results Page contains a list of the movies generated from query entered in the search form by the user.
The Movie Page contains the following details: poster, title, overview, release date, cast, genres, homeapage, production companies, production countries, spoken languages, original lanaguage, original title, budget, revenue and the runtime. It also displays the rating average(if rated).
The registered user Movie Page contains also the give rating stars and the add favourites button.
If the registered user give rating to a Movie it displays user's rating.
Only registered users can visit the comment page.
The Comment Page contains the movie's poster, title, release date, overview, rating average and gernes on top of the page. Then the comment section where it displays the comments count, text editor, delete and edit buttons for user's own comments
The Delete Comment Modal asks the user to confirm comment delete.
The 403 page displays an image with a text error 403: Forbidden.
The 404 page displays an image with a text error 404: Not found.
The 405 page displays an image with a text error.
The 500 page displays an image with a text : 500 Internal server error.
HTML, CSS, JS, Python
JSON - To serialize movie's data for network transmission between the program and TMDB API, and for simplified storage in the database.
- Databases Used
- Django Project - A framework to build the app.
- Bootstrap - version 4.6.2 - CSS Framework.
- django-crispy-forms - To display the contact form.
- django-ckeditor - As a text editor to the contact form and the comments.
- Gunicorn - As the server for Heroku.
- Dj_database_url - To parse the database URL from the environment variables in Heroku.
- Psycopg2 - As an adaptor for Python and PostgreSQL databases.
- Allauth - For authentication, registration, account management.
- jQuery - A JavaScript library to handle front end functions.
- Cloudinary - To host images
- TMDB API - API to get the movie details.
- GitHub - To save and store files for the website.
- VSCode - Code editor used for local development.
- GitPod - IDE used to create the site.
- Balsamiq - Used to create wireframes.
- DBdiagram - To create database diagrams.
- Techsini - To display the web image in various devices.
- Google Developer Tools - To test features, resposiveness and stylilng.
- TinyPNG - To reduce size of the images.
- Favicon - To create favicon.
- Shields IO - To add badges to README.
- Obsidian - To keep notes.
When in development navigate to the settings.py and change the following variables to:
- To view code errors
DEBUG = True- To view emails in the terminal
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'- To set the staticfiles storage
STATICFILES_STORAGE = 'cloudinary_storage.storage.StaticHashedCloudinaryStorage'To fork the repository :
- Log in (sign up) to GitHub.
- Go to the repository for this project MovieHub.
- Click the fork button in the top right corner.
To clone the repository :
- Log in (sign up) to GitHub.
- Go to the repository for this project MovieHub.
- Click on the code button, select one of the HTTPS, SSH or GitHub CLI and copy the link shown.
- Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
- Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.
The site has been deployed using Heroku. Deployed site VastMovieHub. Follow these steps:
If you don't already have an account to ElephantSQL, create one here.
-
Create an external database with
- Log into ElephantSQL
- Click "Create New Instance"
- Set up a plan by giving a Name and selecting a Plan
- Click "Select Region" and choose a Data center
- Click "Review", check all details and click "Create Instance"
- Return to the Dashboard and click on the database instance name
- Copy the database URL
If you don't already have an account to Heroku, create one here.
- Create Heroku app
- Go to the Heroku dashboard and click the "Create new app" button.
- Name the app. Each app name on Heroku has to be unique.
- Then select your region.
- And then click "Create app".
-
In the IDE file explorer or terminal
- Create new env.py file on top level directory
-
In env.py
- Import os library
- Set environment variables
- Add database url
- Add in secret key
- Add TMDB API KEY
- Add email address
- Add email password
import os
os.environ["DATABASE_URL"] = "Paste in ElephantSQL database URL"
os.environ["SECRET_KEY"] = "Make up your own randomSecretKey"
os.environ["TMDB_API_KEY"] = "Your TMDB API key"
os.environ["EMAIL_ADDRESS"] = "Your email address"
os.environ["EMAIL_PASSWORD"] = "Your email password"
os.environ["CLOUDINARY_URL"] = "Paste in the API Environment variable"If you don't already have an account to Cloudinary, create one here.
-
Cloudinary
- Go to the Cloudinary dashboard and copy the API Environment variable.
- Paste in env.py variable CLOUDINARY_URL(see above)
-
In heroku app
-
Go to the settings tab.
-
In the settings click the button "Reveal Config Vars".
-
Click Add and use
KEY VALUE PORT 8000 DATABASE_URL Paste in ElephantSQL database URL SECRET_KEY Your own randomSecretKey TMDB_API_KEY Your TMDB API key EMAIL_ADDRESS Your email address EMAIL_PASSWORD Your email password CLOUDINARY_URL Paste in the API Environment variable -
Go to the deploy tab.
-
Choose the deployment method.
-
Select Github, and confirm to connect to Github.
-
Search for the Github repository name.
-
Then click "connect".
-
Scroll down and click "Deploy Branch".
-
Please see Testing
"This website uses TMDB and the TMDB APIs but is not endorsed, certified, or otherwise approved by TMDB."
Code Institute's - Walkthrough project I Think Therefore I Blog
Youtube Tutorial - To fetch data from the TMDB API.
dev - Integrating Rich Text Editor with Django
codepen - To display stars to give rating.
codepen - To display movie rating with stars.
Stack overflow - Star rating
Youtube Tutorial by Pyplane - To get user rating choice and send data to the server
mailtrap - To create contact form and connect it with the database and send email to admin.
Stack Overflow - To display set of pages in pagination
Stack Overflow and Django Documentation were consulted during the whole project for various issues I faced, both front end and back end
No image available - To use it as a placeholder when movie doesn't contain poster
My mentor Brian Macharia for guidance, support and feedback during the project.
Kera Cudmore for feedback and support during the project. Also for providing an excellent guide how to write the README.
And the tutors from Code Institute that helped me overcome the issues that I faced with the project.