CollectTracker

A desktop application for managing collections built with React, Express, and Electron. Below is a breakdown of each of the project files as well as links to show corresponding code

React Express Electron SQLite
Download GitHub Repo

Frontend - Client Folder

React HTML CSS JavaScript

AddCollectionForm

Description

Modal form component that handles the creation of new collections through a modal interface. Provides a form with collection name input and type selection (Generic, Books, Records, or Custom).

View Code on GitHub

Key Functions

  • handleSubmit() - Processes form submission and creates new collection via API call
  • State Management:
    • isModalOpen - Controls modal visibility
    • formData - Manages form inputs (name, type, customType)
  • Collection Types: Generic, Books, Records, Custom

Props

  • onCollectionAdded - Callback function triggered when a new collection is successfully created

AddItemForm

Description

Modal form component that handles the creation of new items within a collection. Provides dynamic form fields based on collection type (books, records, or generic) with support for custom fields.

View Code on GitHub

Key Functions

  • handleSubmit() - Processes form submission and creates new item via API call
  • getFieldsByType() - Returns appropriate fields based on collection type
  • addCustomField() - Allows users to add custom fields to their form

Collection Types & Fields

  • Books: Title, Published, Edition, Publisher, Obtained From, Unique Features, Personal Note, Translation Details
  • Records: Title, Condition, Value, Label, Matrix #, Variation, Country, Pressing, Notes
  • Generic: Title, Description
  • Custom: Basic fields plus user-defined custom fields

Props

  • collectionType - Determines which form fields to display
  • onItemAdded - Callback function triggered when a new item is successfully created

CategoryItem

Description

Interactive component that manages individual category display, editing, and deletion. Features context menu for actions and inline editing capabilities.

View Code on GitHub

Key Functions

  • handleEdit() - Activates inline editing mode for category name
  • handleSave() - Processes and saves edited category name
  • handleDelete() - Initiates deletion process with confirmation
  • confirmDelete() - Executes category deletion after confirmation

State Management

  • showMenu - Controls context menu visibility
  • showDeleteConfirm - Controls delete confirmation dialog
  • isEditing - Controls edit mode state
  • editedName - Stores temporary category name during editing

Props

  • category - Object containing category data (id, name)
  • onEdit - Callback for category name updates
  • onDelete - Callback for category deletion
  • isSelected - Boolean for selected state
  • onSelect - Callback when category is selected

CategoryModal

Description

Modal component that manages category assignments for collection items. Provides a checkbox interface for selecting multiple categories and handles the saving of these assignments.

View Code on GitHub

Key Functions

  • toggleCategory() - Handles individual category selection/deselection
  • handleSave() - Processes and saves selected categories

State Management

  • selectedCategories - Set containing IDs of selected categories

Props

  • item - The collection item being categorized
  • categories - Array of available categories
  • onClose - Callback to close the modal
  • onSave - Callback to save category assignments
  • currentCategories - Array of categories currently assigned to the item

CollectionList

Description

Core component that manages the display and operations for all user collections. Features a responsive grid layout with collection cards, search functionality, sorting options, and modal interfaces for collection management.

View Code on GitHub

Key Functions

  • fetchCollections() - Retrieves collections from API
  • getSortedCollections() - Handles collection sorting logic
  • handleAddCollection() - Processes new collection creation
  • handleSaveEdit() - Manages collection updates
  • handleDelete() - Processes collection deletion
  • handleCollectionClick() - Handles navigation to collection details

State Management

  • collections - Array of all user collections
  • filteredCollections - Filtered/sorted collection array
  • searchTerm - Current search filter
  • sortOption - Current sort preference
  • showDeleteModal - Delete confirmation visibility
  • showAddModal - Add collection form visibility
  • editingCollection - Currently edited collection

Features

  • Search: Filter collections by name or type
  • Sort Options:
    • Name (A-Z/Z-A)
    • Creation Date (Newest/Oldest)
    • Item Count (Most/Least)
  • Collection Types: Generic, Books, Records, Custom
  • Modal Interfaces: Add, Edit, Delete confirmations

