Landing, categories, explore, search, trending, new release, wishlist and book detail routes.
Overview
What it is
LumiBooks is a bookstore and reading web app with catalog pages, book details, search, library and wishlist flows, reader screens and AI recommendation routes.
The goal was to practice a larger Next.js product with authentication, catalog discovery, reader routes and backend APIs for books and AI features.
Designed for: Readers browsing books, saving items, using reader tools and exploring AI supported discovery flows.
Key Features
Verified product behavior
Sign-in and sign-up routes with Clerk packages in the frontend stack.
Dashboard, library, reading-history, profile, community, and settings screens.
Reader and document reader routes with EPUB and PDF dependencies.
AI librarian and recommendation pages supported by backend AI routes.
Backend book, library, and AI routes with Book, User, Shelf, and Note models.
User Flow
Product journey
- A visitor browses landing, category, search, trending, or book-detail screens.
- They authenticate to use wishlist, dashboard, library, history, profile, and settings areas.
- Reader routes support reading and document flows.
- AI pages provide recommendation and librarian style discovery.
Architecture
How it is built
Next.js, React, TypeScript, Clerk, React Query, Framer Motion, GSAP, Three.js/R3F, EPUB/PDF reader packages, and Recharts.
Express 5 with book, library, and AI routes plus validation and auth-related packages.
MongoDB and Mongoose models for books, users, shelves, and notes.
OpenAI package and AI service files connected to recommendation/librarian routes.
Data and APIs
Models and route responsibilities
Data model
- Book, User, Shelf, and Note models are present.
- Library routes connect authenticated user/library behavior with saved reading data.
- AI routes support recommendation and librarian-style features.
API design
- Book routes support catalog and book-oriented data.
- Library routes support user library, shelves, notes, and reading workflows.
- AI routes support recommendation and librarian experiences.
Challenges
Problems I worked through
Large route surface
The frontend organizes discovery, reading, account, and AI pages into separate route areas.
Reader tools
Reader and document routes use dedicated dependencies instead of treating reading as a generic detail page.
AI discovery
AI recommendation and librarian routes are isolated in backend services and frontend pages.
Screenshots
Product walkthrough
Reflection
What I learned
LumiBooks helped me practice product navigation, reading workflows, route organization and AI supported discovery features.
Future improvements
- Add automated tests around book/library API behavior.
- Improve empty states for library, wishlist, and reading history.
- Add clearer admin or catalog management boundaries if needed.
Deliberately omitted
- The portfolio keeps LumiBooks as the display name even where the source repository uses bookstore naming.
Verified From