TopShelf - Cover Photo
Web Development - November 9, 2023

Top Shelf

Library Management System

MongoDB, Express.js, React.js, Node.js, Firebase

TopShelf is a user-centric library management system designed to allow users to browse, borrow, and return books easily. The platform features a responsive design, category-based book display, borrowing and return system, and robust user authentication with Firebase. It integrates JWT tokens for secure operations and allows users to download books as PDFs. TopShelf ensures a seamless experience across devices with key features focused on usability and security.

    Table of Content

    • Core Features
      • Book Management
      • Borrowing and Return System
      • Authentication and Security
      • Additional Features
    • Technology Stack
      • Frontend
      • Backend
      • Deployment
    • Project Overview
      • Introduction & Purpose
      • Book Categories and Details
      • Borrowing and Return System
      • User Authentication
      • PDF Download and User-Specific Features
      • Final Conclusion

Core Features

  • Book Management

    • Category-based book display for easy browsing.
    • Detailed book information with borrow or read options.
    • Each category links to a list of relevant books, with full book details available.

  • Borrowing and Return System

    • Borrow button prompts a modal for selecting return dates.
    • Borrowed Books page tracks borrowed books with return dates and a return button.
    • Borrowing decreases book quantity and adds books to user’s borrowed list.

  • Authentication and Security

    • Firebase authentication for secure user login (email/password or Google).
    • JWT token-based verification for secure CRUD operations on book-related pages.
    • Error handling implemented for registration and login forms.

  • Additional Features

    • Responsive design across desktop and mobile.
    • Theme toggle for dark/light modes.
    • Downloadable book pages in PDF format.
    • User-filtered borrowed books section.

Technology Stack

Frontend

  • React.js
  • Tailwind CSS
  • DaisyUI
  • Flowbite
  • React Icons
  • React Router
  • Firebase
  • Sonner
  • SwiperJS
  • react-rating

Backend

  • Node.js
  • Express.js
  • MongoDB
  • CORS
  • Dotenv
  • JWT
  • Axios

Deployment

  • Vercel
  • Firebase Hosting

Project Overview

Introduction & Purpose

TopShelf is a library management system built to efficiently manage book collections. I focused on developing an intuitive system for browsing, borrowing, and returning books. By implementing features such as book management, borrowing/returning systems, and secure user authentication, I gained hands-on experience in full-stack development, from the frontend interface to backend processes and security.

Book Categories and Details

TopShelf organizes books into distinct categories for easy browsing. Each book has detailed information and offers the option to borrow or read. I implemented a real-time book availability system, which involved manipulating the data flow between the frontend and backend. This required working with React for dynamic content updates and integrating MongoDB to track book status and availability.

TopShelf - Book CategoriesBook Categories

Borrowing and Return System

TopShelf - Borrow and Return ModalBorrow and Return Book Modal

The borrowing and return system in TopShelf allows users to borrow books by selecting return dates. I implemented this feature by creating modals for date selection, which interact with the backend to update book availability. I also developed the 'Borrowed Books' page where users can manage their borrowed books and view the return dates. The challenge here was ensuring accurate updates in real-time to reflect borrowing actions and availability.

  • Borrowing books triggers an update in the backend, which adjusts availability and adds the book to the user's borrowed list.
  • The borrowed books page displays details such as borrow and return dates, which I built using React to dynamically render content from the database.
  • Books can be returned by modifying the borrowed status and updating the book count in real-time, which required handling backend routes with Express.

User Authentication

I integrated Firebase authentication to allow users to sign up and log in using either email/password or Google login. This required setting up Firebase on the backend and ensuring that authentication tokens were stored securely. To further enhance security, I used JWT tokens to authenticate API requests and authorize CRUD operations on book data, making sure only authenticated users could perform certain actions.

TopShelf - Login PageLogin Page

PDF Download and User-Specific Features

I implemented a feature that allows users to download pages of books as PDFs. This involved integrating a PDF generation library on the frontend to convert book content into downloadable files. Additionally, I developed a user-specific borrowed books section to track individual borrowings. This section retrieves data from MongoDB and dynamically updates based on the authenticated user, which helped me improve my skills in working with data filtering and user-specific views.

TopShelf - Borrowed Books PageBorrowed Books Page

Final Conclusion

Developing TopShelf was an excellent opportunity to apply and refine my full-stack development skills. I gained extensive experience in frontend and backend development, working with technologies like React, Node.js, Express, and MongoDB. Implementing JWT authentication, real-time data updates, and PDF generation allowed me to deepen my understanding of web security, data management, and user interface development. Each feature presented its own challenges, and solving these helped me grow as a developer.