plang-psm / popflix-v2 Goto Github PK

Overview

Configure prettier, eslint and husky to the project and write a github action to run when code is pushed.

Action Items

• Configure prettier, eslint and husky
• write a github action to run when code is pushed.

Resources/Instructions

https://deku.posstree.com/en/react/prettier/#google_vignette

Overview

There is currently no backup image for movies without images. Add a placeholder image to movies that don't have an image.

Action Items

• Apply backup images to all files that have images..

Resources/Instructions

None.

• Config cypress to swap base url to run both dev and prod testing.
• Finish cypress testing the forms.

Overview
From lighthouse report.

Links do not have a discernible name

• Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn how to make links accessible.

Heading elements are not in a sequentially-descending order

• Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies. Learn more about heading order.

Action Items

• Fix social tags found in the footer file
• Fix h3 header in footer
  • <h3 class="text-md ">Designed and developed by plang-psm</h3>
• Test and apply
• Include lighthouse test screenshot in PR

Resources/Instructions
N/A

Overview: Clean up the unused content imported in files

Action:
rc/components/MediaCard.jsx

• Line 1:17: 'useState' is defined but never used no-unused-vars
• Line 64:17: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text

src/components/ScrollToTop.js

• Line 1:8: 'React' is defined but never used no-unused-vars

src/components/WatchlistMovies.js

• Line34:13: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text

src/components/home components/Header.js

• Line 55:25: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text

src/components/home components/NowPlaying.jsx

• Line 1:17: 'useEffect' is defined but never used no-unused-vars
• Line 1:28: 'useState' is defined but never used no-unused-vars

src/components/home components/SearchBar.js

• Line32:6: React Hook useEffect has a missing dependency: 'fetchMovies'. Either include it or remove the dependency array react-hooks/exhaustive-deps

src/pages/Home.jsx

• Line 66:6: React Hook useEffect has a missing dependency: 'nowPlayingData'. Either include it or remove the dependency array react-hooks/exhaustive-deps
• Line 104:6: React Hook useEffect has a missing dependency: 'trendingMovieData'. Either include it or remove the dependency array react-hooks/exhaustive-deps
• Line 141:6: React Hook useEffect has a missing dependency: 'trendingTvData'. Either include it or remove the dependency array react-hooks/exhaustive-deps
• Line 178:6: React Hook useEffect has a missing dependency: 'trendingScifiData'. Either include it or remove the dependency array react-hooks/exhaustive-deps
• Line 215:6: React Hook useEffect has a missing dependency: 'trendingFamilyData'. Either include it or remove the dependency array react-hooks/exhaustive-deps

src/pages/SignUp.js

• Line 2:10: 'Link' is defined but never used no-unused-vars

src/pages/TvPage.js

• Line 2:10: 'Link' is defined but never used no-unused-vars
• Line 7:3: 'AiFillFacebook' is defined but never used no-unused-vars
• Line 8:3: 'AiFillInstagram' is defined but never used no-unused-vars
• Line 9:3: 'AiFillTwitterSquare' is defined but never used no-unused-vars
• Line 11:10: 'FaImdb' is defined but never used no-unused-vars
• Line 12:10: 'Swiper' is defined but never used no-unused-vars
• Line 12:18: 'SwiperSlide' is defined but never used no-unused-vars
• Line 13:10: 'FreeMode' is defined but never used no-unused-vars
• Line 16:10: 'ReviewBar' is defined but never used no-unused-vars
• Line 40:9: 'POSTER_IMG' is assigned a value but never used no-unused-vars
• Line 41:9: 'NO_IMAGE' is assigned a value but never used no-unused-vars

Resources:

Move genres to a new area and clean up some of the responsive design.

Add hover effect displaying the media description and title.

Overview

The hamburger menu is not visible to cypress and is causing the tests to fail. The tests work locally but fail when going through the workflow. Research and debug this issue.

Action Items

• Research why the svg icon is not visible to cypress
• Find a fix and document the fix

Resources/Instructions

