lazyjinchuriki / cinephile

Movies and Shows finder site with HTML, CSS, Vanilla JS

💫 About Me:

Greetings, digital explorer!
I'm Rahul Khushalani, a Full-Stack Developer.
I craft stunning user interfaces and breathe life into web experiences.
I blend design artistry with code precision.
I find humor in programming—every bug is a "feature."
Join me on this web adventure. 🚀✨

🌐 Socials:

💻 Tech Stack:

📊 GitHub Stats:

💰 You can help me by Donating

cinephile's Issues

[Tests] implementation of tools for static code analysis w/ init E2E framework solution

Current project's challenge

Since there are many contributors involved in this project, the code formatting may vary depending on the individual.
Currently, there is:

• no solution implemented to ensure consistent code formatting throughout the Cinephile repository,
• no automation solution implemented to test the Cinephile app on different browsers

Tool for static code analysis: Prettier & Husky library

Implementing them will:

• help out with the overall project maintenance and code standard/quality,
• make code formatting easier for each contributor,
• result in running "code-standard checks" with each commit -> if the code does not follow the standard rules, the commit won't go through until the issues are fixed

Playwright E2E Test initial solution

Playwright is a great e2e test framework for covering UI test cases. It also makes a really good web application automation solution that supports cross-browser testing.

What do you think? :)

[BUG] In the footer section, the copyright year should be dynamically generated instead of being statically hardcoded.

@lazyjinchuriki Right now, the copyright year is written manually, which means someone has to change it whenever a new year begins. However, with just a few lines of code in JavaScript, we can make it automatic. This means that the copyright year will always be up-to-date without anyone having to change it manually. For example, if the current year is 2023, the copyright section will show 2023. And when the year changes to 2024, the copyright section will automatically update to 2024.

Feat: Improvement in Footer

I would like to improve the footer section of this

UI Changes and Imporvement - Hacktoberfest

Hey there I would like to work on this repo basically regarding the UI improvement and also to make the appearance very good-looking. I will try to give it a netflix theme type feel. Please assign this issue under hacktoberfest-accepted.

Thank You :)

Feat: Improve UI of back to top button

Hello @lazyjinchuriki , the current back to top button is available only at the bottom of the website. I think it would be more user friendly if we make it sticky. I will also improve the UI of the button.

Sample Idea:

update header

1. addition of logo and name in header

Top scroll button

I can add a go to top button for this project.
Please assign me this

Customed themed scroll bar

Can add a custom scroll bar themed as the app
#forhacktoberfest

Add query text and reset button

When I search, for example, "abc", the Search text is gone but if I filter category. it filters based on my previous search and I didn't know that, I had to enter in the search box again to go back

I would like to implement a query bar that shows the current filter that I have.

For example: Filter: "abc", "horror", etc. Below the search input

fixed

Add Simple login for users and adding save to list option

Hey, I think adding simple login in this project would be good.

Also, we can add add to list option or "+" icon on each movies and tv shows, so the users can save their findings while searching.

I would love to work on it, if you want to add this functionality in your project. I am interested to contribute on this project, so if new ideas come up to my mind, I would let you know.

• Login functionality
• Add to list option

The z-index for the Release date is overlapping the trailers

Improve the Ui of the Card View of Movie

I want to improve UI of the Card View of each Movie by adding numbering to Title.

Example:-

Please assign me this issue @lazyjinchuriki

idea : alignment issue of the navbar and sub navbar

I think that the navbar and the sub-navbar should have padding on the left and right sections similar to the section where the movie cards are displayed. I think that will look better and more organized. The navbar is also way sticking away on the sides of the nav div.

You can assign this issue to me if you think it's required. The issue will be in accordance with Hacktoberfest!

improvement in UI/UX

I want to add title in the navbar,
and some improvement in the navbar.
please assign me this issue under Hacktoberfest 2023 tag.

No Styling in the scroll bar

when we open the know more section of a movie

two scrollbar's appear but they don't look good

i could apply some styling to it

Add footer

A well-designed footer can enhance the user experience and provide important information.

Please assign me this issue.

Hover Effects For Cards

The hover effects of the cards are not key board responsive when i move between the cards using tab

its overflow with other elements , please have a look

please assign me under the hacktober fest , i would like to work on it .

