DEV Community

Harsh Vyavahare
Harsh Vyavahare

Posted on

ReadSpace- A personal book

#devchallenge #weekendchallenge #hf26challenge

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

I built ReadSpace, a modern, responsive personal book management and reading tracker for avid readers of all ages.

I designed and built ReadSpace for my friend, a passionate bookworm who reads both physical paperbacks and digital e-books. She always struggled with:

  1. Losing track of physical ribbon bookmarks across multiple books she was reading simultaneously.
  2. Forgetting memorable quotes and personal takeaways hidden inside scattered notebooks.
  3. Feeling overwhelmed by strict reading goals without knowing their required daily reading velocity.

ReadSpace solves these problems by providing a distraction-free, privacy-focused library web app featuring:

  • Dashboard: Reading stats, streak counters, currently reading focus cards, annual book challenges, finish date countdowns, and recent log timelines.
  • My Library: Multi-shelf organization (Currently Reading, Want to Read, Completed, On Hold) with search, genre/format filters, sorting, and seamless Grid/List view toggling.
  • Reading Velocity Tracker: Automatic daily pace recommendation engine ("Read 24 pages/day to finish on schedule!").
  • My Notes & Quotes Journal: Centralized repository for favorite passages, takeaways, and page bookmarks with one-click copy-to-clipboard functionality.
  • Physical Book Mode: Distraction-free offline reading stopwatch timer and physical ribbon bookmark page synchronizer.
  • Discover Catalog: Curated book recommendations with custom shelf selection.
  • Privacy & Persistence: Complete LocalStorage persistence with Warm Library / Dark Mode aesthetics and JSON data backup/export.

Demo

Code

GitHub Repository: https://github.com/Harshvyavahare11/ReadSpace-Built-for-a-friend

  • Local Preview: Run npm install and npm run dev to launch locally at http://localhost:5173/.

How I Built It

ReadSpace was built using a modern open-source web stack:

  • Frontend Core: React 18 + Vite
  • Styling & Aesthetics: Tailwind CSS v4 with custom warm off-white background palettes (#FBF9F4), deep navy typography (#1E293B), forest green accents (#2E5A44), book spine 3D gradient effects, and smooth micro-animations.
  • Icons & Visuals: Lucide React
  • Effects: Canvas Confetti for celebratory book completion triggers!
  • State & Persistence: Custom React Context API with automatic LocalStorage synchronization.

The project architecture was developed using AI pair-programming agent workflows to rapidly scaffold reusable components, calculate dynamic reading velocity math, and refine responsive UI layouts.

Why Does Open Innovation Matter?

Open innovation and open-source software empower users to take full control of their personal data. Unlike commercial reading tracker apps locked behind subscriptions, proprietary algorithms, or invasive data tracking:

  1. Privacy & Data Ownership: ReadSpace keeps all reading data, notes, and habits stored locally in the browser. Users can export their entire library backup to a JSON file at any time.
  2. Offline & Distraction-Free Freedom: Open design allows dedicated physical reading sessions without mandatory cloud logins or server downtime.
  3. Customizability: Anyone in the community can fork the repository, add custom metadata fields, or connect custom APIs.

Prize Categories

  • Hacktoberfest Weekend Challenge: Build for a Friend
  • Open Innovation

Top comments (0)