JR Logo
DevMap
Updated Aug 2024React

DevMap - Time Tracking Tool

Basic time tracking tool built while learning React hooks and charts. Helps track coding time and project progress.

Simple development time tracker built to learn React and data visualization. Tracks time spent coding and basic project progress metrics.

Build Key Features

  1. 01

    Time Logging

    Basic time tracking for coding sessions. Uses local storage with PostgreSQL backup. Still working on sync reliability.

    Time Logging
  2. 02

    Project Lists

    Simple project and task organization with drag-drop sorting. Needs better state management.

    Project Lists
  3. 03

    Progress Charts

    Basic charts showing time spent on different technologies. First attempt at using Recharts.

    Progress Charts
  4. 04

    Time Estimates

    Basic comparison of estimated vs actual time spent. Helps learn estimation skills.

    Time Estimates

Friction Challenges

  1. 1

    Data Syncing

    Learning to handle offline-first data with eventual server sync. Still working on conflict resolution.

  2. 2

    State Management

    First time managing complex state with React hooks. Needs refactoring for better organization.

  3. 3

    Performance

    Learning to optimize React renders with large datasets. Currently has issues with larger project lists.

Takeaways Learnings

React Patterns

  • First deep dive into React hooks and context
  • Learning about component optimization and memo usage

Data Visualization

  • Basic usage of Recharts for time series data
  • Learning about chart performance with live updates

Backend Integration

  • First attempt at building a REST API with Express
  • Basic PostgreSQL queries and relationships