Integrate 3 React/tRPC Modules into Existing Dashboard
Budget: $10 – $120 USD
I am looking for an experienced Full-Stack Developer to integrate three pre-developed modules into my existing Software Project Management Dashboard. I have the complete source package, including React components, tRPC routers, and Drizzle ORM schemas.
Crucial Requirement: The integration must be performed without overwriting or damaging any existing data. I am already using the dashboard, and all current entries must remain intact during the database schema update.
The Modules to Integrate
1. Navigator: A bookmarks/tile board featuring live iframe previews and server-side online/offline status checking.
2. Budget: Project-level financial tracking featuring utilization bars, expense logging, and drag-and-drop reordering.
3. Team: Team member profiles with assigned-project lists, skills management, and avatar uploads.
Technical Stack:
The developer must be proficient in the following technologies used in these modules:
• Frontend: React 19, TypeScript, Vite, Tailwind CSS 4, and shadcn/ui.
• API/Backend: tRPC 11, Express 4, and Node.js.
• Database: MySQL/TiDB using Drizzle ORM.
• Storage/Auth: S3-compatible object storage and OAuth/Credential-based login.
• Testing: Vitest.
Key Deliverables & Responsibilities:
• Database Migration: Implement the Drizzle ORM schema changes. Note that the Budget module stores data directly on the projects table (budget, spent, etc.) to optimize query paths.
• Backend Integration: Set up the tRPC routers for Navigator, Budget, and Users-Team.
• Frontend Implementation: Integrate the .tsx page components while maintaining existing state logic, such as the PROJECTS_COLLAPSE_THRESHOLD = 4 constant in the Team module.
• Server-Side Logic: Ensure the Navigator status cache (60-second in-memory Map) is correctly implemented to avoid CORS issues.
• Testing: Run the existing Vitest suite (94 tests) to ensure a successful, "green" integration.
Requirements:
• Proven experience with tRPC and Drizzle ORM is mandatory.
• Strong understanding of MySQL migrations to ensure zero data loss.
• Clean, documented code following the existing directory structure.
Crucial Requirement: The integration must be performed without overwriting or damaging any existing data. I am already using the dashboard, and all current entries must remain intact during the database schema update.
The Modules to Integrate
1. Navigator: A bookmarks/tile board featuring live iframe previews and server-side online/offline status checking.
2. Budget: Project-level financial tracking featuring utilization bars, expense logging, and drag-and-drop reordering.
3. Team: Team member profiles with assigned-project lists, skills management, and avatar uploads.
Technical Stack:
The developer must be proficient in the following technologies used in these modules:
• Frontend: React 19, TypeScript, Vite, Tailwind CSS 4, and shadcn/ui.
• API/Backend: tRPC 11, Express 4, and Node.js.
• Database: MySQL/TiDB using Drizzle ORM.
• Storage/Auth: S3-compatible object storage and OAuth/Credential-based login.
• Testing: Vitest.
Key Deliverables & Responsibilities:
• Database Migration: Implement the Drizzle ORM schema changes. Note that the Budget module stores data directly on the projects table (budget, spent, etc.) to optimize query paths.
• Backend Integration: Set up the tRPC routers for Navigator, Budget, and Users-Team.
• Frontend Implementation: Integrate the .tsx page components while maintaining existing state logic, such as the PROJECTS_COLLAPSE_THRESHOLD = 4 constant in the Team module.
• Server-Side Logic: Ensure the Navigator status cache (60-second in-memory Map) is correctly implemented to avoid CORS issues.
• Testing: Run the existing Vitest suite (94 tests) to ensure a successful, "green" integration.
Requirements:
• Proven experience with tRPC and Drizzle ORM is mandatory.
• Strong understanding of MySQL migrations to ensure zero data loss.
• Clean, documented code following the existing directory structure.
Related categories:
MySQL
Node.js
Software Development
OAuth
Backend Development
Frontend Development
API Integration
Tailwind CSS