readme update

Author: MetinVn

README.md

@@ -1,24 +1,79 @@
 # Open Library Search API Project
 
-This project is a React application built with Vite, providing an interface to search for authors and books using the Open Library Search API.
+A modern React application built with Vite, providing a user-friendly interface to search for authors and books using the Open Library Search API.
+
+---
+
+## Table of Contents
+
+- [Project Overview](#project-overview)
+- [Technology Stack](#technology-stack)
+- [Features](#features)
+- [Project Structure & Navigation](#project-structure--navigation)
+- [Setup](#setup)
+
+---
+
+## Project Overview
+
+Open Library Search API Project allows users to search for books and authors, view detailed information, and interact with a responsive, dark-mode-enabled UI. The app leverages Material-UI for styling and IndexedDB for efficient local data storage.
+
+---
+
+## Technology Stack
+
+- **React** – UI library for building interactive interfaces
+- **Vite** – Fast development/build tool
+- **Material-UI** – Component library for consistent, accessible UI
+- **Tailwind CSS** – Utility-first CSS framework for rapid styling
+- **Open Library Search API** – Public API for books and authors data
+- **IndexedDB (via idb)** – Client-side storage for caching search results
+- **React Router** – Routing and navigation
+
+---
 
 ## Features
 
-- Search for authors by name
-- Search for books
-- Display detailed information about authors, including their bio, birth date, Wikipedia link, and official site (if available)
-- Display detailed information about books, including author name, wants to read count, already red count, currently reading count (if available)
-- Utilizes Material-UI for components and styling
-- Responsive design with dark mode support
-- Efficiently manages large data sets by storing search results in IndexedDB and retrieving them as needed
+- **Search Authors**: Find authors by name and view their details.
+- **Search Books**: Search for books and see author, title, and reading stats.
+- **Author Details**: View author bio, birth date, Wikipedia, and official links.
+- **Book Details**: See author, title, and reading statistics (want to read, already read, currently reading).
+- **IndexedDB Caching**: Search results are cached locally for performance.
+- **Material-UI & Tailwind Styling**: Responsive, accessible, and themeable UI.
+- **Dark Mode Support**: Toggle between light and dark themes.
+- **Responsive Design**: Works well on desktop and mobile devices.
+- **Efficient Data Handling**: Handles large datasets and provides sorting/filtering.
+
+---
+
+## Project Structure & Navigation
+
+The project is organized as follows:
+
+```
+src/
+  App.jsx                # Main app component
+  index.css              # Tailwind CSS imports
+  main.jsx               # Entry point, sets up routing
+  Func/
+    CalcCounts.jsx       # Utility functions for count formatting/styling
+  layouts/
+    Sidebar.jsx          # Sidebar navigation component
+    Welcome.jsx          # Welcome/landing page component
+  pages/
+    AuthorInfo.jsx       # Author detail page
+    AuthorSearch.jsx     # Author search page
+    BookSearch.jsx       # Book search page
+    Home.jsx             # Home page (renders Welcome)
+```
 
-## Technologies Used
+- **Navigation**:
+  - The app uses React Router for navigation.
+  - The sidebar (`Sidebar.jsx`) provides quick access to book and author search pages.
+  - The welcome screen (`Welcome.jsx`) is shown on the home route (`/`).
+  - Search results and details are displayed on their respective pages under `/books/`, `/author/`, and `/author/:authorKey`.
 
-- React
-- Vite
-- Material-UI
-- Open Library Search API
-- IndexedDB
+---
 
 ## Setup
 
@@ -30,3 +85,25 @@ To get started with the project, follow these steps:
    git clone https://github.com/MetinVn/Open-Library-Search-API.git
    cd Open-Library-Search-API
    ```
+
+2. **Install dependencies:**
+
+   ```sh
+   npm install
+   ```
+
+3. **Run the development server:**
+
+   ```sh
+   npm run dev
+   ```
+
+4. **Build for production:**
+
+   ```sh
+   npm run build
+   ```
+
+---
+
+For more details, see the source files in the [`src/`](src) directory.

src/layouts/Sidebar.jsx

@@ -39,7 +39,7 @@ const Sidebar = ({ colors }) => {
       ref={sidebarRef}
       className="fixed top-0 left-[50%] transform -translate-x-1/2 z-[16]">
       <Box
-        className={`flex flex-row rounded-b-md w-[30%] min-w-fit mx-auto items-center transition-all duration-300 ease-in-out ${
+        className={`flex flex-row w-[30%] min-w-fit mx-auto items-center transition-all duration-300 ease-in-out ${
           isExpanded
             ? "h-fit mt-20 sm:h-[60px] sm:mt-0 md:h-[80px] py-4"
             : "h-0 py-0"

src/pages/Home.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Welcome from "../layouts/Welcome.jsx";
 export default function Home() {
   return (