Skip to content

Commit

Permalink
Frontend done
Browse files Browse the repository at this point in the history
  • Loading branch information
@SahilMalavi
SahilMalavi committed Oct 25, 2024
1 parent c7cc8ce commit 7f41260
Show file tree
Hide file tree
Showing 9 changed files with 376 additions and 135 deletions.
163 changes: 97 additions & 66 deletions FRONTEND/public/bookList.json
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,122 @@
[
{
"id": 1,
"title": "Book Title 1",
"author": "Author 1",
"title": "To Kill a Mockingbird",
"author": "Harper Lee",
"category": "Drama",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"description": "A novel set in the Great Depression, focusing on themes of racial injustice and the loss of innocence.",
"image": "https://img.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_23-2149350215.jpg?t=st=1724003175~exp=1724006775~hmac=cefdd1ca588de92a93eee9360e58236ab65f58fb76196726112d7c1a18368737&w=740"
},
},
{
"id": 2,
"title": "Book Title 2",
"author": "Author 2",
"category":"Tragedy",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"title": "1984",
"author": "George Orwell",
"category": "Dystopian",
"description": "A chilling portrayal of a totalitarian society under constant surveillance.",
"image": "https://img.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_23-2149350215.jpg?t=st=1724003175~exp=1724006775~hmac=cefdd1ca588de92a93eee9360e58236ab65f58fb76196726112d7c1a18368737&w=740"
}
, {
},
{
"id": 3,
"title": "Book Title 3",
"author": "Author 3",
"category": "Thriller",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"title": "The Great Gatsby",
"author": "F. Scott Fitzgerald",
"category": "Tragedy",
"description": "A story about the American Dream and the disillusionment that can come with it.",
"image": "https://img.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_23-2149350215.jpg?t=st=1724003175~exp=1724006775~hmac=cefdd1ca588de92a93eee9360e58236ab65f58fb76196726112d7c1a18368737&w=740"
}, {
},
{
"id": 4,
"title": "Book Title 4",
"author": "Author 4",
"category": "Comedy",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"title": "Pride and Prejudice",
"author": "Jane Austen",
"category": "Romance",
"description": "A romantic novel of manners that satirizes issues of marriage, money, and social class in early 19th-century England.",
"image": "https://img.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_23-2149350215.jpg?t=st=1724003175~exp=1724006775~hmac=cefdd1ca588de92a93eee9360e58236ab65f58fb76196726112d7c1a18368737&w=740"
},{
},
{
"id": 5,
"title": "Book Title 5",
"author": "Author 5",
"category": "Sci-fi",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"title": "The Hobbit",
"author": "J.R.R. Tolkien",
"category": "Fantasy",
"description": "A fantasy adventure about a hobbit's quest to win a share of treasure guarded by a dragon.",
"image": "https://img.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_23-2149350215.jpg?t=st=1724003175~exp=1724006775~hmac=cefdd1ca588de92a93eee9360e58236ab65f58fb76196726112d7c1a18368737&w=740"
},{
},
{
"id": 6,
"title": "Book Title 6",
"author": "Author 6",
"category": "Motivational",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"title": "The Catcher in the Rye",
"author": "J.D. Salinger",
"category": "Literary Fiction",
"description": "A story about a young man named Holden Caulfield, exploring themes of teenage angst and alienation.",
"image": "https://img.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_23-2149350215.jpg?t=st=1724003175~exp=1724006775~hmac=cefdd1ca588de92a93eee9360e58236ab65f58fb76196726112d7c1a18368737&w=740"
}, {
"id": 1,
"title": "Book Title 1",
"author": "Author 1",
"category": "Drama",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
},
{
"id": 7,
"title": "The Lord of the Rings",
"author": "J.R.R. Tolkien",
"category": "Fantasy",
"description": "An epic fantasy tale of good versus evil in the world of Middle-earth.",
"image": "https://img.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_23-2149350215.jpg?t=st=1724003175~exp=1724006775~hmac=cefdd1ca588de92a93eee9360e58236ab65f58fb76196726112d7c1a18368737&w=740"
},
},
{
"id": 2,
"title": "Book Title 2",
"author": "Author 2",
"category":"Tragedy",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"id": 8,
"title": "Harry Potter and the Sorcerer's Stone",
"author": "J.K. Rowling",
"category": "Fantasy",
"description": "The first book in the Harry Potter series, introducing the young wizard and his adventures at Hogwarts.",
"image": "https://img.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_23-2149350215.jpg?t=st=1724003175~exp=1724006775~hmac=cefdd1ca588de92a93eee9360e58236ab65f58fb76196726112d7c1a18368737&w=740"
}
, {
"id": 3,
"title": "Book Title 3",
"author": "Author 3",
"category": "Thriller",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
},
{
"id": 9,
"title": "Moby Dick",
"author": "Herman Melville",
"category": "Adventure",
"description": "A narrative of Captain Ahab's obsessive quest to seek revenge on the white whale Moby Dick.",
"image": "https://img.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_23-2149350215.jpg?t=st=1724003175~exp=1724006775~hmac=cefdd1ca588de92a93eee9360e58236ab65f58fb76196726112d7c1a18368737&w=740"
}, {
"id": 4,
"title": "Book Title 4",
"author": "Author 4",
"category": "Comedy",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
},
{
"id": 10,
"title": "The Catch-22",
"author": "Joseph Heller",
"category": "Satire",
"description": "A satirical novel about the absurdities of war, centered on a group of soldiers during World War II.",
"image": "https://img.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_23-2149350215.jpg?t=st=1724003175~exp=1724006775~hmac=cefdd1ca588de92a93eee9360e58236ab65f58fb76196726112d7c1a18368737&w=740"
},{
"id": 5,
"title": "Book Title 5",
"author": "Author 5",
"category": "Sci-fi",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
},
{
"id": 11,
"title": "Brave New World",
"author": "Aldous Huxley",
"category": "Dystopian",
"description": "A dystopian novel set in a futuristic world where society is controlled by technology and drugs.",
"image": "https://img.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_23-2149350215.jpg?t=st=1724003175~exp=1724006775~hmac=cefdd1ca588de92a93eee9360e58236ab65f58fb76196726112d7c1a18368737&w=740"
},{
"id": 6,
"title": "Book Title 6",
"author": "Author 6",
"category": "Motivational",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
},
{
"id": 12,
"title": "The Road",
"author": "Cormac McCarthy",
"category": "Post-Apocalyptic",
"description": "A bleak and harrowing story of a father and son's journey through a devastated world.",
"image": "https://img.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_23-2149350215.jpg?t=st=1724003175~exp=1724006775~hmac=cefdd1ca588de92a93eee9360e58236ab65f58fb76196726112d7c1a18368737&w=740"
},
{
"id": 13,
"title": "The Alchemist",
"author": "Paulo Coelho",
"category": "Philosophical Fiction",
"description": "A novel about a young shepherd's journey to find a treasure, filled with lessons about life and dreams.",
"image": "https://img.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_23-2149350215.jpg?t=st=1724003175~exp=1724006775~hmac=cefdd1ca588de92a93eee9360e58236ab65f58fb76196726112d7c1a18368737&w=740"
},
{
"id": 14,
"title": "The Da Vinci Code",
"author": "Dan Brown",
"category": "Thriller",
"description": "A mystery thriller that follows symbologist Robert Langdon's investigation of a murder in the Louvre.",
"image": "https://img.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_23-2149350215.jpg?t=st=1724003175~exp=1724006775~hmac=cefdd1ca588de92a93eee9360e58236ab65f58fb76196726112d7c1a18368737&w=740"
},
{
"id": 15,
"title": "War and Peace",
"author": "Leo Tolstoy",
"category": "Historical Fiction",
"description": "An epic novel about the French invasion of Russia and the impact of the Napoleonic era on Russian society.",
"image": "https://img.freepik.com/free-vector/hand-drawn-flat-design-stack-books-illustration_23-2149350215.jpg?t=st=1724003175~exp=1724006775~hmac=cefdd1ca588de92a93eee9360e58236ab65f58fb76196726112d7c1a18368737&w=740"
}
]
28 changes: 16 additions & 12 deletions FRONTEND/src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,29 @@
import React from 'react';
import Home from '../src/home/Home';
import BookList from './components/BookList';
import { Route,Routes } from 'react-router-dom'
import ContactUs from './components/ContactUs';
import BookDescription from './components/BookDescription';

