code-institute-submissions / whatx_next Goto Github PK

1. UX

   • User Stories
   • Design
     • Framework
     • Color Scheme
     • Icons
     • Typography
   • Wireframes

2. Features

   • Features Left to Implement

3. Technologies Used

4. Testing

   • Project development walkthrough
   • Validators
   • Compatibility
   • Known Issues
   • Automated Testing

5. Deployment

6. Credits

   • Media
   • Code
   • Acknowledgements
   • Disclaimer

Whatx Next?

It's My 3º Milestone Project from Code Institute, and it is a web page developed using the Flask Framework, Jquery, Materialize and powered by The Movie DB API, providing all movies and tv series content.

Click Here to view the site

"As a user, I would like to _______________"

• View the website on a PC, mobile or tablet.
• Create my own user account.
• Enter using my login details.
• View Trend Lists for movies and Series as Now Playing or Top Rated or Popular.
• Search for a movie or tv series that I may like and it is not displayed on TMDB provided trend lists.
• If avaiable look the movie data as: Original Title, Duration, Movie URL, Overview, Genre, etc.
• Create and edit my Watchlist.
• Create and edit my Watched list.
• Create and edit a movie list that I like.
• Create and edit a list with my favorite movies.
• Manage my movies list, (delete) from all lists.
• Add and check reviews from movies.
• Manage my review at the movie, (delete or edit).
• Logout.
• Contact the page owner to request something or get in touch.
• Delete my user account, excluding all reviews and lists.

Not Implemented

• Discover related movies.
• Login using my google account.

• The desing is based on the Parallax template from materialize

• Flask
• Jquery
• Materialize

• The color scheme is based on the Parallax template from materialize

• Icons used were get on Materialize and Fontawesome

• The typography is based on the Parallax template from materialize

• The First desing think was this below
  • View of it on Am I Responsive:

User Stories

"As a user, I would like to _______________"

" View the website on a PC, mobile or tablet. "

• View of it on Am I Responsive:

" Create my own user account. "

• Register screen to create your account.

" Enter using my login details."

• Screen to Log in.

" View Trend Lists for movies and Series as Now Playing or Top Rated or Popular. "

• Navbar dropdown with the TMDB Lists for movies and tv shows.

" Search for a movie or tv series that I may like and it is not displayed on TMDB provided trend lists. "

• Type what you are looking for and press enter

" If avaiable look the movie data as: Original Title, Duration, Movie URL, Overview, Genre, etc. "

• Movie/Tv Show screen, and when avaiable the Revenue tab.

" Create and edit my Watchlist. "

• Open the movie, select the option below and and click on update lists to save to watchlist.

" Create and edit my Watched list. "

• Open the movie, select the option below and and click on update lists to save to watched list.

" Create and edit a movie list that I like. "

• Open the movie, select the heart option below and and click on update lists to save it, when clicked at the heart the watched button get checked as well, if you liked means you've watched too.

" Create and edit a list with my favorite movies. "

• Open the movie, select the star option below and and click on update lists to save it, when clicked at the star the watched button get checked as well, if it is one favorite movie, means you've watched too.

" Manage my movies list, (delete) from all lists. "

• Go to *My Movies tab and, select to delete a movie, or just open and manage some list information about the movie, as shown previously.
• To delete a movie from all lists a confirmation will be required.

" Add and check reviews from movies. "

• On the movie page, click on review tab, and check for reviews, add some, update or delete your review, if you want it.

" Manage my review at the movie, (delete or edit). "

• To edit or submit your comment, just write down on the field what you want and click on submit, and to delete your review click on Delete Review and confirm at modal window as image below.

" Logout. "

• Just click at log out option on navbar when logged in.

" Contact the page owner to request something or get in touch. "

• Just click at contact us option on navbar, that scrools the page down until the contact us section, a toast and a flash message confirm that the email were sent, and below an email sample on the developer email inbox.

" Edit or delete my user account. "

• When Logged in click on the user name option on the navbar, that drives you to the edit profile page, there you have the option to change username, password, full name, email, and delete account (that option excludes all user information), to delete a confirmation is required.

Footer and Top Button

• On the left of the footer section is the TMDB Api credit, as requested to use this api engine, on the middle a description of the Whatx Next? project, and on the right side and the bottom of the page, Project and credit links, and for the last, the top button shown always after scrolling the page down.