frontend/cypress/e2e/navbar/navbar.cy.js

Overview

The website needs a rehaul. See which pages need to be addressed.

Action Items

• Home page
  • Resize the swiper -- consider creating a reusable component.
  • Add banners/call to actions
  • Redesign layout
  • Include hover over affects like the Movie/Tv home pages
• Movie/Tv Home need to display more pages
  • Research and implement virtualization for movies
• Watchlist/profile page
  • Consider adding profile images
  • Create an an actual account view
• Footer
  • Add more site information to the footer -- navigation, about, etc etc
• Search bar
  • Remove transparency

Resources/Instructions

N/A

• Run Cypress tests with GitHub Actions as part of a CI/CD pipeline

Resources:

• https://docs.cypress.io/guides/continuous-integration/github-actions
• https://github.com/cypress-io/todomvc/blob/master/.github/workfl

Create a blank issue template similar to the Mementos project.
https://github.com/plang-psm/mementos

Swiper is breaking when the slides are set to 4 but the api only provides 2. Need a way just to display the 2.

Overview
Research and add end to end testing to the project to ensure site runs as intended.

Action Items

• Research and compare different E2E testing tools. Make sure to document why you chose the tool, the pros/cons compared to other available tools, and how E2E will or will not improve this project.

Resources/Instructions

• https://fullstackopen.com/en/part5/end_to_end_testing
• https://www.cypress.io/
• https://www.selenium.dev/

Overview

Add extra links to navbar

Action Items

• add movie and tv dropdowns with options to browse.
• add cypress testing to the navbar

Resources/Instructions

None.

The current navbar needs a background blur so the text on the nav are readable when hovering over text on the site.

Overview

React docs provide alternatives to fetch data that may be more efficient. Research the alternatives and implement them wherever we fetch data.

Action Items

• Research the frameworks with data fetching mechanisms mentioned in the React docs
• Implement the framework
• Create a wiki document on why you chose the framework over the other alternatives

Resources/Instructions

React Docs

Overview
Research if redis cache is necessary for the project. Confirm if using redis cache oversteps TMDB apis policy.

Action Items

• Research and add redis cache to the project. Make sure to document the purpose, pros and cons, and how it will enhance the project.

Resources/Instructions

Overview

The home page categories are currently set in separate files. Create a reusable component that can dynamically render the components for all categories.

Action Items

• Create a reusable component for movie categories
• Create a reusable component for tv categories
• Remove old files and replace them with the new reusable component

Resources/Instructions

None

Overview
Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. Learn more about modern image formats.

Action Items

• Research the potential image formats
• Apply and test
• Include a lighthouse test screenshot in your PR.

Resources/Instructions/Images

Overview

The height of some movies are smaller/larger than the rest. See image below.

Action Items

• Ensure all images expand to the full height and stay within its container
• Explain fix in PR

Resources/Instructions

The application currently routes the user to YouTube to view trailers. Integrate a feature on the site where the video opens in the application.

• Integrate own window for viewing trailers

Overview

The SciFi and Family movie categories are not opening to their detailed page. There is potentially an error in the req being made.

Action Items

• Investigate why we are getting an undefined key
• Test the SciFi and Family request to see the data being passed
• Apply and explain fix in PR

Resources/Instructions

• Undefined -- variable has been declared, but its value has not been assigned.

The signup page needs a password strength feature

Overview
Research and add docker to the project.
Action Items

• Research and add docker to the project. Make sure to document the purpose of adding docker, pros and cons, and how it will enhance the project.

Resources/Instructions

Use swiper js to add arrows or bubbles to the carousels

Fix the imdb link on the media pages.

Overview
Footer currently has a random character in the footer. Remove the character.

Action Items

• Remove the character.

Research and add redis cache to the project. Make sure to document the

Overview

When clicking into a movie/show, a warning error appears.

"Warning: Received NaN for the children attribute. If this is expected, cast the value to a string."

Action Items

• Investigate error
• Resolve or return update on findings.

Resources/Instructions