Company Dev Library Chrome Extension

Project Overview

This project is a modern Chrome extension designed to help company engineers discover, document, and share internal and public packages/sites in a unified, searchable library. The extension integrates with a backend API and leverages AI to suggest resource descriptions and tags, streamlining knowledge sharing and onboarding across engineering teams.

---

Goals

• Centralize discovery of company-approved packages and sites.
• Enable easy contribution: Add new resources directly from the browser.
• Leverage AI for auto-generating descriptions and tags.
• Ensure maintainability: Type-safe, modular, and scalable codebase.
• Modern UX: Fast, accessible, and theme-aware UI scoped to the extension.

---

Tech Stack & Key Libraries

• Frontend: React, TypeScript, Vite
• State Management: TanStack Query (for API state)
• Form Handling: react-hook-form, zod, shadcn/ui (for validation and UI)
• Styling/UI: shadcn/ui, custom theme hook, lucide-react icons
• Backend (recommended): Node.js, Express, Prisma, PostgreSQL, JWT (see /server for architecture)
• AI Integration: Backend endpoint for AI-powered resource description/tagging

---

Architecture & Optimization

• API endpoints and config are centralized in /src/background/endpoints.ts and .env for maintainability.
• Single Resource Model: Both packages and sites use a unified Resource entity with a type field and shared tags.
• TanStack Query: All API state (search, add, AI suggest) is managed with queries/mutations for cache consistency and performance.
• Form Validation: All forms use zod schemas and react-hook-form for robust, type-safe validation and error handling.
• Theme Management: User theme preference (light/dark) is scoped to the extension root using a custom use-theme hook and CSS variables.
• AI Suggestion: The extension calls a backend endpoint to fetch AI-generated descriptions and tags, improving metadata quality and reducing manual effort.
• Code Splitting: Utility functions and queries are extracted to dedicated files for clarity and reusability.

---

Codebase Structure

/ (root)
├── public/                # Static assets and extension icons
├── server/                # (Recommended) Backend API architecture
├── src/
│   ├── background/        # Chrome extension background scripts & API endpoints
│   ├── components/        # UI primitives (shadcn/ui, multi-select, etc.)
│   ├── content/           # Content scripts and main UI components
│   │   └── components/    # Feature components (add modal, search results, utils)
│   ├── hooks/             # Custom React hooks (theme, textarea auto-resize, etc.)
│   ├── lib/               # Shared utilities and helpers
│   ├── queries/           # TanStack Query hooks and API logic
│   ├── types/             # TypeScript types and resource models
│   └── index.css          # Global and theme-scoped styles
├── package.json
├── manifest.json          # Chrome extension manifest
├── vite.config.ts         # Vite build config
└── README.md

---

Key Implementation Details

• Add Resource Modal: Extracts resource info from the DOM, uses AI to suggest description/tags, validates input, and submits to backend.
• Search Results: Uses TanStack Query to fetch and display company library matches for the current page/search.
• AI Integration: /ai/describe endpoint returns suggested description and tags for a resource, shown in the add modal.
• Theme Toggle: User can switch between light/dark themes, scoped to extension UI only.
• Type Safety: All API and UI code is strictly typed for reliability and maintainability.
• SVG Icons: GitHub/Home links use lucide-react SVG icons for clarity and consistency.

---

Setup & Usage

1. Clone the repository

git clone <repo-url>
cd dev-library

2. Install dependencies

npm install

3. Configure environment variables

• Copy .env.example to .env and set the required values (e.g., BACKEND_API_URL).

4. Start the development server

npm run dev

• This will run Vite and enable hot-reload for rapid development.

5. Build for production

npm run build

• The output will be in the dist/ folder.

6. Load the extension in Chrome

• Open chrome://extensions in your browser.
• Enable "Developer mode" (top right).
• Click "Load unpacked" and select the dist/ folder.
• The extension should now be available in your browser.

---

Future Improvements

• User authentication and access control
• More granular resource types and metadata
• Enhanced AI suggestions (LLM integration, feedback loop)
• Analytics/dashboard for resource usage

---

Questions?

For technical details, see the code comments and type definitions in /src/types. For backend setup, see /server/README.md (if present).

---

Presented by: [Your Team/Name] Date: June 2025