Hovering Carousel and movie lists

• When Hovering the carousel movies they get some zoom transition and tooltiped title, and when hovering the movies on lists they get some zoom and full color transition and also tooltiped title.

Error 404

• A default page to 404 Not Found Error was add

Unfortunetly this features were not implemented.

• Discover related movies.
• Login using my google account.

This project uses Python with Flask, MongoDb, HTML, CSS and JavaScript.

Flask

• Developer used Python through Flask Framework. MongoDb
• Developer used MongoDb as database.
• Jquery
  • Developer used Jquery Library that helps to write JavaScript.
• Gitpod
  • Developer used Gitpod as IDE to build the website.
• Materialize
  • The project uses Materialize to simplify the development process and make the website responsive easily.
• EmailJS
  • The EmailJS was used as email service, on the contact us section.
• GitHub
  • This project uses GitHub to store and share all project code remotely.
• Balsamiq
  • The Wireframes was created using Balsamiq.
• Coolors
  • The Coolors was used to define the project color scheme.
• W3C HTML Validator
  • The W3C HTML Validator was used to validate the project html.
• W3C CSS Validator
  • The W3C CSS Validator was used to validate the project css.
• JSHINT
  • The JSHINT was used to verify JavaScript code warning & error check.
• Web Page Test
  • The Web Page Test was used to verify the website performance.
• Lucid Chart
  • The Lucid Chart was used to draw the Flow ER from the database.

Validating User Stories:

"As a user, I would like to _______________"

• Create my own user account.
  • When Opening the site, on the navbar it is located the register option, on mobile is located at the side-navbar
• Enter using my login details.
  • When opening the site, on the navbar it is located the log in option, on mobile is located at the side-navbar
• View Trend Lists for movies and Series as Now Playing or Top Rated or Popular.
  • When opening the site, on the navbar it is located the dropdown TMDB Lists where are located all trend lists, on mobile is located at the side-navbar
• Search for a movie or tv series that I may like and it is not displayed on TMDB provided trend lists.
  • When opening the site, on all pages the head of the page has the search bar to research whenever wanted.
• If avaiable look the movie data as: Original Title, Duration, Movie URL, Overview, Genre, etc.
  • When click and opening a movie or a tv show, all data avaiable about the title will be displayed.
• Create and edit my Watchlist.
  • When on the view movie screen, the user is able to add edit remove the title from your lists.
• Create and edit my Watched list.
  • When on the view movie screen, the user is able to add edit remove the title from your lists.
• Create and edit a movie list that I like.
  • When on the view movie screen, the user is able to add edit remove the title from your lists.
• Create and edit a list with my favorite movies.
  • When on the view movie screen, the user is able to add edit remove the title from your lists.
• Manage my movies list, (delete) from all lists.
  • When on the view movie screen, the user is able to add edit remove the title from your lists.
  • The user also can use a tab bar located under the head on the option called *My Movies, to check all movies add on lists and if need to remove from all lists, by clicking on the delete option on top of the title displayed.
• Add and check reviews from movies.
  • When on the view movie screen, by clicking on Review Tab, the user is able see all reviews, to add edit remove your own title review.
• Manage my review at the movie, (delete or edit).
  • When on the view movie screen, by clicking on Review Tab, the user is able see all reviews, to add edit remove your own title review.
• Logout.
  • When Logged into the site, on the navbar it is located the Logout option, on mobile is located at the side-navbar
• Contact the page owner to request something or get in touch.
  • When Opening the site, on the navbar it is located the contact us option, on mobile is located at the side-navbar.
  • Or scrolling the page down to found the option.
• Delete my user account, excluding all reviews and lists.
  • When Logged into the site, on the navbar it is located the *User name, on mobile is located at the side-navbar, by clicking on this option it will redirect to the edit profile page, which allows the user edit your details as user name, name, password, email or even delete your accout, what will lead the user to a confirmation box, telling that all user information located will be deleted permanently.

