Extras/Maple Street Library

This is a single-page React + Vite app for the Maple Street Library team. The UI is wired up to helper functions that you will implement.
πŸ‘¨β€πŸ’Ό We need this dashboard to show accurate library activity. Your task is to complete the helper utilities so the catalog, rooms, events, and member activity sections all populate with real data.

Your assignment

  • src/utils/practice.ts
    β€” implement the utilities for the dashboard
  • src/data/library-data.ts
    β€” review the live dataset
  • src/app.tsx
    β€” confirm the UI renders accurate results

Required exports (already named in practice.ts)

Implement each function to match these observable behaviors against library-data.ts:
  1. getCheckedOutBooks(books) β†’ books that have a checkedOutByMemberId
  2. getAvailableBooks(books) β†’ books that do not have a checkedOutByMemberId
  3. getUniqueTags(books) β†’ a Set<string> of every tag across all books
  4. getTagCounts(books) β†’ { [tag]: count } for every tag occurrence
  5. getMemberLookup(members) β†’ { [memberId]: member }
  6. getBooksByMemberId(books) β†’ a Map<memberId, Book[]> of checked-out books grouped by the borrowing member (skip books that are not checked out)
  7. getEventList(eventsById) β†’ an array of all events from eventsById
  8. getEventSummaries(eventsById) β†’ an array of { id, name } for each event
  9. getRoomList(roomsById) β†’ an array of all rooms from roomsById
  10. addBook(books, newBook) β†’ a new array with newBook appended; do not mutate the input array
  11. mergeTags(...tagLists) β†’ one unique string array (first-seen order is fine)
  12. summarizeLibrary(library) β†’ { totalBooks, totalMembers, totalEvents, checkedOut } where each field reflects the library's books, members, events, and checked-out book count
  13. formatMember({ name, email }) β†’ the member's name alone when there is no email, otherwise the name with the email in parentheses
Until helpers are implemented, the UI intentionally shows empty/loading states (including a "Member labels are still loading." message while formatMember returns an empty string). You'll know you're done when those placeholders disappear and the snapshot counts match the dataset.
Edit
extradiffchat

Please set the playground first

Loading "Maple Street Library"
Login to get access to the exclusive discord channel.
Loading Discord Posts