https://github.com/umarsiddique010/book-tracker-js

A sleek, user-friendly Book Tracker SPA built with Vanilla JavaScript. Users can add, edit, and manage their personal book library with real-time UI updates and localStorage persistence. Fully tested with Vitest + jsdom, and optimized for SEO, accessibility, and performance — no frameworks required.
https://github.com/umarsiddique010/book-tracker-js

accessibility color-theory css-components dom-manipulation dynamic-html-generation error-handling html5-css3 javascript jsdom localstorage modular-architecture oop-principles responsive-design seo-optimization solid-principles testing-library-dom ux-design ux-ui-design vitest webpack

Last synced: 16 days ago
JSON representation

Host: GitHub
URL: https://github.com/umarsiddique010/book-tracker-js
Owner: umarSiddique010
Created: 2025-01-06T20:52:06.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2025-07-23T23:02:24.000Z (10 months ago)
Last Synced: 2025-07-24T00:18:37.817Z (10 months ago)
Topics: accessibility, color-theory, css-components, dom-manipulation, dynamic-html-generation, error-handling, html5-css3, javascript, jsdom, localstorage, modular-architecture, oop-principles, responsive-design, seo-optimization, solid-principles, testing-library-dom, ux-design, ux-ui-design, vitest, webpack
Language: JavaScript
Homepage: https://umarsiddique010.github.io/book-tracker-js/
Size: 3.22 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Book Tracker JS

### Modular Book Tracker SPA.

A framework-free Single Page Application built with modern Vanilla JavaScript,
focusing on Object-Oriented Architecture, real DOM manipulation, and comprehensive unit testing.

View Live Production Deployment
  •
Local Setup
  •
Repository
  •
Report an Issue

[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
[![CSS](https://img.shields.io/badge/CSS-1122ff?style=for-the-badge&logo=CSS&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/css)
[![Webpack](https://img.shields.io/badge/Webpack_5-8DD6F9?style=for-the-badge&logo=webpack&logoColor=black)](https://webpack.js.org/)
[![Vitest](https://img.shields.io/badge/Vitest-6E9F18?style=for-the-badge&logo=vitest&logoColor=white)](https://vitest.dev/)
[![GitHub Pages](https://img.shields.io/badge/GitHub_Pages-181717?style=for-the-badge&logo=github&logoColor=white)](https://pages.github.com/)

---

## Overview

**Book Tracker JS** demonstrates advanced frontend fundamentals by building a robust SPA from scratch — no React, no Vue, no jQuery. A strict **modular OOP architecture** manages state, handles persistent storage, and manipulates the DOM with full control over the rendering lifecycle.

Users can add books, track read status, filter by "Done" vs "Yet to Read", and manage their library — all persisted across sessions via `localStorage`.

## Application Preview

![Book Tracker JS](./src/asset/app-screenshot.webp)

## Features & Architecture

### 1. Object-Oriented Architecture

The codebase is strictly divided into single-responsibility classes — no logic bleeds between layers:

- **`AddBooks`** — Book model/entity class
- **`BookStore`** — Static class; sole owner of `localStorage` read/write
- **`BookStateManagement`** — CRUD logic: add, delete, edit read status
- **`RenderTracker`** — Main book grid renderer
- **`RenderForm`** — Dynamic form generator
- **`RenderBasicUI`** — Layout skeleton
- **`UtilityModule`** — Custom `createElement` wrapper + toast notification system
- **`InputField`** — Form handling with guard clauses and validation
- **`Aside`** — Responsive sidebar with hamburger toggle

### 2. MVC-Lite Pattern

### 3. Key Technical Features

- **Pure DOM manipulation** — programmatic UI via custom `UtilityModule.createElement`, zero `innerHTML`
- **Event delegation** — single listener on parent containers; dynamically added elements inherit behavior without redundant bindings
- **Toast notification system** — animated user feedback for every CRUD operation, built from scratch
- **Responsive sidebar** — hamburger menu toggle on mobile, filter by read status
- **Form validation** — defensive guard clauses in `InputField.js` prevent invalid data entry

### 4. Testing

- **Unit tests** — isolated class logic (`AddBooks`, `BookStore`, `UtilityModule`)
- **Integration tests** — interaction between `BookStateManagement` and `RenderTracker`
- **DOM tests** — form renders, button clicks, sidebar toggle via `jsdom` + `@testing-library/dom`
- **Coverage** — enforced via `npm run test:coverage`

## Tech Stack

## Getting Started

### Prerequisites

- Node.js v16+
- npm

### 1. Clone & Install

```bash
git clone https://github.com/umarSiddique010/book-tracker-js.git

cd book-tracker-js

npm install
```

### 2. Run Development Server

```bash
npm start
```

Open [http://localhost:8080](http://localhost:8080). Webpack Dev Server with hot reloading.

### 3. Run Tests

```bash
# Full test suite
npm test

# With coverage
npm run test:coverage
```

### 4. Build for Production

```bash
npm run build
```

Outputs optimized files to the `build/` directory.

### 5. Deploy to GitHub Pages

```bash
npm run deploy
```

> Runs `npm run build` then pushes to the `gh-pages` branch. Deployment is manual — run only after tests pass.

## Project Structure

```
src/
├── __test__/ # Vitest test suites
├── asset/ # SVG icons and images
├── css-components/ # Per-component CSS files
├── js-components/
│ ├── data/ # Static config data
│ ├── AddBooks.js # Book model
│ ├── Aside.js # Responsive sidebar
│ ├── BookStateManagement.js # CRUD logic
│ ├── BookStore.js # localStorage wrapper
│ ├── InputField.js # Form handling and validation
│ ├── RenderBasicUI.js # Layout skeleton
│ ├── RenderForm.js # Dynamic form generator
│ ├── RenderTracker.js # Book grid renderer
│ └── UtilityModule.js # DOM helpers + toast system
├── index.js # Entry point
├── style.css # Global variables and reset
└── template.html # HTML shell
```

---

### Developer & Maintainer

**Md Umar Siddique**

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/umarsiddique010/book-tracker-js

Awesome Lists containing this project

README