Ctoic / Lisbook

Collection of your faviorite books.
https://lisbook.netlify.app/
MIT License
19 stars 51 forks source link

Add "Explore Books" Feature to Navbar for Hacktoberfest Newcomers #141

Open Ctoic opened 4 weeks ago

Ctoic commented 4 weeks ago

Description: Add an "Explore Books" option in the navbar that will display a collection of books contributed by Hacktoberfest newcomers. Each book should be displayed as a card with a front image and title, and on hover, the card will flip to reveal the description on the back. This feature will serve as a collaborative space for participants to share their favorite books, improving interaction and engagement on the platform.

Tasks:

Navbar Addition:

Add an "Explore Books" option in the main navbar. Ensure proper routing to a new page that lists all books submitted by contributors. Card Design:

Create a responsive card layout that displays the book’s cover image and title on the front. Implement a hover effect that flips the card to reveal the book description on the back. Style the cards following the existing theme of the website (dark background, smooth transitions, etc.). Hacktoberfest Integration:

Provide clear instructions for Hacktoberfest contributors to add their favorite books. Each book submission should include: Book Title

Author

Cover Image URL (uploaded by contributors) Book Description (100-150 words) Store the book data in a JSON file (or another format if no database is involved). Dynamic Content Loading:

Implement dynamic loading of book cards on the Explore Books page by reading the content from the file. Ensure the page updates as new books are added by contributors during Hacktoberfest. Card Flip Animation:

Use CSS to create the card flip effect on hover. Ensure smooth transitions for both flipping and when showing/hiding the description. Test the card flip animation on various devices to ensure it works responsively. Acceptance Criteria:

The "Explore Books" option is visible in the navbar and routes correctly to a new page. Book cards are displayed in a grid format, with a hover animation that flips the card to show the book description. The design of the cards is responsive and follows the theme of the website. Newcomers can easily add their favorite books via the GitHub repository during Hacktoberfest. The book list dynamically updates as new contributions are made.

Tomkndn commented 3 weeks ago

Is this task done?

Ctoic commented 3 weeks ago

No it's not @Tomkndn

Tomkndn commented 3 weeks ago

Can you briefly explain the thing what things i have to build

Ctoic commented 3 weeks ago

check above issue description

aliabbasnagari commented 3 weeks ago

assign

Ctoic commented 3 weeks ago

@aliabbasnagari go ahead