Merge branch 'master' into bookpage

CODE_OF_CONDUCT.md

@@ -1,7 +1,9 @@
-# Contributor Covenant Code of Conduct
+# ✨Contributor Covenant Code of Conduct✨
 
-## Our Pledge
+---
 
+## 🌟Our Pledge
+---
 We as members, contributors, and leaders pledge to make participation in our
 community a harassment-free experience for everyone, regardless of age, body
 size, visible or invisible disability, ethnicity, sex characteristics, gender
@@ -12,31 +14,34 @@ and orientation.
 We pledge to act and interact in ways that contribute to an open, welcoming,
 diverse, inclusive, and healthy community.
 
-## Our Standards
+---
+## 🚦Our Standards
 
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+* 💖Demonstrating empathy and kindness toward other people
+* 🤝Being respectful of differing opinions, viewpoints, and experiences
+* 📝Giving and gracefully accepting constructive feedback
+* 🌱Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+* 🎯Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+* 🚫The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+* 🛑Trolling, insulting or derogatory comments, and personal or political attacks
+* ⚠️Public or private harassment
+* 🔒Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+* ❌Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
-## Enforcement Responsibilities
+---
+
+## 👨‍⚖️Enforcement Responsibilities
 
 Community leaders are responsible for clarifying and enforcing our standards of
 acceptable behavior and will take appropriate and fair corrective action in
@@ -48,30 +53,41 @@ comments, commits, code, wiki edits, issues, and other contributions that are
 not aligned to this Code of Conduct, and will communicate reasons for moderation
 decisions when appropriate.
 
-## Scope
+---
+## 🌐Scope
 
 This Code of Conduct applies within all community spaces, and also applies when
 an individual is officially representing the community in public spaces.
 Examples of representing our community include using an official e-mail address,
 posting via an official social media account, or acting as an appointed
 representative at an online or offline event.
 
-## Enforcement
+---
+## 📋Pull Request Guidelines
+
+Contributions, including pull requests, must align with this Code of Conduct. 
+All contributors are expected to submit work that fosters a positive and inclusive community. 
+Inappropriate behavior, language, or content in pull requests may result in the rejection of 
+the contribution and further enforcement actions as outlined in the guidelines.
+
+---
+## 🛡️Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-@Trisha-tech.
+.
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the
 reporter of any incident.
 
-## Enforcement Guidelines
+---
+## 📖Enforcement Guidelines
 
 Community leaders will follow these Community Impact Guidelines in determining
 the consequences for any action they deem in violation of this Code of Conduct:
 
-### 1. Correction
+### 1. ✏️Correction
 
 **Community Impact**: Use of inappropriate language or other behavior deemed
 unprofessional or unwelcome in the community.
@@ -80,7 +96,7 @@ unprofessional or unwelcome in the community.
 clarity around the nature of the violation and an explanation of why the
 behavior was inappropriate. A public apology may be requested.
 
-### 2. Warning
+### 2. ⚠️Warning
 
 **Community Impact**: A violation through a single incident or series
 of actions.
@@ -92,7 +108,7 @@ includes avoiding interactions in community spaces as well as external channels
 like social media. Violating these terms may lead to a temporary or
 permanent ban.
 
-### 3. Temporary Ban
+### 3. ⏳Temporary Ban
 
 **Community Impact**: A serious violation of community standards, including
 sustained inappropriate behavior.
@@ -103,7 +119,7 @@ private interaction with the people involved, including unsolicited interaction
 with those enforcing the Code of Conduct, is allowed during this period.
 Violating these terms may lead to a permanent ban.
 
-### 4. Permanent Ban
+### 4. 🚫Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
 standards, including sustained inappropriate behavior,  harassment of an
@@ -112,7 +128,8 @@ individual, or aggression toward or disparagement of classes of individuals.
 **Consequence**: A permanent ban from any sort of public interaction within
 the community.
 
-## Attribution
+---
+## 📜Attribution
 
 This Code of Conduct is adapted from the [Contributor Covenant][homepage],
 version 2.0, available at