• The idea of the 3º Milestone project come from the need to organize and plan what movie I've watched and wich one I'm going to watch later. I've found a nice and free movie api the The Movie Data Base api, I just had to register, require for a permission, and credit it on my site, the will provide you an api key and all documentation needed to consume this data, allowing me to have a nice and well supplied source of movies images, information and constantly updated data. First of all the plan was to display only movies, but then as the api provided this also, I've decided to use Tv shows informations as well, improving the site making it more useful, interesting and atractive.
• After I've started the development process, I've thinked on the wireframes on display the lists on several carousels, but I've changed my mind and displayed all separetly let the visual more organized, and instead of displaying all lists at the same time, displaying the carousel content below on a grid, some effects where add to the carousel as the zoom in options on mouse hovering, and setting the grid titles on high level of grey scale, zoom in when hovering and as the final touch coloring then back while.
• MongoDb
  • The Database was designed to make easier to store and get the data as the site is used, follow the database Entity relationship:

• My first challenge during the development process where with some bug on installing and genarate the requirements.txt because the "requests" library was declared and installed but for some unknown reason, wasn't appearing at the requirements file, which cause a bug when trying to run at heroku, because that library wasn't found, after talked to my mentor and call the student care support, I've found a solution, adding the "requests" manually on the requirements.txt, what keep it there on the next time I've need to generate the requirements.txt file again. Idea of solution were found after talking with mentor and student care and found this link on Stack Overflow
• Then the next challenge where to add animated checkbox to add to the movie lists as watchlist, wached, liked and favorite, the following example of checkboxes where found Animated Checkboxes, but even so implementing then I wasn't enough skilled to make then work properly updating the list information on the on-click, which lead me to add a form and a button to do so, and make this needed to update the movie lists, to set on or off, always on having the need to click to "update list"
• So following on the development proccess I've come across some blank white spaces on my unordered list of movies displayed, which lead to me to apply the flexbox concept found hereCSS flexbox to not show those blank white spaces.
• After this major challenges, I've add the rest of the site resources, not being capable to add the login using google account, found alot of difficulties to add the site to the https protocol, and probably the following steps, and the suggested movies section for the viewed movies, becoming this way left to implement features

validator.w3.org

• No errors found.

jigsaw.w3.org

• All errors and warnings found are from materialize css files

Web Page Test

• Compatible and tested with Google Chrome, Brave, Microsoft Edge, Moozila Firefox, Opera.

• Note: This website it is Not compatible with the browser Internet Explorer 11 and your previous versions.

This site is deployed on Heroku using the following steps:

• Create a requirements.txt file so Heroku can install the required dependencies to run the app:
  • pip3 freeze --local > project/requirements.txt
• Create a Procfile to tell Heroku what type of application is being deployed using gunicorn, and how to run it:
  • echo web: python app.py > Procfile
• Sign up for a free Heroku account, create your project app, and click the Deploy tab, at which point you can Connect GitHub as the Deployment Method, and select Enable Automatic Deployment.
• In the Heroku Settings tab, click on the Reveal Config Vars button to configure environmental variables. You will need to copy/paste all of the .env key value pairs into the config variables, but please omit the development=1 variable; this is only for local deployment.

How to run this project locally

• To run this project locally you can clone, open with GitHub Desktop or download the project by opening the repository, clik on the [↓ Code] button:
  • To Clone using URL, copy the provided repository link: https://github.com/brunobdias/whatx_next. When you git clone, to a remote repository using HTTPS URLs on the command line, Git will ask for your GitHub username and password. When Git prompts you for your password, enter your personal access token (PAT) instead. or download.
    • The complete documentation about Clone Can be found here
  • You can run this project locally by using a Git CLI clicking on "Open on GitHub Desktop"
  • You can choose Download the ZIP project that provides a ZIP file which can be unzipped and used on your local machine.

• Code Institue
• Balsamiq
• Fontawesome Flask MongoDb
• Coolors
• StackOverflow
• w3Schools
• Materialize
• Jquery
• Gitpod
• GitHub
• EmailJS
• Mozilla.org
• TinyPng
• TMDB Movie Api
• Lucid

• TMDB Movie Api
• Background image 1
• Background image 2
• Background image 3
• FavIcon

The code were developed on Gitpod hosted at GitHub and deployed at Heroku, written based at previous classes at CodeInstitue, StackOverflow, Materialize, with templates, icons, documentation, tips and samples to understand some resourses and to help on improvments.

Helpful links

• Stackoverflow remove blue highlight of button on mobile
• Css hover effects
• Flask Toasters
• Flask default error page 404

Special thanks to my mentor Spencer Barriball from Code Institute for his time, support, assistance and expertise in explaining and guide me through the milestone project.

The content of this website, including the images used, are for educational purposes only.