CollectionPage

Description

Core interface component for managing individual collections. Provides comprehensive functionality for item management, category organization, searching, sorting, and collection metadata handling.

View Code on GitHub

Key Functions

  • refreshItemsAndCategories() - Synchronizes items and categories data with server
  • handleDescriptionChange() - Updates collection description
  • handleAddCategory() - Creates new categories
  • handleUpdateCategories() - Manages item categorization
  • handleItemAdded() - Processes new item creation
  • handleItemDelete() - Manages item deletion

State Management

  • collection - Current collection data
  • items - Array of collection items
  • categories - Collection categories
  • selectedCategory - Active category filter
  • searchTerm - Current search filter
  • sortOption - Active sort preference

Features

  • Item Management: Add, edit, delete items
  • Category System: Create, edit, delete categories and assign to items
  • Search & Sort: Filter items by title and multiple sort options
  • Collection Value: Automatic value calculation for record collections
  • Description Editor: Manage collection descriptions
  • Responsive Layout: Sidebar and main content organization

Dependencies

  • Components: AddItemForm, ItemCard, Sidebar, SearchSortControls, CollectionValue
  • Router: useParams, useNavigate from react-router-dom
  • API: Requires backend endpoints for CRUD operations

CollectionValue

Description

Specialized component that calculates and displays the total monetary value of a collection by aggregating individual item values. Features robust JSON parsing and formatted currency display.

View Code on GitHub

Key Functions

  • Value Calculation: Reduces array of items to sum total value
  • Data Parsing: Safely handles JSON parsing of item data
  • Currency Formatting: Displays values with proper decimal places

Props

  • items - Array of collection items containing value data in their data property

Features

  • Error Handling: Graceful handling of JSON parsing errors
  • Default Values: Defaults to 0 for items without value data
  • Locale Support: Uses US locale for currency formatting

EditItemModal

Description

Advanced modal component that provides type-specific forms for editing collection items. Features dynamic field generation, file upload handling, and complex data structure management.

View Code on GitHub

Key Functions

  • getFieldsByType() - Returns appropriate fields based on collection type
  • handleSubmit() - Processes form submission with multipart data
  • Data Parsing - Handles nested JSON structures and image uploads

Field Configurations

  • Books: Title, Published, Edition, Publisher, Unique Features, Translation Details
  • Records: Title, Condition, Value, Label, Matrix #, Variation, Country, Pressing
  • Generic: Title, Description

Props

  • item - Current item being edited
  • type - Collection type (books, records, generic)
  • onClose - Modal close callback
  • onSave - Successful save callback

Features

  • Dynamic Forms: Type-specific field generation
  • File Handling: Cover image upload support
  • Data Validation: Required field enforcement
  • Error Handling: Robust JSON parsing and API error management

ItemCard

Description

Comprehensive component for displaying and managing individual collection items. Features rich interaction options including image display, category management, detailed information viewing, and photo gallery functionality.

View Code on GitHub

Key Features

  • Item Display: Image preview with type-specific placeholders
  • Interactive Menus: Context menu for edit/delete operations
  • Modal Interfaces:
    • Detailed item information
    • Category management
    • Photo gallery
    • Edit form
    • Delete confirmation
  • Dynamic Fields: Type-specific field configurations for books and records

Props

  • item - Item data object
  • type - Collection type (books, records, etc.)
  • categories - Available categories
  • onUpdateCategories - Category update handler
  • onDelete - Item deletion handler
  • onRefresh - Data refresh handler

State Management

  • showDetails - Controls detailed view modal
  • showCategoryModal - Controls category management modal
  • showMenu - Controls context menu visibility
  • showDeleteConfirm - Controls delete confirmation dialog
  • showEditModal - Controls edit form modal
  • showGalleryModal - Controls photo gallery modal

Dependencies

  • CategoryModal
  • EditItemModal
  • PhotoGalleryModal
  • API_BASE_URL configuration