import { Route, Routes } from 'react-router-dom';

function App() {
return (
<>
<div className="dark:bg-slate-900 dark:text-white" >
<div className="flex flex-col min-h-screen dark:bg-slate-900 dark:text-white">
<div className="flex-grow">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/books" element={<BookList />} />
{/* <Route path="/course" element={authUser ? <Courses /> : <Navigate to="/signup" />} /> */}
{/* <Route path="/signup" element={<Signup />} /> */}
</Routes>
{/* <Toaster /> */}
<Route path="/contact" element={<ContactUs />}/>
<Route path="/bookdescription" element={<BookDescription />} />

<div className='mt-12 justify-center flex'> @Sahil Malavi</div>
</Routes>
</div>

</>
)

<footer className='mt-12 justify-center flex'>
@Sahil Malavi
</footer>
</div>
);
}

export default App;
export default App;
44 changes: 44 additions & 0 deletions FRONTEND/src/components/BookDescription.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React from 'react'
import Navbar from '../components/Navbar'
import banner from '../../public/banner.png'
function BookDescription() {
return (
<>
<Navbar />

<div className='max-w-screen-2xl container mx-auto md:px-24 px-4 mx-5 my-10 '>
<h1 className='text-xl font-bold '>Book Description</h1><br/>

<div className=" md:px-10 px-4 flex flex-col md:flex-row border-2 border-gray-300 rounded-md">
<div className='md:w-1/2'>
<img src={banner} alt="books" className='w-84 h-84 ' />
</div>
<div className=" md:w-1/2 m-5">
<div className='m-5 space-y-1 md:space-y-4'>
<h3 className='text-1xl md:text-2xl font-bold'>
Title:</h3>
<h3 className='text-1xl md:text-2xl font-bold'>Author: Jane Doe</h3>
<h3 className='text-1xl md:text-2xl font-bold'>Category: Fiction</h3>
<h3 className='text-1xl md:text-2xl font-bold'>Description: </h3>
</div>


</div>

</div>
{/* Sentiment analysis of book reviews */}
<div>
<h1 className='text-xl font-bold '>Book Reviews (Sentiment Analysis)</h1><br />

</div>
{/* Recommendation of books */}
<div>
<h1 className='text-xl font-bold '>Book Recommendations </h1><br />

</div>
</div>
</>
)
}

