fiskryeziu / zoroclone

Zoro Clone: A ReactJS Anime Website Clone 🗡️📺 – Emulate the magic of aniwatch.to with this project, offering a replica of the popular anime streaming website. Watch your favorite shows in style!

Hi there 👋

zoroclone's Issues

Add lazy loading in App.jsx

In the App.jsx file of the project repository, there's a direct import of components without lazy loading in the React Router setup. It's advisable to refactor the routes to utilize React.lazy along with Suspense for code-splitting and lazy loading of components. This would help in improving the initial loading time of the application by loading components asynchronously when they are needed.

Enhance Card Interaction with Play Icon on Hover

Desc
At present, the cards in the "Latest Episode" section on the home page of the website only exhibit a background color change when hovered over.

Steps to reproduce

1. Open a web browser and navigate to the website: http://localhost:3000/home.
2. Scroll down the home page to locate the "Latest Episode" section.
3. Observe the cards in this section.
4. Hover the cursor over any card in the "Latest Episode" section.

Expected Behavior:

When a card in the "Latest Episode" section is hovered over, a play icon should appear in the middle of the card, indicating to the user that they can click to play the episode.

Current Behavior:

Currently, when a card is hovered over, the only visual change is a background color effect, which does not effectively convey the interaction possibility of playing the episode.

Additional Information:
To implement the play icon on hover, it is recommended to utilize the React Icons library.
For reference and inspiration, you can explore the website aniwatch.to/home to see how they implement a similar hover interaction with play icons on their cards.

Style tooltip component

Desc
Style the tooltip component of the card when it's hovered.

Steps To Reproduce

1. Go to 'localhost:3000/home'
2. Scroll down
3. See Latest episode section
4. Hover on Card & see the tooltip.

Screenshot for the expected style of tooltip

As for the text use mock data.

Additional information
For icons use react-icons.
Reference and inspiration, you can explore the website aniwatch.to/home to see how it's styled the tooltip of the card.