MainLayout

Description

Core structural component that serves as the primary wrapper for the application. Provides the main container and layout management for the CollectionList component.

View Code on GitHub

Structure

  • main-layout: Root container class
  • content: Inner content wrapper

Dependencies

  • CollectionList: Primary content component
  • MainLayout.css: Styling definitions

Features

  • Centralized layout management
  • Consistent styling container
  • Responsive design structure

PhotoGalleryModal

Description

Advanced modal component that provides a comprehensive photo gallery interface for collection items. Features carousel navigation, multi-photo upload capabilities, and photo management tools.

View Code on GitHub

Key Functions

  • fetchPhotos() - Retrieves photo list from API
  • handleFileUpload() - Manages multiple photo uploads
  • handleDeletePhoto() - Processes photo deletion
  • nextPhoto/previousPhoto() - Handles carousel navigation

State Management

  • photos - Array of item photos
  • currentPhotoIndex - Active photo position
  • isUploading - Upload status indicator

Props

  • item - Current item being viewed
  • onClose - Modal close handler
  • onRefresh - Data refresh handler

Features

  • Photo Display:
    • Carousel navigation
    • Photo counter
    • Error handling for image loading
  • Upload Capabilities:
    • Multiple file selection
    • Progress indication
    • Sequential upload handling
  • Photo Management:
    • Individual photo deletion
    • Automatic index adjustment
    • Gallery state persistence

SearchSortControls

Description

Flexible control component that combines search and sort functionality in a clean interface. Provides real-time filtering and sorting capabilities with customizable options.

View Code on GitHub

Props

  • searchTerm - Current search value
  • onSearchChange - Search input handler
  • sortOption - Current sort selection
  • onSortChange - Sort selection handler
  • sortOptions - Array of available sort options
  • searchPlaceholder - Custom placeholder text

Features

  • Search Input:
    • Real-time filtering
    • Customizable placeholder
    • Controlled input handling
  • Sort Dropdown:
    • Dynamic option rendering
    • Controlled selection state
    • Flexible option configuration

Structure

  • search-and-sort: Main container
  • search-container: Search input wrapper
  • sort-container: Sort dropdown wrapper

Sidebar

Description

Comprehensive sidebar component that manages collection categories and descriptions. Provides intuitive interfaces for category management and collection description editing.

View Code on GitHub

Props

  • categories - Array of available categories
  • selectedCategory - Currently selected category ID
  • setSelectedCategory - Category selection handler
  • onAddCategory - New category creation handler
  • onEditCategory - Category edit handler
  • onDeleteCategory - Category deletion handler
  • showAddCategory - Controls add category form visibility
  • setShowAddCategory - Toggle add category form
  • newCategoryName - New category input value
  • setNewCategoryName - New category name update handler
  • description - Collection description text
  • onDescriptionChange - Description update handler
  • collectionName - Name of current collection

Features

  • Category Management:
    • Add new categories
    • Edit existing categories
    • Delete categories
    • Category selection
  • Description Editor:
    • Multi-line text input
    • Real-time updates
    • Placeholder support

Structure

  • sidebar-container: Main wrapper
  • categories-header: Category section header
  • categories-list: Category items container
  • description-section: Description editor area

Dependencies

  • CategoryItem component
  • Sidebar.css styles

App.js

Description

Root component of the CollectTracker application that establishes the primary routing and application structure.

View Code on GitHub

Key Features

  • Routing System: Implements React Router for navigation
  • Application Structure: Defines main layout and header
  • Route Management: Handles primary route definitions

Routes

  • "/" - Main collection list view (MainLayout)
  • "/collection/:id" - Individual collection view (CollectionPage)

Dependencies

  • react-router-dom
  • MainLayout component
  • CollectionPage component
  • App.css styles

config.js

Description

Configuration management file that handles environment-specific settings and API endpoint configuration for the CollectTracker application.

View Code on GitHub

