Timeline Component - Career Progression

🧠 Base idea

I understand that this is a fast-paced project, and since the goal is to showcase my skills, I dedicated extra time to improving usability and implementing the best possible features.

A modern, interactive React component for visualizing and managing career progression in a horizontal timeline with dark mode design and advanced usability features.

🚀 Technologies Used

• React 18 with TypeScript
• Vite for build and development
• Tailwind CSS for styling
• Shadcn UI for base components
• Material UI Icons for icons
• Radix UI for accessible components
• Emotion for Material UI styling

📦 Installation and Setup

# Install dependencies
npm install

# Run in development mode
npm start

# Alternative development command
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

The project will run at http://localhost:5173

✨ Implemented Features

Core Features

• ✅ Horizontal timeline with compact lanes layout
• ✅ Optimized assignLanes algorithm for vertical space efficiency
• ✅ Different experience types visualization (work, education, projects, certifications)
• ✅ Real career data with work experiences, academic formations, and certifications
• ✅ Dark mode design with modern glassmorphism effects

Advanced Features

• ✅ Dynamic zoom system (25% to 300% with 100% as baseline)
• ✅ Modal-based editing for adding and updating experiences
• ✅ Smart tooltips with mouse tracking and viewport boundary detection
• ✅ Z-index hover effects - hovered items appear above others
• ✅ Company-specific color coding with gradient backgrounds
• ✅ Responsive design with fixed header and scrollable timeline
• ✅ Temporal markers by year
• ✅ Action buttons on hover with glassmorphism styling

User Experience Enhancements

• ✅ Smooth transitions and micro-interactions
• ✅ Visual hierarchy with dynamic z-index on hover
• ✅ Tooltip follows mouse on X-axis with fixed width
• ✅ Harmonious action buttons that appear only on hover
• ✅ Company legend showing color associations
• ✅ Separated journey section from scrollable timeline

🎨 Design Decisions

Inspiration

• GitHub Contribution Graph: For horizontal lanes concept
• Linear Timeline: For minimalist and clean design
• Figma Timeline: For dark mode aesthetics
• Notion Database: For type system and categorization

UX/UI Decisions

1. Dark theme: Modern, professional appearance
2. Horizontal timeline: Better for visualizing temporal progression
3. Compact lanes: Maximizes vertical space usage
4. Dynamic hover effects: Items elevate above others when hovered
5. Smart tooltips: Fixed width with boundary detection using React Portals
6. Modal editing: Better UX than inline editing for complex forms
7. Glassmorphism: Subtle transparency effects for modern look
8. Company color coding: Visual association with different organizations

🏗️ Code Architecture

src/
├── components/
│   ├── Timeline/
│   │   ├── Timeline.tsx              # Main component with state management
│   │   ├── TimelineItem.tsx          # Individual timeline item with hover effects
│   │   └── AddExperienceDialog.tsx   # Modal for adding/editing experiences
│   └── ui/                           # Shadcn UI components
├── data/
│   └── timelineItems.ts              # Real career data and types
├── utils/
│   └── assignLanes.ts                # Compact lanes algorithm (TypeScript)
└── lib/
    └── utils.ts                      # General utilities (cn function)

Main Components

Timeline.tsx

• Global application state management
• Zoom controls with adjusted levels (25%-300%)
• Modal management for add/edit operations
• Company legend rendering
• Fixed header with scrollable timeline content

TimelineItem.tsx

• Individual experience rendering with company-specific colors
• Smart tooltip with React Portal and boundary detection
• Dynamic z-index on hover for visual hierarchy
• Glassmorphism action buttons (edit/delete) on hover
• Mouse tracking for tooltip positioning

assignLanes.ts

• Optimized algorithm for lane distribution
• Minimizes vertical overlap
• TypeScript implementation with proper typing

🧪 How I Would Test (If I Had More Time)

Unit Tests

