The latest articles on DEV Community by Harsh Vyavahare (@erharshvav). https://dev.to/erharshvav https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4159858%2Fac6d8c6d-62f2-4ada-ae2b-ad8a92236610.png https://dev.to/erharshvav en Harsh Vyavahare Sun, 04 Oct 2026 06:23:44 +0000 https://dev.to/erharshvav/readspace-a-personal-book-29jh https://dev.to/erharshvav/readspace-a-personal-book-29jh <p><em>This is a submission for the <a href="https://dev.to/challenges/hacktoberfest-weekend-2026-10-01">Hacktoberfest Weekend Challenge: Build for a Friend</a></em></p> <h2> What I Built </h2> <p>I built <strong>ReadSpace</strong>, a modern, responsive personal book management and reading tracker for avid readers of all ages. </p> <p>I designed and built <strong>ReadSpace for my friend</strong>, a passionate bookworm who reads both physical paperbacks and digital e-books. She always struggled with:</p> <ol> <li>Losing track of physical ribbon bookmarks across multiple books she was reading simultaneously.</li> <li>Forgetting memorable quotes and personal takeaways hidden inside scattered notebooks.</li> <li>Feeling overwhelmed by strict reading goals without knowing their required daily reading velocity.</li> </ol> <p><strong>ReadSpace solves these problems</strong> by providing a distraction-free, privacy-focused library web app featuring:</p> <ul> <li> <strong>Dashboard</strong>: Reading stats, streak counters, currently reading focus cards, annual book challenges, finish date countdowns, and recent log timelines.</li> <li> <strong>My Library</strong>: Multi-shelf organization (Currently Reading, Want to Read, Completed, On Hold) with search, genre/format filters, sorting, and seamless Grid/List view toggling.</li> <li> <strong>Reading Velocity Tracker</strong>: Automatic daily pace recommendation engine (<em>"Read 24 pages/day to finish on schedule!"</em>).</li> <li> <strong>My Notes &amp; Quotes Journal</strong>: Centralized repository for favorite passages, takeaways, and page bookmarks with one-click copy-to-clipboard functionality.</li> <li> <strong>Physical Book Mode</strong>: Distraction-free offline reading stopwatch timer and physical ribbon bookmark page synchronizer.</li> <li> <strong>Discover Catalog</strong>: Curated book recommendations with custom shelf selection.</li> <li> <strong>Privacy &amp; Persistence</strong>: Complete LocalStorage persistence with Warm Library / Dark Mode aesthetics and JSON data backup/export.</li> </ul> <h2> Demo </h2> <ul> <li> <strong>Live Deployed App</strong>: <a href="https://harshvyavahare11.github.io/ReadSpace-Built-for-a-friend/" rel="noopener noreferrer">https://harshvyavahare11.github.io/ReadSpace-Built-for-a-friend/</a> </li> </ul> <h2> Code </h2> <p><strong>GitHub Repository</strong>: <a href="https://github.com/Harshvyavahare11/ReadSpace-Built-for-a-friend" rel="noopener noreferrer">https://github.com/Harshvyavahare11/ReadSpace-Built-for-a-friend</a></p> <ul> <li> <strong>Local Preview</strong>: Run <code>npm install</code> and <code>npm run dev</code> to launch locally at <code>http://localhost:5173/</code>.</li> </ul> <h2> How I Built It </h2> <p>ReadSpace was built using a modern open-source web stack:</p> <ul> <li> <strong>Frontend Core</strong>: React 18 + Vite</li> <li> <strong>Styling &amp; Aesthetics</strong>: Tailwind CSS v4 with custom warm off-white background palettes (<code>#FBF9F4</code>), deep navy typography (<code>#1E293B</code>), forest green accents (<code>#2E5A44</code>), book spine 3D gradient effects, and smooth micro-animations.</li> <li> <strong>Icons &amp; Visuals</strong>: Lucide React</li> <li> <strong>Effects</strong>: Canvas Confetti for celebratory book completion triggers!</li> <li> <strong>State &amp; Persistence</strong>: Custom React Context API with automatic LocalStorage synchronization.</li> </ul> <p>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.</p> <h2> Why Does Open Innovation Matter? </h2> <p>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:</p> <ol> <li> <strong>Privacy &amp; Data Ownership</strong>: 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.</li> <li> <strong>Offline &amp; Distraction-Free Freedom</strong>: Open design allows dedicated physical reading sessions without mandatory cloud logins or server downtime.</li> <li> <strong>Customizability</strong>: Anyone in the community can fork the repository, add custom metadata fields, or connect custom APIs.</li> </ol> <h2> Prize Categories </h2> <ul> <li><strong>Hacktoberfest Weekend Challenge: Build for a Friend</strong></li> <li><strong>Open Innovation</strong></li> </ul> devchallenge weekendchallenge hf26challenge Harsh Vyavahare Sat, 03 Oct 2026 13:39:18 +0000 https://dev.to/erharshvav/excited-to-start-learning-with-dev-19ge https://dev.to/erharshvav/excited-to-start-learning-with-dev-19ge <p>I am Harsh Vyavahare . I am new to dev community </p>