export default BookDescription
70 changes: 56 additions & 14 deletions FRONTEND/src/components/BookList.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,68 @@
import React from 'react'
import React, { useState } from 'react';
import Navbar from '../components/Navbar';
import Cards from '../components/Cards';
import list from '../../public/bookList.json'
import list from '../../public/bookList.json';

function BookList() {
const [searchQuery, setSearchQuery] = useState('');
const [filteredBooks, setFilteredBooks] = useState(list);

const handleSearchChange = (e) => {
const query = e.target.value.toLowerCase();
setSearchQuery(query);

const filtered = list.filter((book) =>
book.title.toLowerCase().includes(query)
);
setFilteredBooks(filtered);
};

return (
<>
<Navbar />
<div className='max-w-screen-2xl container mx-auto md:px-15 px-4 '>

{/* <h1 className='text-2xl font-semibold md-text-4xl'>Book List</h1> */}
<div className='mt-16 md:ml-8 md:mr-8 mx-auto grid grid-cols-1 md:grid-cols-4'>
{
list.map((item) => (
<Cards key={item.id} item={item} />
))
}

<div className="max-w-screen-2xl container mx-auto md:px-15 px-4">
{/* Search box | hidden for mob */}
<div className="mx-8 my-8 md:m-12 lg:mx-80 ">
<label className="px-2 py-2 border rounded-md flex items-center gap-2 ">
<input
type="text"
className="grow outline-none w-full p-2 text-sm sm:text-base md:text-md"
placeholder="Search bookname"
value={searchQuery}
onChange={handleSearchChange}
/>

<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
className="h-5 w-5 opacity-90"
>
<path
fillRule="evenodd"
d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
clipRule="evenodd"
/>
</svg>
</label>
</div>

{/* Book List */}
{filteredBooks.length > 0 ? (
<div className="mt-16 md:ml-8 md:mr-8 mx-auto grid grid-cols-1 md:grid-cols-4 gap-4">
{filteredBooks.map((item) => (
<a href='/bookdescription'><Cards key={item.id} item={item} /></a>
))}
</div>
) : (
<div className="mt-16 text-center text-lg text-gray-500">
No books found
</div>
)}
</div>
</>

)
);
}

export default BookList
export default BookList;
Loading

0 comments on commit 7f41260

Please sign in to comment.