Bookshelf Application

Add your books to your bookshelf, tracking when books were read, and collect all your notes from each book. Provides a single location for keeping track of reading and note taking.

Links

• Project Overview
• Setup
• Requirements Documentation

Technologies

Back-End

• MySQL
• Spring Data JPA, Hibernate
• Spring Security
• JJWT
• Spring Data REST
• JUnit Jupiter, Mockito
• Maven, Google Jib

Front-End

• HTML5
• React
• Bootstrap 5
• CSS3

Process Analysis

• Handle Authentication and Authorization Exceptions:

  • Exception Handling in Spring Security: Add JwtAccessDeniedHandler to configuration and HttpResponse to security package
  • Authentication Entry Point and Authentication Exception: Clear context holder and set status to forbidden in AuthenticationController, add JwtAuthenticationEntryPoint and register with security configuration

• Create authentication hook:

  • useHooks hook for useAuth
  • useAuth hook example

• Add a Spring Data REST Projection to display author information within book query to simplify and reduce API queries

  "language": "English",
  "bookId": 1,
  "title": "War and Peace",
  "author": {
    "authorId": 1,
    "name": "Leo Tolstoy"
  },
  "pages": 1296
  

• Utilize React design patterns

  • Layout components
    • Background
    • ComponentList
    • SplitScreen
  • Custom hooks
    • useDataSource
    • useInput
  • Higher Order Components
    • withAuthor
    • withBooks

• Add styling using React styled-components and CSS Modules

• Parse reading log dates from JSON string values in JavaScript for date formatting

  • date appeared to be one day off due to time zone resolution while creating a new Date in JavaScript
  • used a regular expression as suggested here to convert dates from YYYY-MM-DD to YYYY/MM/DD before creating a new Date to for date formatting
  • example of parsing and formatting date:

    new Date("2022-12-13".replace(/-/g, '/')).toLocaleDateString()

• Simplify AppUserDetails implementation by extending Spring Security User

  • Reference

• Create Docker build script

• Remove arrow function from delete button to prevent excess re-rendering

  • Updated delete button

    const DeleteButton = memo(({ onClick }) => (
        <DangerButton text="Delete Book" handleClick={onClick} />
    ));

    const handleDelete = useCallback(() => {
        deleteBookById(bookId).then(navigate("/"));
    }, [bookId, navigate]);

  • Function Components with inner callbacks

Target Process

• Provide reading statistics (yearly and overall)
  • total books and pages read
  • books and pages read by language
• Add quotes to books
• Add notes to books
  • optionally tag note with topics

Resources

• Spring Data REST:
  • Reference Guide
  • Tutorial
  • Validators
  • Validator Testing
  • CORS Configuration
• React:
  • React Router
  • React styled-components
  • LinkedIn Learning Courses:
    • React: Building Styles with CSS Modules
    • React.js Essential Training
    • React: Accessibility
    • React: Design Patterns
    • React Hooks
    • Building Modern UIs with React Router v6
• Docker:
  • Introduction to Docker for Java Developers
• JUnit:
  • Java: Testing with JUnit