Rubber Duck Thursdays - Building a reading tracker

Key Concepts

• Rubber Duck Thursdays: Weekly live coding streams.
• GitHub Copilot: AI pair programmer with features like agent mode.
• General Availability (GA): Feature is stable and ready for widespread use.
• Agent Mode: Copilot handles tasks autonomously based on prompts.
• Model Context Protocol (MCP): Helps Copilot ground responses in context.
• "For the Love of Code": GitHub's summer hackathon encouraging fun and creative projects.
• Open Library API: Free API from the Internet Archive for book data.
• Express.js: Node.js web application framework.
• SQLite: Lightweight, file-based database.
• View Engine (EJS): Template engine for rendering dynamic HTML.
• API endpoint : A specific URL that an API provides to access its resources or services
• Cover ID (or Image value): ID used in the Cover API URLs to fetch book covers.
• Works API
• Search API

1. Introduction and Updates (0:00-5:00)

• Kevin hosts the Rubber Duck Thursdays stream on LinkedIn, Twitch, and YouTube.
• The stream focuses on building projects and engaging with the audience.
• Updates since the last stream include:
  • Agent mode for JetBrains, Eclipse, and Xcode is now generally available.
  • Support for issue forms in chat and file uploads in spaces.
  • Ability to configure internet access for co-pilot coding agents.
  • GitHub Copilot coding agent uses one premium request per session, making it cheaper and more predictable.
• "GitHub copilot's coding agent now uses one premium request per session so it is per session so it's both cheaper and predictable"

2. "For the Love of Code" Hackathon (5:00-15:00)

• Introduction of the "For the Love of Code" hackathon, running from yesterday through September 22nd.
• The hackathon encourages participants to build fun, weird, or useful projects.
• Prizes include 12 months of GitHub Copilot Pro Plus and internet immortality.
• Categories:
  • Hardware hacks: Utilizing existing hardware.
  • AI-powered experiences: Building AI agents or bots (e.g., an LLM-powered change log writer).
  • Terminal talent: Command-line tools, extensions, and TUIs.
  • Building games: Using libraries like p5.js (a JavaScript library based on Processing).
  • Worldwide wonders: Web builds and extensions.
  • Everything else: A general category for any fun projects.

3. Project Idea: Reading Tracker App (15:00-20:00)

• The project is to build a simple app to track books read.
• Features:
  • Track when a book was finished.
  • Nice rendering of book information.
• Using the Open Library API from the Internet Archive to fetch book data.
• The plan is to:
  • Build a search UI.
  • Save books to a SQLite database.

4. Setting up the Project with Copilot Agent Mode (20:00-25:00)

• Using Copilot's agent mode to boilerplate an Express project with:
  • package.json with dependencies.
  • Express server with basic routes.
  • SQLite database setup.
  • EJS view engine.
  • Basic project structure.
• Copilot creates routes for viewing, editing, and adding books.
• The initial setup includes some sample books in the database.

5. Simplifying the Data Model and Database (25:00-30:00)

• Simplifying the data model to primarily use the Open Library ID.
• The database will store minimal information, fetching additional details from the API as needed.
• Removing the initial seed values from the database as they are not accurate.

6. Implementing the Search Interface (30:00-40:00)

• Replacing the "add new book" page with a search interface using the Open Library API.
• Using Axios for making API calls.
• Adding a new route for search.
• Adding an "add to collection" button for each book in the search results.
• Stripping out Bootstrap styling for simpler semantic HTML and vanilla JavaScript.
• "Completely rip out Bootstrap. Doesn't need styling. Just give me basic semantic HTML, please. And vanilla J S. I'm done with this. not playing this game anymore."

7. Handling Database and UI Issues (40:00-50:00)

• Addressing issues with Bootstrap integration and styling.
• Key steps:
  • Adding books to the database and then editing them
  • Adding date when I read a book
  • Simplifying UI
• The app needs a "read date" field and a timeline/diary feature to log reading progress.

8. Implementing Image Display and Cover API (50:00-1:30:00)

• Investigating the Open Library API to fetch book covers using the Open Library ID.
• Challenges:
  • Inconsistent data and different IDs.
  • Figuring out the correct URL structure for cover images.
  • Identifying the correct key for cover images.
• The values for works is "/works/..." while the value for the cover image ID is "/books/..."
• Discovering that cover edition key is the correct value, where it has the structure /books/...

9. Correcting the Data Model, Image URLs, and Bug Fixes (1:30:00-1:45:00)

• Correcting the data model to store cover edition key and removing unnecessary keys.
• Realizing that the image URL requires the simple ID.
• Update the app to: Grab and store the cover I value and then change the image URLs wherever used to be slash ID/image instead of slashol ID slash image image image.
• Fixing the issues that the search results do not include the cover edition key
• Implementing logic to check and store the cover image when available

10. Final Touches and Demo (1:45:00-2:00:00)

• Re-initializes the database to ensure correct data.
• Demonstrates the working app:
  • Searching for books.
  • Adding books to the collection.
  • Viewing individual book details.
  • Displaying cover images.
  • Editing book information.
  • Deleting books.
• The app now successfully fetches and displays book information and cover images from the Open Library API.

11. Conclusion and Hackathon Reminder (2:00:00-2:04:00)

• A fully functional application has been built that connects to the Open Library API.
• A final reminder about the "For the Love of Code" hackathon and encouraging participation.

Synthesis/Conclusion

The stream successfully built a functional reading tracker application using GitHub Copilot and the Open Library API. While there were challenges in the beginning with data inconsistencies and figuring out the API, the host and the chat worked together to find solutions. The final result is a basic application that meets the requirements of tracking and displaying the books a user has read.