{"id":30697488,"url":"https://github.com/umarsiddique010/book-tracker-js","last_synced_at":"2026-05-16T18:04:38.552Z","repository":{"id":306151304,"uuid":"913005269","full_name":"umarSiddique010/book-tracker-js","owner":"umarSiddique010","description":"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.","archived":false,"fork":false,"pushed_at":"2025-07-23T23:02:24.000Z","size":3380,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-24T00:18:37.817Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://umarsiddique010.github.io/book-tracker-js/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/umarSiddique010.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-06T20:52:06.000Z","updated_at":"2025-07-23T23:18:22.000Z","dependencies_parsed_at":"2025-07-24T00:33:36.312Z","dependency_job_id":null,"html_url":"https://github.com/umarSiddique010/book-tracker-js","commit_stats":null,"previous_names":["umarsiddique010/book-tracker-js"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/umarSiddique010/book-tracker-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarSiddique010%2Fbook-tracker-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarSiddique010%2Fbook-tracker-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarSiddique010%2Fbook-tracker-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarSiddique010%2Fbook-tracker-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/umarSiddique010","download_url":"https://codeload.github.com/umarSiddique010/book-tracker-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarSiddique010%2Fbook-tracker-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273258385,"owners_count":25073683,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-02T02:00:09.530Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-09-02T09:10:24.918Z","updated_at":"2026-05-16T18:04:38.545Z","avatar_url":"https://github.com/umarSiddique010.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cimg height=\"45\" src=\"./src/asset/favicon.ico\" style=\"margin-bottom:-13px;\"\u003e Book Tracker JS\n\n\u003cdiv align=\"center\"\u003e\n\n### Modular Book Tracker SPA.\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eA framework-free Single Page Application built with modern Vanilla JavaScript,\n  focusing on Object-Oriented Architecture, real DOM manipulation, and comprehensive unit testing.\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://umarsiddique010.github.io/book-tracker-js/\"\u003e\u003cstrong\u003eView Live Production Deployment\u003c/strong\u003e\u003c/a\u003e\n  \u0026nbsp;\u0026nbsp;\u0026bull;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"#getting-started\"\u003e\u003cstrong\u003eLocal Setup\u003c/strong\u003e\u003c/a\u003e\n  \u0026nbsp;\u0026nbsp;\u0026bull;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://github.com/umarSiddique010/book-tracker-js\"\u003e\u003cstrong\u003eRepository\u003c/strong\u003e\u003c/a\u003e\n  \u0026nbsp;\u0026nbsp;\u0026bull;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://github.com/umarSiddique010/book-tracker-js/issues\"\u003e\u003cstrong\u003eReport an Issue\u003c/strong\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge\u0026logo=javascript\u0026logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n[![CSS](https://img.shields.io/badge/CSS-1122ff?style=for-the-badge\u0026logo=CSS\u0026logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/css)\n[![Webpack](https://img.shields.io/badge/Webpack_5-8DD6F9?style=for-the-badge\u0026logo=webpack\u0026logoColor=black)](https://webpack.js.org/)\n[![Vitest](https://img.shields.io/badge/Vitest-6E9F18?style=for-the-badge\u0026logo=vitest\u0026logoColor=white)](https://vitest.dev/)\n[![GitHub Pages](https://img.shields.io/badge/GitHub_Pages-181717?style=for-the-badge\u0026logo=github\u0026logoColor=white)](https://pages.github.com/)\n\n\u003c/div\u003e\n\n---\n\n## Overview\n\n**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.\n\nUsers can add books, track read status, filter by \"Done\" vs \"Yet to Read\", and manage their library — all persisted across sessions via `localStorage`.\n\n## Application Preview\n\n![Book Tracker JS](./src/asset/app-screenshot.webp)\n\n## Features \u0026 Architecture\n\n### 1. Object-Oriented Architecture\n\nThe codebase is strictly divided into single-responsibility classes — no logic bleeds between layers:\n\n- **`AddBooks`** — Book model/entity class\n- **`BookStore`** — Static class; sole owner of `localStorage` read/write\n- **`BookStateManagement`** — CRUD logic: add, delete, edit read status\n- **`RenderTracker`** — Main book grid renderer\n- **`RenderForm`** — Dynamic form generator\n- **`RenderBasicUI`** — Layout skeleton\n- **`UtilityModule`** — Custom `createElement` wrapper + toast notification system\n- **`InputField`** — Form handling with guard clauses and validation\n- **`Aside`** — Responsive sidebar with hamburger toggle\n\n### 2. MVC-Lite Pattern\n\n| Layer | Classes | Responsibility |\n| :--- | :--- | :--- |\n| **Model** | `BookStore`, `BookStateManagement` | Data logic and `localStorage` I/O |\n| **View** | `RenderTracker`, `RenderForm`, `RenderBasicUI` | DOM creation and updates |\n| **Controller** | `InputField` | Bridges user input and state updates |\n\n### 3. Key Technical Features\n\n- **Pure DOM manipulation** — programmatic UI via custom `UtilityModule.createElement`, zero `innerHTML`\n- **Event delegation** — single listener on parent containers; dynamically added elements inherit behavior without redundant bindings\n- **Toast notification system** — animated user feedback for every CRUD operation, built from scratch\n- **Responsive sidebar** — hamburger menu toggle on mobile, filter by read status\n- **Form validation** — defensive guard clauses in `InputField.js` prevent invalid data entry\n\n### 4. Testing\n\n- **Unit tests** — isolated class logic (`AddBooks`, `BookStore`, `UtilityModule`)\n- **Integration tests** — interaction between `BookStateManagement` and `RenderTracker`\n- **DOM tests** — form renders, button clicks, sidebar toggle via `jsdom` + `@testing-library/dom`\n- **Coverage** — enforced via `npm run test:coverage`\n\n## Tech Stack\n\n| Category | Technology | Usage |\n| :--- | :--- | :--- |\n| **Language** | **JavaScript (ES6+)** | Classes, modules, async/await |\n| **Markup** | **HTML5 + CSS3** | CSS variables, flexbox, grid |\n| **Bundler** | **Webpack 5** | Asset modules, CSS loaders, HTML plugin, dev server |\n| **Testing** | **Vitest + jsdom** | Unit, integration, and DOM tests |\n| **Test Utilities** | **@testing-library/dom** | DOM assertions and event simulation |\n| **Hosting** | **GitHub Pages** | Manual deployment via `npm run deploy` |\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js v16+\n- npm\n\n### 1. Clone \u0026 Install\n\n```bash\ngit clone https://github.com/umarSiddique010/book-tracker-js.git\n\ncd book-tracker-js\n\nnpm install\n```\n\n### 2. Run Development Server\n\n```bash\nnpm start\n```\n\nOpen [http://localhost:8080](http://localhost:8080). Webpack Dev Server with hot reloading.\n\n### 3. Run Tests\n\n```bash\n# Full test suite\nnpm test\n\n# With coverage\nnpm run test:coverage\n```\n\n### 4. Build for Production\n\n```bash\nnpm run build\n```\n\nOutputs optimized files to the `build/` directory.\n\n### 5. Deploy to GitHub Pages\n\n```bash\nnpm run deploy\n```\n\n\u003e Runs `npm run build` then pushes to the `gh-pages` branch. Deployment is manual — run only after tests pass.\n\n## Project Structure\n\n```\nsrc/\n├── __test__/               # Vitest test suites\n├── asset/                  # SVG icons and images\n├── css-components/         # Per-component CSS files\n├── js-components/\n│   ├── data/               # Static config data\n│   ├── AddBooks.js         # Book model\n│   ├── Aside.js            # Responsive sidebar\n│   ├── BookStateManagement.js  # CRUD logic\n│   ├── BookStore.js        # localStorage wrapper\n│   ├── InputField.js       # Form handling and validation\n│   ├── RenderBasicUI.js    # Layout skeleton\n│   ├── RenderForm.js       # Dynamic form generator\n│   ├── RenderTracker.js    # Book grid renderer\n│   └── UtilityModule.js    # DOM helpers + toast system\n├── index.js                # Entry point\n├── style.css               # Global variables and reset\n└── template.html           # HTML shell\n```\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n### Developer \u0026 Maintainer\n\n**Md Umar Siddique**\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.umarsiddique.dev/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Portfolio-umarsiddique.dev-000000?style=flat-square\u0026logo=googlechrome\u0026logoColor=white\" alt=\"Portfolio Website\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.linkedin.com/in/md-umar-siddique-1519b12a4/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/LinkedIn-0077B5?style=flat-square\u0026logo=linkedin\u0026logoColor=white\" alt=\"LinkedIn\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/umarSiddique010\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/GitHub-181717?style=flat-square\u0026logo=github\u0026logoColor=white\" alt=\"GitHub\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/~umarsiddique010\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/NPM-CB3837?style=flat-square\u0026logo=npm\u0026logoColor=white\" alt=\"NPM\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://dev.to/umarsiddique010\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Dev.to-0A0A0A?style=flat-square\u0026logo=dev.to\u0026logoColor=white\" alt=\"Dev.to\" /\u003e\n  \u003c/a\u003e\n \u003ca href=\"mailto:us70763@gmail.com\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Email-D14836?style=flat-square\u0026logo=gmail\u0026logoColor=white\" alt=\"Email\" /\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n\u0026copy; 2024 - Present. Released under the MIT License.\n\n\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumarsiddique010%2Fbook-tracker-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fumarsiddique010%2Fbook-tracker-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumarsiddique010%2Fbook-tracker-js/lists"}