← Back to Projects

IBDb: Internet Book Database

A collaborative full-stack web application for book discovery and personal library management

Overview and Summary

IBDb is a comprehensive web database application developed as a team project at James Madison University. The platform enables book enthusiasts to search an extensive database of books by title, author, or genre, create personalized user profiles, and manage custom reading lists. As a team lead and full-stack developer, I coordinated a four-person team to deliver a polished, feature-rich application that demonstrates proficiency in database design, backend development, frontend implementation, and project management.


The application showcases expertise in web development fundamentals, database architecture, and collaborative software engineering practices. With features like book search, user authentication, personalized reading lists, and dynamic data visualization, IBDb represents a complete, production-ready web application.

Project Information

Timeline

September 2024 - December 2024

Development Method

4-person collaborative full-stack development (Team Lead)

Primary Tech Stack

Python, PostgreSQL, HTML, CSS, JavaScript

Focus

Book discovery, user profiles, and personalized reading list management

Key Features

  • Advanced Book Search: Multi-criteria search functionality allowing users to find books by title, author, or genre with real-time database queries
  • User Profiles and Authentication: Personalized user accounts with secure authentication, enabling each user to maintain their own book collections
  • Custom Reading Lists: Users can create and manage personalized book collections, organized by reading status (Current Reads, To Be Read)
  • Data Visualization: Google Charts integration for dynamic visualization of book ratings, genres, and user statistics
  • Responsive Design: Professional front-end design with HTML and CSS providing seamless user experience across devices

Technologies and Skills

Backend Development

Python (Flask), PostgreSQL, API endpoints

Database Design

Schema design, SQL queries, views, optimization

Frontend Development

HTML5, CSS3, JavaScript, Google Charts API

Project Management

Team leadership, Agile methodologies, Git/GitHub

Implementation Highlights

Database Architecture

Designed and implemented a normalized PostgreSQL schema with multiple tables connected through foreign keys and complex relationships for efficient data management.

SQL Query Optimization

Created efficient queries and views for searching books, filtering by genre/author, and aggregating user ratings with JOINs, subqueries, and views.

Frontend Integration

Connected HTML forms and JavaScript event handlers to backend database queries for seamless user interactions and real-time data updates with Google Charts.

Learning Outcomes

  • Mastered complex SQL query writing including JOINs, views, and subqueries for efficient database operations
  • Developed full-stack web applications with integrated frontend and backend components
  • Led a technical team through the complete software development lifecycle from planning to deployment
  • Implemented secure user authentication and personalized user experiences in web applications
  • Designed and optimized relational database schemas for real-world applications
  • Applied Agile methodologies and collaborative development practices with version control

Future Enhancements and Features

  • Social Features: Add user-to-user book recommendations and social reading groups
  • Advanced Analytics: Implement personalized book recommendations using machine learning algorithms
  • Mobile App: Develop a mobile application for iOS and Android platforms
  • Integration with Libraries: Connect to public library systems for availability and borrowing
  • Review System: Enhanced user reviews with ratings, tags, and community engagement features

Code Segments

Here are examples of code from the IBDb project demonstrating various aspects of the application:

SQL - Database Views

CREATE VIEW reviewsbyrating AS
    SELECT b.title, b.genre, r.rating, r.reviewtext
    FROM book b
    JOIN review r ON b.bookid = r.bookid
    WHERE b.rating = (
        SELECT MAX(b2.rating)
        FROM book b2
        WHERE b2.rating = b.rating
    )
    ORDER BY rating DESC
    LIMIT 250;

CREATE VIEW ratingsbybook AS
    SELECT b.bookid, b.title, b.genre, r.rating, r.reviewtext
    FROM book b
    JOIN review r ON b.bookid = r.bookid;

CREATE VIEW authorinfo AS
    SELECT a.firstname, a.lastname, w.booktitle, w.awardtype
    FROM author a
    JOIN author_awards w ON a.authorid = w.authorid;

Python - Database Operations

########## author Table ##########
print("  author Table...")
cur.execute('SELECT userid FROM "user"')
user_ids = [row[0] for row in cur.fetchall()]
count = 1

rows = []
for user_id in user_ids:
    author_id = count
    count += 1
    last_name = fake.last_name()
    first_name = fake.first_name()
    state = fake.state()
    birth = fake.date_of_birth()
    color = fake.color_name()
    email = fake.email()
    bio = (
        f"{first_name} {last_name} is an author from {state} "
        f"and was born on {birth}."
    )
    rows.append((author_id, user_id, last_name, first_name, bio))

cur.executemany(
    """
    INSERT INTO author (authorid, userid, lastname, firstname, bio)
    VALUES (%s, %s, %s, %s, %s)
    """,
    rows
)
con.commit()

HTML and JavaScript - Frontend Interface

andlt;!DOCTYPE htmlandgt;
andlt;htmlandgt;
andlt;headandgt;
    andlt;titleandgt;Ratings By Bookandlt;/titleandgt;
    andlt;script type="text/javascript"
            src="https://www.gstatic.com/charts/loader.js"andgt;
    andlt;/scriptandgt;
andlt;/headandgt;
andlt;bodyandgt;
    andlt;h1andgt;Ratings By Bookandlt;/h1andgt;
    andlt;formandgt;
        andlt;label for="Book"andgt;Pick a BookID: andlt;/labelandgt;
        andlt;input type="text" name="BookID"
               value="{{ selected_book }}"andgt;
        andlt;input type="submit" value="Search"andgt;
    andlt;/formandgt;

    andlt;div id="table_div"andgt;andlt;/divandgt;
    andlt;div id="chart_div"andgt;andlt;/divandgt;
andlt;/bodyandgt;
andlt;/htmlandgt;