BOOKIFY

• 

  DF

• 

  AA

BOOKIFY started from a simple frustration: finding and sharing books in small communities is often messy. People recommend books in chats, but there is no clean flow to list, preview, and manage books in one place. I wanted to build a platform where a user can log in, upload a book listing, let others read sample pages, and manage everything from one dashboard.

What inspired me The idea came from seeing friends ask:

“Do you have a PDF/sample before I buy?” “Where can I keep all my listed books?” “Can I track what I already read?” That pushed me to design BOOKIFY around three user goals:

Discover books quickly Read before committing Manage personal activity (created/read books) How I built it I built BOOKIFY as a React + Vite web app with Firebase and Cloudinary:

Frontend: React, React Router, Tailwind CSS Auth + Data: Firebase Authentication + Firestore Image hosting: Cloudinary Deployment-ready setup: Vercel-compatible build output (dist) Core implementation highlights:

Protected routes for authenticated flows Book CRUD for the listing owner Multi-page preview parsing using separators (---) Reader with page navigation (Previous / Next) Profile page with avatar upload, bio, and user stats Responsive navigation and layouts for mobile/tablet/laptop Challenges I faced The biggest challenge was preview rendering and reader stability:

I initially saw re-render/flicker behavior in the reader because effects were retriggering unexpectedly. Page splitting failed for some uploads due to newline differences (\n vs \r\n), causing all content to appear on one page. How I solved it:

Added guards so fetch/read-mark logic runs once per book ID. Normalized page splitting to support both Windows and Unix line endings. Added legacy-safe parsing for older saved data. Another challenge was production readiness:

Ensuring environment configuration is safe for public GitHub Cleaning tracked env files and replacing with .env.example Preparing a cleaner README and deployment flow What I learned This project taught me a lot about real-world frontend architecture:

State/effect management matters as much as UI Data format assumptions can break user experience Authentication + authorization are different layers “Works locally” is not enough; deployability and docs are part of product quality I also learned how small UX details change trust:

clear loading/error states confirmation before destructive actions (logout/delete) mobile-first accessibility A small metric mindset I tracked progress by reducing friction in the user journey. If we define friction score (F) as:

[ F = \sum_{i=1}^{n} \text{extra_steps}_i ]

then each feature (reader pagination, profile, CRUD shortcuts, responsive nav) aimed to minimize (F), making the experience smoother for all devices.

Built With

• authentication
• css
• dom
• eslint
• firebase
• git
• github
• html5
• javascript
• node.js
• npm
• tailwind
• vercel
• vite