# mobarok6042/the-open-shelf-client architecture > Architecture diagram of the GitHub repository mobarok6042/the-open-shelf-client, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source. - Interactive diagram: https://gitdiagram.com/mobarok6042/the-open-shelf-client - Repository: https://github.com/mobarok6042/the-open-shelf-client ## Overview The Open Shelf is a community book-sharing frontend. Readers discover the catalog and book details, authenticate, contribute or edit books, and borrow or return copies; authenticated actions use the client API helper, which obtains a session token before calling the separately maintained Express API. The README documents these capabilities, while several route and catalog implementations were not sampled, so some subsystem links are documented rather than source-verified. Main entry points: [`src/lib/api.js`](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/lib/api.js) (Book API client), [`src/lib/auth-client.js`](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/lib/auth-client.js) (Auth client), [`src/components/AddBookForm.jsx`](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/AddBookForm.jsx) (Add book form), [`src/components/BookDetails.jsx`](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/BookDetails.jsx) (Book details) ## Diagram (Mermaid) ```mermaid flowchart TD subgraph group_discovery["Book discovery"] node_home["Home page
[page.js]"] node_arrivals["New arrivals
[NewArrivals.jsx]"] node_catalog["Book catalog
[BooksCatalog.jsx]"] node_details["Book details
[BookDetails.jsx]"] end subgraph group_identity["Accounts and profile"] node_signinform["Sign-in form
[SignInForm.jsx]"] node_signupform["Sign-up form
[SignUpForm.jsx]"] node_google["Google sign-in"] node_profile["Profile management
[ProfileDetails.jsx]"] node_authclient["Auth client
[auth-client.js]"] node_authroute["Auth routes
[route.js]"] node_authservice["Auth service
[auth.js]"] end subgraph group_shelf["Community shelves"] node_addform["Add book form
[AddBookForm.jsx]"] node_myshelf["My books
[MyBooks.jsx]"] node_editform["Edit book form
[EditBookForm.jsx]"] node_borrowed["Borrowed books
[BorrowedBooks.jsx]"] end subgraph group_shared["Shared services"] node_copies["Copy grouping
[book-copies.js]"] node_profileupload["Image upload route
[route.js]"] node_apihelper["Book API client
[api.js]"] node_loading["Loading indicators
[LoadingOverlay.jsx]"] node_spinner["Loading spinner
[LoadingSpinner.jsx]"] node_reveal["Motion reveal
[Reveal.jsx]"] end node_reader(("Reader")) node_mongodb[("MongoDB")] node_googleprovider["Google OAuth"] node_bookapi["Express book API"] node_reader -->|"visits"| node_home node_home -->|"renders"| node_arrivals node_reader -->|"browses"| node_catalog node_reader -->|"opens"| node_details node_arrivals -->|"loads titles"| node_apihelper node_catalog -.->|"loads catalog"| node_apihelper node_details -->|"loads book"| node_apihelper node_arrivals -->|"groups copies"| node_copies node_details -->|"counts copies"| node_copies node_reader -->|"signs in"| node_signinform node_reader -->|"creates account"| node_signupform node_signinform -->|"authenticates"| node_authclient node_signupform -->|"registers"| node_authclient node_google -->|"starts OAuth"| node_authclient node_authclient -.->|"requests auth"| node_authroute node_authroute -->|"dispatches"| node_authservice node_authservice -->|"stores identity"| node_mongodb node_authservice -->|"offers OAuth"| node_googleprovider node_reader -->|"manages profile"| node_profile node_profile -->|"reads session"| node_authclient node_reader -->|"contributes book"| node_addform node_reader -->|"manages books"| node_myshelf node_reader -->|"edits listing"| node_editform node_reader -->|"borrows or returns"| node_borrowed node_addform -->|"checks session"| node_authclient node_addform -->|"submits listing"| node_apihelper node_addform -.->|"uploads cover"| node_profileupload node_myshelf -->|"loads listings"| node_apihelper node_myshelf -->|"groups copies"| node_copies node_editform -->|"loads and saves"| node_apihelper node_editform -->|"uploads cover"| node_profileupload node_borrowed -->|"manages borrowing"| node_apihelper node_apihelper -->|"gets token"| node_authroute node_apihelper -->|"sends requests"| node_bookapi node_reader -.->|"borrows and returns"| node_bookapi node_addform -->|"shows progress"| node_loading node_details -->|"shows progress"| node_loading node_borrowed -->|"reveals content"| node_reveal node_loading -->|"renders"| node_spinner node_home -->|"reveals sections"| node_reveal click node_home "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/app/page.js" click node_arrivals "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/NewArrivals.jsx" click node_catalog "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/BooksCatalog.jsx" click node_details "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/BookDetails.jsx" click node_copies "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/lib/book-copies.js" click node_signinform "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/SignInForm.jsx" click node_signupform "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/SignUpForm.jsx" click node_google "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/GoogleAuthButton.jsx" click node_profile "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/ProfileDetails.jsx" click node_authclient "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/lib/auth-client.js" click node_authroute "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/app/api/auth/%5B...all%5D/route.js" click node_authservice "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/lib/auth.js" click node_addform "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/AddBookForm.jsx" click node_myshelf "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/MyBooks.jsx" click node_editform "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/EditBookForm.jsx" click node_borrowed "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/BorrowedBooks.jsx" click node_profileupload "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/app/api/profile-photo/route.js" click node_apihelper "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/lib/api.js" click node_loading "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/LoadingOverlay.jsx" click node_spinner "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/LoadingSpinner.jsx" click node_reveal "https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/Reveal.jsx" classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554 classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337 classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81 classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a class node_home,node_arrivals,node_catalog,node_details toneBlue class node_signinform,node_signupform,node_google,node_profile,node_authclient,node_authroute,node_authservice,node_mongodb toneAmber class node_addform,node_myshelf,node_editform,node_borrowed,node_bookapi toneMint class node_copies,node_profileupload,node_apihelper,node_loading,node_spinner,node_reveal toneRose class node_reader,node_googleprovider toneIndigo ``` ## Components ### Book discovery - [Home page](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/app/page.js): `src/app/page.js` - [New arrivals](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/NewArrivals.jsx): `src/components/NewArrivals.jsx` - [Book catalog](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/BooksCatalog.jsx): `src/components/BooksCatalog.jsx` - [Book details](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/BookDetails.jsx): `src/components/BookDetails.jsx` ### Accounts and profile - [Sign-in form](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/SignInForm.jsx): `src/components/SignInForm.jsx` - [Sign-up form](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/SignUpForm.jsx): `src/components/SignUpForm.jsx` - [Google sign-in](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/GoogleAuthButton.jsx): `src/components/GoogleAuthButton.jsx` - [Profile management](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/ProfileDetails.jsx): `src/components/ProfileDetails.jsx` - [Auth client](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/lib/auth-client.js): `src/lib/auth-client.js` - [Auth routes](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/app/api/auth/%5B...all%5D/route.js): `src/app/api/auth/[...all]/route.js` - [Auth service](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/lib/auth.js): `src/lib/auth.js` ### Community shelves - [Add book form](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/AddBookForm.jsx): `src/components/AddBookForm.jsx` - [My books](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/MyBooks.jsx): `src/components/MyBooks.jsx` - [Edit book form](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/EditBookForm.jsx): `src/components/EditBookForm.jsx` - [Borrowed books](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/BorrowedBooks.jsx): `src/components/BorrowedBooks.jsx` ### Shared services - [Copy grouping](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/lib/book-copies.js): `src/lib/book-copies.js` - [Image upload route](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/app/api/profile-photo/route.js): `src/app/api/profile-photo/route.js` - [Book API client](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/lib/api.js): `src/lib/api.js` - [Loading indicators](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/LoadingOverlay.jsx): `src/components/LoadingOverlay.jsx` - [Loading spinner](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/LoadingSpinner.jsx): `src/components/LoadingSpinner.jsx` - [Motion reveal](https://github.com/mobarok6042/the-open-shelf-client/blob/main/src/components/Reveal.jsx): `src/components/Reveal.jsx` ### Other components - **Reader** - **MongoDB** - **Google OAuth** - **Express book API** ## Connections - Reader → Home page: visits - Home page → New arrivals: renders (evidence: `src/app/page.js`) - Reader → Book catalog: browses - Reader → Book details: opens - New arrivals → Book API client: loads titles (evidence: `src/components/NewArrivals.jsx`) - Book catalog → Book API client: loads catalog - Book details → Book API client: loads book (evidence: `src/components/BookDetails.jsx`) - New arrivals → Copy grouping: groups copies (evidence: `src/components/NewArrivals.jsx`) - Book details → Copy grouping: counts copies (evidence: `src/components/BookDetails.jsx`) - Reader → Sign-in form: signs in - Reader → Sign-up form: creates account - Sign-in form → Auth client: authenticates (evidence: `src/components/SignInForm.jsx`) - Sign-up form → Auth client: registers (evidence: `src/components/SignUpForm.jsx`) - Google sign-in → Auth client: starts OAuth (evidence: `src/components/GoogleAuthButton.jsx`) - Auth client → Auth routes: requests auth - Auth routes → Auth service: dispatches (evidence: `src/app/api/auth/[...all]/route.js`) - Auth service → MongoDB: stores identity (evidence: `src/lib/auth.js`) - Auth service → Google OAuth: offers OAuth (evidence: `src/lib/auth.js`) - Reader → Profile management: manages profile - Profile management → Auth client: reads session (evidence: `src/components/ProfileDetails.jsx`) - Reader → Add book form: contributes book - Reader → My books: manages books - Reader → Edit book form: edits listing - Reader → Borrowed books: borrows or returns - Add book form → Auth client: checks session (evidence: `src/components/AddBookForm.jsx`) - Add book form → Book API client: submits listing (evidence: `src/components/AddBookForm.jsx`) - Add book form → Image upload route: uploads cover - My books → Book API client: loads listings (evidence: `src/components/MyBooks.jsx`) - My books → Copy grouping: groups copies (evidence: `src/components/MyBooks.jsx`) - Edit book form → Book API client: loads and saves (evidence: `src/components/EditBookForm.jsx`) - Edit book form → Image upload route: uploads cover (evidence: `src/components/EditBookForm.jsx`) - Borrowed books → Book API client: manages borrowing (evidence: `src/components/BorrowedBooks.jsx`) - Book API client → Auth routes: gets token (evidence: `src/lib/api.js`) - Book API client → Express book API: sends requests - Reader → Express book API: borrows and returns - Add book form → Loading indicators: shows progress (evidence: `src/components/AddBookForm.jsx`) - Book details → Loading indicators: shows progress (evidence: `src/components/BookDetails.jsx`) - Borrowed books → Motion reveal: reveals content (evidence: `src/components/BorrowedBooks.jsx`) - Loading indicators → Loading spinner: renders (evidence: `src/components/LoadingOverlay.jsx`) - Home page → Motion reveal: reveals sections (evidence: `src/app/page.js`)