Skip to content

Modern Personal Book Library Manager Frontend ๐Ÿ“š

Notifications You must be signed in to change notification settings

getz-devs/librakeeper-web

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Librakeeper Web

โ€• A Modern Personal Book Library Frontend

Librakeeper Web is a sleek and user-friendly web application designed for managing your personal book collection. Built with a modern tech stack and intuitive interface, Librakeeper makes organizing and exploring your books a breeze.

Key Features

  • Effortless Book Adding: Quickly add books to your library by scanning ISBNs using your phone's camera or manually inputting them.
  • Detailed Book Information: View comprehensive details for each book, including title, author, cover image, description, and more.
  • Customizable Bookshelves: Create personalized bookshelves to categorize your books based on genre, author, or any criteria you prefer.
  • Advanced Search: Utilize our powerful search engine to find books within your library based on various parameters.
  • Secure Authentication: Seamlessly log in and manage your library with secure authentication powered by Firebase.

Tech Stack

  • Next.js: A powerful React framework for building fast and SEO-friendly web applications.
  • Mantine: A modern React component library providing pre-built components and styling tools for a streamlined development experience.
  • TypeScript: A strongly typed superset of JavaScript, ensuring code quality and maintainability.
  • pnpm: A fast and efficient package manager for JavaScript.

App Structure

Librakeeper Web is structured around a clear hierarchy of pages, each serving a specific purpose in managing your book collection.

  • /
    • Displays all books
    • Displays all collections (bookshelves)
    • Button to add a new book using the camera
  • /search
    • Search for books using ISBN
    • Button to go to Advanced Search
  • /advSearch
    • Advanced search for books
  • /camera
    • Captures ISBN from the camera
    • Redirects to the search with scanned ISBN
  • /collections
    • Displays all bookshelves
  • /collections/[id]
    • Displays all books for the bookshelf with id
  • /book/[id]
    • Displays detailed info about a book with id
    • Contains a button to edit this book
  • /book/[id]/edit
    • Allows editing info about a book with id
  • /debug
    • Debug page to test API requests

User Journey

The following diagram illustrates a typical user journey through the Librakeeper Web application, highlighting how users interact with various features and navigate between pages.

graph TB
    Login((Login)) -- Authenticate --> Home(["/"]) 
    Home -- "View Book Details" --> Book(["/book/[id]"])  
    Home --> Camera(["/camera"]) 
    Camera -- "Scan or Enter ISBN" --> Search(["/search"])  
    Search --> SearchResults(["Search Results"])
    Search -- "No Books Found" --> AdvSearch(["/advSearch"]) 
    AdvSearch --> SearchResults
    SearchResults -- "Save Book" --> Book 
    Home --> Collections(["/collections"]) 
    Collections -- "Open Bookshelf" --> Bookshelf(["/collections/[id]"]) 
    Home -- "View Bookshelf" --> Bookshelf
    Bookshelf -- "View Book Details" -->  Book
    Book -- "Edit Information" --> EditBook(["/book/[id]/edit"]) 
Loading

Getting Started

Prerequisites

Installation

Clone the repository:

git clone https://github.com/your-username/librakeeper-web.git
cd librakeeper-web

Install Dependencies:

pnpm install 

Start the Development Server

pnpm dev

This will start the development server, typically at https://localhost:3000.