Key Features

  • Environment Detection: Automatically determines development or production environment
  • Dynamic API URL: Sets appropriate API base URL based on environment
  • Centralized Configuration: Single source for API endpoint management

Configuration Values

  • Development URL: http://localhost:5000/api
  • Production URL: /api

Usage

  • Import and use API_BASE_URL for all API requests
  • Automatically adapts to current environment
  • Simplifies deployment configuration

index.js

Description

Entry point of the CollectTracker React application that handles core initialization, rendering, and performance monitoring setup.

View Code on GitHub

Key Features

  • React Initialization: Sets up the root React element
  • Strict Mode: Enables additional development checks
  • Performance Monitoring: Configures web vitals reporting

Core Functions

  • ReactDOM.createRoot(): Creates the main application root
  • root.render(): Renders the App component
  • reportWebVitals(): Initializes performance tracking

Dependencies

  • react
  • react-dom
  • App component
  • index.css styles
  • reportWebVitals utility

package.json (client)

Description

Configuration file that manages dependencies, scripts, and project settings for the CollectTracker client application.

View Code on GitHub

Core Dependencies

  • React: v18.2.0 - Frontend framework
  • React Router: v6.22.0 - Navigation management
  • React Scripts: v5.0.1 - Build tools and configuration
  • Testing Libraries: Jest and React Testing Library

Development Tools

  • Storybook: Component development environment
  • ESLint: Code quality and style checking
  • Webpack: Module bundling
  • PropTypes: Runtime type checking

Available Scripts

  • npm start: Runs development server
  • npm build: Creates production build
  • npm test: Runs test suite
  • npm run storybook: Launches Storybook on port 6006

Backend - Server Folder

Node.js SQLite JavaScript Express

collections.js

Description

Core router handling all collection and item-related operations including CRUD operations, image management, and category associations.

View Code on GitHub

Collection Endpoints

  • POST / - Create new collection
  • GET / - Retrieve all collections with item counts
  • PUT /:id - Update collection details
  • DELETE /:id - Delete collection and its items
  • GET /:id - Get single collection by ID

Item Management

  • POST /:collectionId/items - Add new item with image support
  • GET /:collectionId/items - Get all items in collection
  • PUT /:collectionId/items/:itemId - Update item details
  • DELETE /:collectionId/items/:itemId - Remove item from collection

Image Handling

  • GET /items/:itemId/image - Retrieve item's cover image
  • GET /items/:itemId/photos - Get all item photos
  • POST /:collectionId/items/:itemId/photos - Upload new photo
  • DELETE /items/:itemId/photos/:photoId - Remove photo

Dependencies

  • express - Web framework
  • multer - Image upload handling
  • db.config - Database configuration

categories.js

Description

Router handling all category-related operations, including category management and item-category associations.

View Code on GitHub

Category Management

  • GET /collections/:id/categories - List all categories in a collection
  • POST /collections/:id/categories - Create new category
  • PUT /collections/:collectionId/categories/:categoryId - Update category
  • DELETE /collections/:collectionId/categories/:categoryId - Remove category

Item-Category Operations

  • POST /items/:itemId/categories/:categoryId - Assign category to item
  • DELETE /items/:itemId/categories/:categoryId - Remove category from item
  • GET /items/:itemId/categories - List item's categories

Key Features

  • Category Management: Full CRUD operations for categories
  • Association Handling: Manages item-category relationships
  • Data Validation: Checks for existing relationships and valid IDs
  • Cascade Deletion: Removes associated records when deleting categories

Dependencies

  • express - Web framework
  • db.config - Database configuration

index.js (server)

Description

Main server entry point that configures Express application, middleware, routes, and database connections.

View Code on GitHub

Server Configuration

  • Port: Uses PORT environment variable or defaults to 5000
  • CORS: Enabled for cross-origin requests
  • Body Parser: Handles JSON and URL-encoded data up to 50MB
  • File Upload: Configured with multer for memory storage

