Merencanakan Arsitektur dan Tumpukan Teknologi

Capstone Project Introduction

Defining the App Idea

// Example app: 'HabitTracker'

// Problem:
// People struggle to build daily habits because they
// have no lightweight way to track streaks on mobile.

// Core value: Visual streak tracking with daily check-ins

// V1 features:
// 1. Create/delete habits with name and icon
// 2. Mark habit as done each day
// 3. View streak count and calendar history
// 4. Push reminder notification at chosen time
// 5. Basic stats: longest streak, completion rate

// Deferred to V2:
// - Social sharing, friend challenges, premium themes

Choosing a Backend

// Decision matrix:

// Supabase:
// + Postgres SQL — complex queries and relationships
// + TypeScript generated types from schema
// + Open source — can self-host
// + Row Level Security (granular per-user access)
// - Slightly more setup for real-time subscriptions

// Firebase:
// + Simpler real-time listeners (onSnapshot)
// + Generous free tier
// + Google's CDN/auth infrastructure
// - NoSQL: no joins, schema migrations harder
// - Vendor lock-in

// For HabitTracker: Supabase (relational habits/completions)

Navigation Structure

// HabitTracker navigation tree:

// Root Navigator (stack)
// ├── Auth Stack (shown when no session)
// │   ├── Onboarding Screen
// │   ├── Sign In Screen
// │   └── Sign Up Screen
// └── App Tab Navigator (shown when authenticated)
//     ├── Home Tab (Stack)
//     │   ├── Habit List Screen
//     │   └── Habit Detail Screen
//     ├── Stats Tab (Stack)
//     │   └── Statistics Screen
//     └── Settings Tab (Stack)
//         └── Settings Screen

State Management Decision

// HabitTracker state management plan:

// Authentication state:
// → Context API (AuthContext with session/user)

// Server data (habits, completions):
// → React Query (useQuery, useMutation)
//   - Caches habits list
//   - Invalidates cache on mutation
//   - Works offline with persistence

// UI state (selected date, modal open):
// → Local useState in each component

// Theme preference (light/dark):
// → Context + AsyncStorage for persistence

// No Redux needed — RQ handles server state well

Folder Structure

// Recommended folder structure:
src/
  screens/
    auth/
      SignInScreen.tsx
      SignUpScreen.tsx
    habits/
      HabitListScreen.tsx
      HabitDetailScreen.tsx
    stats/
      StatsScreen.tsx
  components/
    HabitCard.tsx
    StreakBadge.tsx
    CheckInButton.tsx
  hooks/
    useHabits.ts
    useCompletions.ts
    useAuth.ts
  services/
    supabase.ts
    habitsApi.ts
  navigation/
    RootNavigator.tsx
    AppTabNavigator.tsx
  context/
    AuthContext.tsx
    ThemeContext.tsx

Database Schema Design

-- HabitTracker schema (PostgreSQL / Supabase)

CREATE TABLE habits (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  icon TEXT DEFAULT 'star',
  color TEXT DEFAULT '#007AFF',
  reminder_time TIME,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

CREATE TABLE completions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  habit_id UUID REFERENCES habits(id) ON DELETE CASCADE,
  completed_date DATE NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  UNIQUE(habit_id, completed_date)
);

-- RLS policies: users see only their own habits
ALTER TABLE habits ENABLE ROW LEVEL SECURITY;
CREATE POLICY 'Users can CRUD own habits' ON habits
  FOR ALL USING (auth.uid() = user_id);

Scaffolding the Project

# Create project with TypeScript template
npx create-expo-app HabitTracker --template expo-template-blank-typescript

cd HabitTracker

# Install core dependencies
npx expo install @react-navigation/native @react-navigation/bottom-tabs \
  @react-navigation/stack react-native-screens react-native-safe-area-context

npx expo install @supabase/supabase-js @react-native-async-storage/async-storage

npm install @tanstack/react-query axios

# Linting and formatting
npm install -D eslint eslint-config-expo prettier

# Initialize git
git init && git add -A && git commit -m 'Initial scaffold'

Environment Variables and Configuration

// .env (create this, add to .gitignore)
EXPO_PUBLIC_SUPABASE_URL=https://xyzcompany.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5...

// src/services/supabase.ts
import { createClient } from '@supabase/supabase-js';
import AsyncStorage from '@react-native-async-storage/async-storage';

const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL!;
const supabaseAnonKey = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!;

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    storage: AsyncStorage,
    autoRefreshToken: true,
    persistSession: true,
  },
});

Defining TypeScript Types

// src/types/index.ts
export interface Habit {
  id: string;
  user_id: string;
  name: string;
  icon: string;
  color: string;
  reminder_time: string | null;
  created_at: string;
}

export interface Completion {
  id: string;
  habit_id: string;
  completed_date: string; // YYYY-MM-DD
  created_at: string;
}

// Navigation param list
export type AppStackParamList = {
  HabitList: undefined;
  HabitDetail: { habitId: string };
  CreateHabit: undefined;
};

// Generate from Supabase schema:
// npx supabase gen types typescript --project-id <id> > src/types/supabase.ts

Planning Feature Development Order

// HabitTracker development order:

// Sprint 1 (Foundation):
// 1. Auth screens + Supabase auth
// 2. Root navigator (auth/app switch)
// 3. Tab navigator + placeholder screens
// 4. Supabase client + React Query setup

// Sprint 2 (Core Feature):
// 5. Habits API (create, read, delete)
// 6. HabitList screen + HabitCard component
// 7. Completions API (toggle check-in)
// 8. Streak calculation logic

// Sprint 3 (Polish):
// 9. Calendar view for habit history
// 10. Stats screen
// 11. Push notifications setup
// 12. Animations on check-in

Quick Check

Lesson Recap