Developer Portfolio Tracker

A full-stack application designed to help developers log, track, and visualize their daily development activities. The system provides an interactive timeline interface for viewing tasks, built-in diagramming tools for system design documentation, and comprehensive effort tracking metrics.

Architecture

The application follows an event-driven microservices architecture using:

• Frontend: React with TypeScript, Shadcn/UI, TanStack Router, TanStack Query
• Backend: Node.js/Express microservices
• Databases: MongoDB (tasks, diagrams, analytics), MySQL (users)
• Message Queue: Apache Kafka
• Cache: Redis
• Containerization: Docker & Kubernetes

Project Structure

developer-portfolio-tracker/
├── packages/
│   ├── shared-types/          # Shared TypeScript types and validation schemas
│   ├── frontend/              # React frontend application
│   ├── api-gateway/           # API Gateway service
│   ├── user-service/          # User management and authentication
│   ├── task-service/          # Task CRUD and timeline operations
│   ├── analytics-service/     # Analytics and reporting
│   └── diagram-service/       # Diagram creation and rendering
├── package.json               # Root package.json with workspace configuration
├── tsconfig.json             # Shared TypeScript configuration
└── README.md

Getting Started

Prerequisites

• Node.js >= 18.0.0
• npm >= 9.0.0
• Docker and Docker Compose (for local development)

Installation

1. Clone the repository

2. Install dependencies:

   npm install

3. Copy environment configuration:

   cp .env.example .env

4. Build shared types:

   npm run build --workspace=@portfolio/shared-types

Development

Start all services in development mode:

npm run dev

This will start:

• Frontend on http://localhost:3005
• API Gateway on http://localhost:3000
• User Service on http://localhost:3001
• Task Service on http://localhost:3002
• Analytics Service on http://localhost:3003
• Diagram Service on http://localhost:3004

Available Scripts

• npm run dev - Start all services in development mode
• npm run build - Build all packages
• npm run test - Run tests for all packages
• npm run lint - Lint all packages
• npm run format - Format code with Prettier
• npm run clean - Clean all build artifacts

Package-specific Scripts

Each package has its own scripts that can be run with:

npm run <script> --workspace=@portfolio/<package-name>

For example:

npm run test --workspace=@portfolio/frontend
npm run dev --workspace=@portfolio/user-service

Features

• Task Management: Create, edit, and organize development tasks
• Interactive Timeline: Chronological view of development activities
• Diagram Tools: Built-in Mermaid and React Flow editors
• Analytics Dashboard: Time tracking and productivity metrics
• User Authentication: Secure JWT-based authentication
• Real-time Updates: Event-driven architecture with Kafka

Contributing

1. Follow the existing code style and conventions
2. Write tests for new features
3. Update documentation as needed
4. Ensure all linting and formatting checks pass

License

This project is licensed under the MIT License.