Personal Library

This web app is an interactive list of my favorite books with an AI-generated analysis of my personality based on the library books.

Table of Contents

• Features
• Technologies Used
• Getting Started
  • Prerequisites
  • Installation
  • Running the Application
• Contributing
• Future Enhancements

Features

• Interactive Book List: Browse through my favorite books, organized and filterable by genre and reading status.
• Library Card Design: Each book is displayed as a library card, with stamped dates and fictional character names as the borrower.
• AI Personality Analysis: Gain insights into my personality based on the books in my library, offering a unique way to learn more about me.
• Goodreads Integration: Clicking on a library card links to the Goodreads page for that book, allowing users to explore more details.
• Accessibility: The page is fully accessible and passes an axe DevTools scan with no violations.

Technologies Used

• UI and Frontend: React, Radix UI, Tailwind CSS
• Build Tool: Vite
• Carousel: Embla Carousel React
• Icons: Lucide React
• Utilities: clsx, class-variance-authority, tailwind-merge
• Testing: Jest, Testing Library (React, User Event, Jest DOM)
• TypeScript Support: Type definitions for Jest, Node, React DOM
• Hosting: Vercel
• Accessibility Testing: axe DevTools
• Design: Figma (Mockup Link)

Getting Started

Prerequisites

Ensure you have the following installed on your system:

• Node.js (v16 or higher recommended)
• npm (comes with Node.js)

Installation

1. Clone the repository:

   git clone https://github.com/your-username/personal-library.git

2. Navigate to the project directory:

   cd personal-library

3. Install dependencies:

   npm install

Running the Application

Start the development server:

npm run dev

The application will be available at http://localhost:3000.

Contributing

Contributions are welcome! To contribute:

1. Fork the repository.
2. Create a new branch for your feature or bugfix:

   git checkout -b feature-name

3. Commit your changes:

   git commit -m "Description of changes"

4. Push to your branch:

   git push origin feature-name

5. Open a pull request.

Please ensure your code adheres to the project's coding standards and includes relevant tests.

Future Enhancements

• Fully responsive layout across all devices.
• Server-Side Rendering (SSR) implementation for better performance and SEO.
• Redesign genre and status filtering to decouple logic and improve maintainability.
• Fetch book data via API or store in a database (Goodreads no longer supports their API).
• Ensure semantic correctness by using links instead of buttons for navigation.
• Add comprehensive unit tests for all components to improve reliability.
• Improve AI analysis accuracy by integrating a more advanced model.
• AI-powered recommendations for new books based on current books.
• Screen reader testing with NVDA to ensure accessibility for visually impaired users.
• Adopt a feature-based folder structure for better scalability and maintainability.
• Use a robust state management library like Redux Toolkit or Zustand for predictable state handling.
• Achieve at least 80% test coverage and add end-to-end (E2E) tests using Cypress or Playwright.
• Enable strict mode in TypeScript and define reusable types/interfaces for API responses and component props.
• Use design tokens for consistent theming and consider CSS-in-JS libraries for dynamic styling needs.
• Optimize performance with React.memo, useCallback, code-splitting, and lazy loading.
• Implement a service layer for API calls and use caching libraries like React Query or SWR.
• Set up CI/CD pipelines with GitHub Actions for automated testing and deployment.
• Add changelog.
• Implement a global error boundary and log errors to a service like Sentry.
• Audit dependencies for vulnerabilities.
• Integrate analytics tools like Google Analytics or Mixpanel to track user interactions.
• Add feature flags with LaunchDarkly.

I hope you enjoy learning more about me as an engineer and a person 📚