Inconsistent Search Bar location

Hello, in addition to my Uncaught Reference Error Issue I'd like to bring attention to the header for index.html and tvshows.html. When I press toggle button at the top-right hand corner of the header, I noticed that the search bar does not stay in the same place between index.html and tvshows.html because of your profile pic/icon that is missing in tvshows.html. This may make the User Interface (UI) experience inconvenient when searching for movies/TV shows especially when the user wants to switch between movies and TV shows fast.

I could make a pull request that includes your profile pic/icon to tvshows.html and enlarge the search bar for web/laptops/desktops if you want.

Video-container class loading several times

A scroll bar appears when some videos are loaded when clicking in the “know more” button because various video-container class are loaded

Favicon is missing in the site.

Page not updated

single page link : https://lazyjinchuriki.github.io/cinephile/single_page/layout.html
(This has search functionality added)
(this reduced the page load time, since there is only 1 page and 1 js file)

2 page link : https://lazyjinchuriki.github.io/cinephile/index.html
(this does not have the search functionality)
(this has a delay since different page loads with its own js file)

please remove other files and keep only 1 single page layout
what's happening is people updating the 2 page layout

Page load animation

I know gsap and i can add page load animation on the header, filters & cards using TweenMax.

On Hovering on the Genre - hand cursor to be shown

fix: API is continuously called

for each search pattern, api is continuously called, the api data should be cached and used to display

Improvement in Title animation and Movie to series Switch Button

Would love to make the title animation look catchy along with the name.
add a good hover effect and adding proper guiding to user by mentioning the name of page they are at just by hovering over button making good user experience.

fix: searchbar not working

Searchbar not working when typed any movie name
This can be added as a feature, that the page updates with the movie name or series name....
working on it

r23.mp4

Update the Nav Bar

i want to add search button and update the button the switch between movie and tv show.
Can u assign me this for hacktoberfest ?

fix: base template duplication

Please keep one base layout as both TV and Movies have same layout and same functionality and working,
instead of having 2 html pages, try to integrate both pages into 1
(not just the html, but tv and movie JS should be working on the integrated html )

No favicon icon on the website

Currently no favicon icon is present on the website.

PLEASE ASSIGN ME THIS ISSUE UNDER HACTOBERFEST TAG

bug: Remove console.log

Remove console.log from scripts which are not required.

Screenshot:

The movie trailer continues to play even after clicking the closing button (x)

Hello! I really loved the idea of your project, and its execution with vanilla JS is awesome! But I found a small issue: Once I play the trailer, and then try to close it, by clicking the x button, the sound of the video keeps playing, and just stops when the video is over or when I play another trailer on.

As you can see in the picture, there's no video playing, but the icon I highlighted above continues to appear, even though the trailer has been closed.

idea : navbar additions

I think we can add a logo or the project name on the leftmost side of the navbar like any standard navbar and put the search input bar in the middle and the movie-series button on the rightmost side. I think this will look good on the page.

You can assign this issue to me if you think it's required. The issue will be in accordance with Hacktoberfest!

Improve footer

Hello! I'd like to improve the footer of your website. I can add a back-to-top button since it requires scrolling all the way up. Also, the UI can be made better and more content can be added to the footer. Please assign me this if you feel this is a good idea. Thanks :)

The movie card is overlapping the trailer

It's z-index should be fixed

Add hover animations to the genre selector

I would love to work on this issue for hacktoberfest 2023

Uncaught Reference Error

I found an error by right clicking inspect element while looking at index.html page. The error is as follows: Uncaught ReferenceError: ScrollTrigger is not defined at script1.js:442:1.

I viewed script1.js file on line 442 and found that this piece of code was causing the console to throw an Uncaught Reference Error:

ScrollTrigger.batch(".movie", {
  batchMax: 3, 
  onEnter: (batch) => {
    gsap.to(batch, {autoAlpha: 1, stagger: 0.15, overwrite: true})
  }, 
});

Your website cinephile works fine even with this Uncaught Reference Error. You can plug this line of code <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script> in the html files to fix the issue however it comes with its own set of errors.

I can add the fix for you as a pull request for Hacktoberfest if you'd like.

UI Improvement - Filter category (Hacktoberfest)

Implementing an hover effect when hovering over the categories of filter options.