EG
Resume

Case Study

DOT Indonesia Backoffice - Project Monitoring System

Built internal monitoring system for project managers at DOT Indonesia - checklists, payment milestones, and talent management.

my first internship project at DOT Indonesia. called the backoffice because... it monitors internal projects. not fancy but real work that people actually used. 💪

What is DOT Indonesia?

PT. Digdaya Olah Teknologi Indonesia - they're an IT company doing enterprise software. that's where I interned and eventually became their youngest Full Stack Engineer at 18. no big deal. 😎

The Need

Project managers needed a system to:

  • Track which projects were on track
  • Manage payment milestones
  • See team member allocation
  • Know when deliverables were due

Spreadsheets weren't cutting it anymore.

Features Built

1. Project Checklist Management

interface ChecklistItem {
  id: string;
  projectId: string;
  title: string;
  completed: boolean;
  dueDate: Date;
  assignee: TeamMember;
  priority: 'low' | 'medium' | 'high' | 'critical';
}

const ChecklistItem = ({ item, onToggle }: Props) => (
  <div className={`flex items-center gap-3 ${item.completed ? 'opacity-50' : ''}`}>
    <Checkbox
      checked={item.completed}
      onChange={() => onToggle(item.id)}
    />
    <span className={item.completed ? 'line-through' : ''}>
      {item.title}
    </span>
    <PriorityBadge priority={item.priority} />
    <span className="text-gray-500">
      Due: {formatDate(item.dueDate)}
    </span>
  </div>
);

2. Payment Milestones

Track payments across project phases:

interface Milestone {
  id: string;
  projectId: string;
  name: string; // e.g., "Phase 1 - Design"
  amount: number;
  dueDate: Date;
  status: 'pending' | 'invoiced' | 'paid';
  invoiceUrl?: string;
}

// payment progress bar
const PaymentProgress = ({ milestones }: { milestones: Milestone[] }) => {
  const total = milestones.reduce((sum, m) => sum + m.amount, 0);
  const paid = milestones
    .filter(m => m.status === 'paid')
    .reduce((sum, m) => sum + m.amount, 0);

  return (
    <div>
      <div className="flex justify-between mb-2">
        <span>Payment Progress</span>
        <span>{Math.round((paid / total) * 100)}%</span>
      </div>
      <ProgressBar value={(paid / total) * 100} />
    </div>
  );
};

3. Talent Management

See who's working on what:

interface TeamMember {
  id: string;
  name: string;
  role: string;
  skills: string[];
  availability: number; // hours per week
  currentProjects: Project[];
}

// allocation visualization
const TeamAllocation = ({ members }: { members: TeamMember[] }) => (
  <div className="space-y-4">
    {members.map(member => (
      <div key={member.id} className="border rounded-lg p-4">
        <div className="flex justify-between">
          <span className="font-semibold">{member.name}</span>
          <span>{member.availability}h available</span>
        </div>
        <div className="mt-2">
          Working on: {member.currentProjects.map(p => p.name).join(', ')}
        </div>
        <div className="flex gap-2 mt-2">
          {member.skills.map(skill => (
            <Badge key={skill}>{skill}</Badge>
          ))}
        </div>
      </div>
    ))}
  </div>
);

What I Learned

React Fundamentals

this was when React finally "clicked" for me:

  • useState, useEffect properly
  • Component composition
  • Lifting state appropriately
  • Not over-engineering

Working with Laravel Backend

my first time connecting to PHP/Laravel API:

  • Different REST conventions
  • Eloquent relationships
  • Authentication flow

Git Workflow

branching, commits, pull requests - actual code review:

  • Don't commit directly to main
  • Write meaningful commit messages
  • Respond to feedback professionally

Enterprise Code Standards

  • Consistent naming conventions
  • Proper file structure
  • Documentation (even if minimal)
  • Error handling

Impact

  • ✅ PMs could see all projects in one place
  • ✅ No more lost checklist items in spreadsheets
  • ✅ Payment tracking became automatic
  • ✅ Team allocation visible at a glance
  • ✅ System is still being used today

The Internship Experience

honest thoughts:

Good:

  • Real projects, real users
  • Senior devs who actually mentored
  • Code review culture
  • Flexible work from home

Challenging:

  • Learning Laravel (PHP was new)
  • Understanding business domain
  • Communicating with stakeholders
  • Impostor syndrome at 18 😅

Result:

  • Became Full Stack Engineer at 18
  • Continued working on real projects
  • Built confidence in my skills

internships are where theory becomes practice. grateful for DOT for giving me a chance when I was 17 and still in school.

Related Articles

Case Study

Music Distribution Platform - Licensing & Digital Contracts

Built a music distribution platform with payment gateway, digital signatures, and 20GB file uploads.

Case Study

Resona Perdania Corporate Website - Modern B2B Identity

Revamped corporate website with Next.js, Strapi CMS, custom plugins, and Japanese-inspired B2B branding.

Case Study

HRIS System - Web & Mobile Application

Built an HRIS system from scratch with a scalable design system and React Native mobile app.