// assignLanes.test.ts
describe('assignLanes', () => {
  test('should assign non-overlapping items to same lane', () => {
    const items = [
      { startDate: '2023-01-01', endDate: '2023-06-30' },
      { startDate: '2023-07-01', endDate: '2023-12-31' }
    ];
    const result = assignLanes(items);
    expect(result[0].lane).toBe(result[1].lane);
  });

  test('should assign overlapping items to different lanes', () => {
    const items = [
      { startDate: '2023-01-01', endDate: '2023-12-31' },
      { startDate: '2023-06-01', endDate: '2023-12-31' }
    ];
    const result = assignLanes(items);
    expect(result[0].lane).not.toBe(result[1].lane);
  });
});

// TimelineItem.test.tsx
describe('TimelineItem tooltip', () => {
  test('should adjust tooltip position within viewport boundaries', () => {
    // Test boundary detection logic
  });
  
  test('should show/hide tooltip on mouse enter/leave', () => {
    // Test tooltip visibility
  });
});

Integration Tests

• Modal add/edit functionality tests
• Zoom controls behavior
• Tooltip positioning and boundary detection
• Z-index hover effects

E2E Tests

• Complete experience addition/editing flow
• Timeline navigation with zoom
• Tooltip behavior across different screen sizes
• Performance with large datasets

Performance Tests

• Rendering time with 50+ items
• Memory usage during interactions
• Tooltip performance with frequent mouse movements

💡 What I Like About the Implementation

1. Smart Tooltip System: Uses React Portals with boundary detection
2. Dynamic Visual Hierarchy: Z-index changes on hover for better UX
3. Company-Specific Theming: Meaningful color associations
4. Dark Mode Design: Modern, professional appearance
5. Glassmorphism Effects: Subtle, elegant visual enhancements
6. Strong TypeScript: Complete typing reduces bugs
7. Performance Optimizations: useMemo for expensive calculations
8. Accessibility: Radix UI components ensure accessibility
9. Clean Code Architecture: Well-separated concerns and reusable components

🔄 What I Would Change If I Were to Do It Again

Technical Improvements

1. Virtualization: For supporting hundreds of items efficiently
2. Undo/Redo System: Complete change history management
3. Data Persistence: Backend integration or advanced localStorage
4. Test Coverage: Comprehensive unit and integration tests
5. Performance: Web Workers for heavy lane calculations

UX Improvements

1. Advanced Filtering: By company, type, date range, skills
2. Search Functionality: Quick find specific experiences
3. Export Features: PDF timeline, JSON data, PNG images
4. Keyboard Navigation: Full accessibility with keyboard shortcuts
5. Bulk Operations: Multi-select and batch editing

UI Improvements

1. Light Mode Toggle: Theme switching capability
2. Custom Color Themes: User-customizable company colors
3. Mobile Optimization: Touch-friendly interactions
4. Advanced Animations: More sophisticated micro-interactions
5. Timeline Templates: Pre-defined career path templates

📊 Data Structure

interface TimelineItem {
  id: string;
  name: string;
  startDate: string; // YYYY-MM-DD
  endDate: string;   // YYYY-MM-DD
  description?: string;
  company?: string;
  position?: string;
  type: 'education' | 'work' | 'project' | 'certification';
}

interface TimelineItemWithLane extends TimelineItem {
  lane: number;
  startDateObj: Date;
  endDateObj: Date;
}

🎯 Current Features Status

✅ Completed

• Horizontal timeline with compact lanes
• Dark mode design with glassmorphism
• Smart tooltips with boundary detection
• Dynamic z-index hover effects
• Modal-based add/edit functionality
• Company-specific color coding
• Zoom controls (25%-300%)
• Real career data integration

🚀 Getting Started

1. Clone the repository
2. Run npm install to install dependencies
3. Run npm start to start the development server
4. Open http://localhost:5173 in your browser
5. Explore the timeline and try adding/editing experiences

---

Developed as a technical test demonstrating: Modern React Patterns, TypeScript Excellence, Advanced UX/UI Design, Performance Optimization, Clean Architecture, and Professional Code Quality.