API Routes

  • /api/collections/* - Collection management endpoints
  • /api/* - Category management endpoints
  • /test - Server health check endpoint
  • /db-test - Database connection test endpoint

Dependencies

  • express - Web application framework
  • cors - Cross-origin resource sharing
  • dotenv - Environment variable management
  • multer - File upload handling
  • db.config - Database configuration

package.json (Server)

Description

Node.js package configuration file managing server dependencies, scripts, and project metadata.

View Code on GitHub

Core Dependencies

  • express (^4.21.2): Web application framework
  • sqlite3 (^5.1.7): SQLite database driver
  • electron (^35.1.2): Desktop application framework
  • electron-builder (^26.0.12): Application packaging

Middleware Dependencies

  • cors (^2.8.5): Cross-origin resource sharing
  • multer (^1.4.5-lts.2): File upload handling
  • dotenv (^16.4.7): Environment configuration
  • mysql2 (^3.14.0): MySQL database support

Scripts

  • start: node index.js
  • test: Test script placeholder

db.config.js

Description

Database configuration and initialization module that sets up SQLite database, creates tables, and provides promise-based database operations.

View Code on GitHub

Database Schema

  • collections: Stores collection metadata and details
  • items: Manages individual items within collections
  • categories: Handles categorization system
  • item_categories: Maps items to categories
  • images: Stores item cover images
  • item_photos: Manages additional item photos

Key Features

  • Path Management: Dynamic database location based on environment
  • Auto-initialization: Creates tables if they don't exist
  • Promise Support: Async wrapper for SQLite operations
  • Error Handling: Robust database operation error management

Exported Methods

  • all(): Retrieve multiple rows
  • run(): Execute SQL commands
  • get(): Fetch single row

Main Process

Electron Node.js JavaScript

main.js

Description

Core Electron main process file that integrates the Express server with the desktop application, manages file system operations, and handles inter-process communication.

View Code on GitHub

Key Features

  • Environment Detection: Dynamically configures paths based on development or production environment
  • Express Integration: Embeds the backend server within the Electron application
  • File System Management: Handles database directory creation and file operations
  • IPC Handlers: Implements import/export functionality for collections
  • Comprehensive Logging: Detailed electron-log implementation for debugging

Application Flow

  • Server Initialization: Starts Express server on port 3456 (configurable)
  • Window Creation: Launches main application window after server is ready
  • API Routes: Configures backend endpoints for collections and categories
  • Static Content: Serves React frontend from the build directory
  • Application Lifecycle: Manages window creation, closing, and activation events

IPC Handlers

  • export-collection: Saves collection data to JSON file
  • import-collection: Loads collection data from JSON file

Dependencies

  • electron - Desktop application framework
  • express - Web server framework
  • electron-log - Enhanced logging system
  • dotenv - Environment configuration
  • fs/path - File system operations

package.json (Main)

Description

Root configuration file for the CollectTracker Electron application that manages dependencies, scripts, and build settings for the entire project.

View Code on GitHub

Application Metadata

  • Name: collecttracker
  • Version: 1.0.0
  • Description: Collection tracking desktop application
  • Main: main.js
  • Author: Andrew

Scripts

  • start: Launch Electron application
  • dev: Run client, server, and Electron concurrently for development
  • build: Create production build of React client
  • package: Build Windows executable with electron-builder
  • postinstall: Install dependencies for client and server

Dependencies

  • concurrently: Run multiple commands simultaneously
  • electron-log: Enhanced logging for Electron
  • express: Web server framework
  • sqlite3: SQLite database driver
  • multer: File upload handling

Build Configuration

  • appId: com.collecttracker.app
  • productName: CollectTracker
  • Target: Windows NSIS installer
  • Resources: Client build, server files, and database
  • ASAR Packaging: Enabled for production builds

Application Screenshots

Creating a collection, creating an item within a collection, and then assigning an item to a category!

Screenshot 1
Screenshot 2
Screenshot 3
Screenshot 4
Screenshot 5
Screenshot 6
Screenshot 7
Screenshot 8
Screenshot 9
Screenshot 10
Screenshot 11
1 / 11