HRIS System - Web & Mobile Application

Building an HRIS system from scratch. both web and mobile. this was my first time owning the entire stack — from initial architecture decisions to shipping the mobile app.

The Project

PT Digitalisasi Anak Bangsa needed an HRIS system for their clients. not just a web app — they wanted a mobile experience too. small team, big scope. exactly the kind of challenge I enjoy.

What I Built

Web Application

• Initial frontend setup with a scalable design system
• Component library built for reusability across projects
• Clean architecture with low coupling principles
• Vite as the build tool — faster dev experience, less complexity than SSR for internal systems

Mobile Application (React Native + Expo)

• Built the mobile app from scratch using Expo
• Shared design language with the web application
• Native-feeling UI with smooth transitions
• Offline-first considerations for field workers

Architecture Decisions

• Vite over Next.js for internal/back-office systems — reduced complexity, better performance for authenticated apps
• Next.js selectively for SEO-critical landing pages only
• Zod for schema validation across both web and API layers
• React Hook Form for complex form handling with validation
• TanStack Query for data fetching, caching, and synchronization

Technical Deep Dive

Design System Approach:

// scalable component structure
interface ButtonProps {
  variant: 'primary' | 'secondary' | 'ghost';
  size: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
}

// consistent across web and mobile

Mobile with Expo:

// react native component example
function EmployeeCard({ employee }: { employee: Employee }) {
  return (
    <View style={styles.card}>
      <Text style={styles.name}>{employee.name}</Text>
      <Text style={styles.role}>{employee.department}</Text>
    </View>
  );
}

Challenges

Dual platform development Building for web AND mobile simultaneously means thinking about:

• Shared business logic vs platform-specific UI
• Consistent design language across platforms
• Different navigation patterns
• Platform-specific edge cases

Architecture from scratch No existing codebase to work with — every decision matters:

• Folder structure that scales
• State management strategy
• API client design
• Error handling patterns

Developer experience Making sure the codebase is maintainable for the long term:

• Clear naming conventions
• Consistent patterns
• Easy to onboard new developers
• Fast feedback loops

Features I'm Proud Of

1. Scalable design system — reusable components that work across web and mobile
2. Architecture decisions — chose the right tool for each job, not the trendiest
3. Developer experience — fast builds, clear structure, easy to extend
4. Mobile-first thinking — designed with mobile constraints in mind from day one

Tech Decisions

Why Expo?

• Fast iteration with hot reload
• Great developer experience
• Easy deployment to app stores
• Large ecosystem of pre-built modules

Why Vite for internal apps?

• Faster dev server than Next.js
• Simpler configuration
• No SSR overhead for authenticated apps
• Great TypeScript support

Why TanStack Query?

• Automatic caching and refetching
• Optimistic updates
• Great DevTools
• Works seamlessly with React Hook Form

Results

• ✅ Web application shipped with scalable design system
• ✅ Mobile app built from scratch with Expo
• ✅ Standardized frontend practices across projects
• ✅ Architecture decisions documented for future developers

Lessons Learned

1. Architecture decisions matter more than you think — choose wisely
2. Vite is perfect for internal tools — don't over-engineer with SSR
3. Design systems pay off quickly when building multiple features
4. Mobile development teaches you to think about constraints differently

building from scratch is scary but rewarding. every decision shapes the foundation.