@@ -126,3 +143,6 @@ enforcement ladder](https://github.com/mozilla/diversity).
 For answers to common questions about this code of conduct, see the FAQ at
 https://www.contributor-covenant.org/faq. Translations are available at
 https://www.contributor-covenant.org/translations.
+---
+# 🌟Conclusion
+By adhering to this Code of Conduct, we create a respectful, inclusive, and empowering environment for everyone involved in our community. Together, we can build a space where all members feel safe, supported, and encouraged to contribute their best. We invite every member to take responsibility for upholding these standards, ensuring that our community remains open and welcoming to all.

README.md

@@ -1,9 +1,35 @@
-# 📚 Online Book Sales 📚
+# <p>**📚 Online Book Sales 📚**
+<img  src="https://readme-typing-svg.herokuapp.com?color=45ffaa&size=40&width=900&height=80&lines=Welcome-to-Online-Book-Sales"/>
+</p>
 
-![CoverPage](cover-page.png)
 
 Welcome to **Online Book Sales**, an e-commerce platform where you can browse, purchase, and enjoy a wide range of books from our extensive catalog! Our system is built with a 3-tier architecture, featuring a **MongoDB** database backend, **Node.js** & **Express.js** middleware, and a sleek **React** frontend.
 
+<table align="center">
+    <thead align="center">
+        <tr border: 2px;>
+            <td><b>🌟 Stars</b></td>
+            <td><b>🍴 Forks</b></td>
+            <td><b>🐛 Issues</b></td>
+            <td><b>🔔 Open PRs</b></td>
+            <td><b>🔕 Close PRs</b></td>
+        </tr>
+     </thead>
+    <tbody>
+      <tr>
+          <td><img alt="Stars" src="https://img.shields.io/github/stars/Trisha-tech/OnlineBookSales?style=flat&logo=github"/></td>
+          <td><img alt="Forks" src="https://img.shields.io/github/forks/Trisha-tech/OnlineBookSales?style=flat&logo=github"/></td>
+          <td><img alt="Issues" src="https://img.shields.io/github/issues/Trisha-tech/OnlineBookSales?style=flat&logo=github"/></td>
+          <td><img alt="Open Pull Requests" src="https://img.shields.io/github/issues-pr/OnlineBookSales/Flash-Fathom-AI?style=flat&logo=github"/></td>
+          <td><img alt="Closed Pull Requests" src="https://img.shields.io/github/issues-pr-closed/Trisha-tech/OnlineBookSales?style=flat&color=critical&logo=github"/></td>
+      </tr>
+    </tbody>
+</table>
+<hr/>
+<br/>
+
+![CoverPage](cover-page.png)
+
 ## 📑 Table of Contents
 
 - **[Features](#features)** 🚀
@@ -100,6 +126,33 @@ Follow these steps to run the project on your local machine:
 That's it! You’re ready to explore the application locally. 🚀
 
 ---
+## Troubleshooting
+
+### Common Installation Issues
+- **Error: `npm install` fails**: 
+  - Ensure that [Node.js](https://nodejs.org/en/download/) and npm are correctly installed on your machine. You can check this by running `node -v` and `npm -v` in your terminal.
+  - If you encounter permission issues, try using `sudo npm install` (for macOS/Linux) or running the command prompt as an administrator (for Windows).
+
+### Problems with Starting the Server
+- **Error: `Cannot find module 'express'`**:
+  - This error usually indicates that the required packages haven't been installed. Make sure to run `npm install` in both the root and `client` directories.
+- **Server crashes on startup**: 
+  - Check the console logs for any errors that may provide hints about what went wrong. Common issues could be related to incorrect environment variables or database connection strings.
+
+### Issues Related to Dependencies
+- **Version conflicts**:
+  - Ensure that all dependencies in your `package.json` are compatible. If you see warnings or errors during installation, consider using `npm audit fix` to resolve vulnerabilities.
+
+### FAQs
+- **Q: How do I reset my local database?**
+  - A: You can drop the existing database and run your migrations or seed scripts again. Make sure to back up any important data before doing this.
+  
+- **Q: How can I contact support?**
+  - A: If you have further issues or questions, please open an issue in this repository, and we'll be happy to help!
+
+### Additional Suggestions
+- **Clarity**: Make sure the instructions are as clear as possible. For example, specify where to run commands (in which directory).
+- **Links**: If you refer to any external resources (like Node.js downloads), adding hyperlinks could be beneficial.
 
 ## Using GitHub Desktop
 

client/src/App.js

@@ -95,7 +95,6 @@ function App() {
         <Footer darkMode={darkMode} /> {/* Pass darkMode prop here */}
         <Preloader /> {/* Ensure Preloader is correctly styled */}
         <GoToTop /> {/* Added GoToTop component */}
-
         <ChatBotEmbed />
 
       </div>

client/src/Components/SearchBar.js

@@ -1,46 +1,17 @@
 import React, { useState } from 'react';
 import { FaSearch } from 'react-icons/fa';
 
-const SearchBar = () => {
+const SearchBar = ({ onSearch }) => {
   const [query, setQuery] = useState('');
-  const [books, setBooks] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
 
-  const apiKey = 'your google books api';
-
-  const handleSearch = (e) => {
+  const handleSearchSubmit = (e) => {
     e.preventDefault();
-
-    if (query.length > 2) {
-      setLoading(true);
-      setError(null);
-
-      fetch(`https://www.googleapis.com/books/v1/volumes?q=${query}&key=${apiKey}`)
-        .then((response) => {
-          if (!response.ok) {
-            throw new Error('Failed to fetch books');
-          }
-          return response.json();
-        })
-        .then((data) => {
-          setBooks(data.items);
-          setLoading(false);
-        })
-        .catch((err) => {
-          setError('Failed to fetch books');
-          setLoading(false);
-        });
-      } else {
-        setError('Please enter at least 3 characters');
-        setBooks([]);
-    }
+    onSearch(query);
   };
-
 
   return (
     <div className="relative w-full max-w-lg mx-auto my-8">
-      <form onSubmit={handleSearch}>
+      <form onSubmit={handleSearchSubmit}>
         <div className="flex items-center border-b-2 border-teal-500 py-2">
           <input
             className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none dark:text-white"
@@ -54,27 +25,11 @@ const SearchBar = () => {
             type="submit"
           >
             <div className="bg-white text-orange-600 rounded-full p-2 shadow-lg hover:bg-gray-100 transition duration-200 ease-in-out">
-            <FaSearch />
-          </div>
+              <FaSearch />
+            </div>
           </button>
         </div>
       </form>
-
-      {loading && <p>Loading...</p>}
-      {error && <p>{error}</p>}
-
-      {books && books.length > 0 && (
-        <ul className="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1 max-h-60 overflow-auto shadow-lg">
-          {books.map((book) => (
-            <li
-              key={book.id}
-              className="px-4 py-2 hover:bg-teal-100 cursor-pointer"
-            >
-              <strong>{book.volumeInfo.title}</strong> by {book.volumeInfo.authors?.join(', ')}
-            </li>
-          ))}
-        </ul>
-      )}
     </div>
   );
 };

client/src/Pages/BannerCard.css

@@ -3,3 +3,5 @@
     margin-top: 10px; /* Adds some margin between the card and dots */
     position: relative; /* Avoids overlap with the image */
 }
+
+

client/src/Pages/BannerCard.js

@@ -1,17 +1,32 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Link } from 'react-router-dom';
 import 'swiper/css';
 import 'swiper/css/pagination';
 import { FaCartShopping } from 'react-icons/fa6';
 import { Pagination } from 'swiper/modules';
 import './BannerCard.css';
-function BannerCard({ headLine, books }) {
+
+function BannerCard({ books, highlightedBookId }) {
+    const bookref = useRef({}); // Ensure refs are stored in an object
+    const headLine = "New Arrivals";
+
+    // Scroll to the highlighted book when highlightedBookId changes
+    useEffect(() => {
+        if (highlightedBookId && bookref.current[highlightedBookId]) {
+            const bookElement = bookref.current[highlightedBookId];
+            bookElement.scrollIntoView({ behavior: "smooth", block: "center" });
+            bookElement.classList.add("highlight");
+            setTimeout(() => {
+                bookElement.classList.remove("highlight");
+            }, 3000);
+        }
+    }, [highlightedBookId]);
+
     return (
         <div className='my-16 px-4 lg:px-24'>
             <h2 className='text-5xl text-center font-bold text-black my-5'>{headLine}</h2>
-
-            <div className='mt-12'>
+            <div className='mt-12' style={{ overflowY: 'auto', maxHeight: '400px' }}> {/* Added overflow */}
                 <Swiper
                     slidesPerView={1}
                     spaceBetween={10}
@@ -38,7 +53,7 @@ function BannerCard({ headLine, books }) {
                     {books.map((book) => (
                         <SwiperSlide key={book._id}>
                             <Link to={`/book/${book._id}`}>
-                                <div className="relative">
+                                <div ref={(el) => (bookref.current[book.bookTitle] = el)} className="relative">
                                     <img
                                         src={book.imageURL}
                                         alt={book.bookTitle}
@@ -49,24 +64,18 @@ function BannerCard({ headLine, books }) {
                                     </div>
                                 </div>
                                 <div className="flex justify-between items-start pt-4">
-                                    {/* Book Title and Author on the Left */}
                                     <div>
                                         <h4 className="text-md font-medium text-gray-800">{book.bookTitle}</h4>
                                         <p className="text-sm text-gray-600">{book.authorName}</p>
                                     </div>
-
-                                    {/* Price on the Right */}
                                     <div>
                                         <p className="text-lg font-bold text-gray-800">$10.00</p>
                                     </div>
                                 </div>
-
-
                             </Link>
                         </SwiperSlide>
                     ))}
                 </Swiper>
-
                 <div className="mt-4"></div>
             </div>
         </div>