Develop

app.json

@@ -38,6 +38,19 @@
             "backgroundColor": "#000000"
           }
         }
+      ],
+      [
+        "expo-font",
+        {
+          "fonts": [
+            "./assets/fonts/PlusJakartaSans-Bold.ttf",
+            "./assets/fonts/PlusJakartaSans-ExtraBold.ttf",
+            "./assets/fonts/PlusJakartaSans-Light.ttf",
+            "./assets/fonts/PlusJakartaSans-Medium.ttf",
+            "./assets/fonts/PlusJakartaSans-Regular.ttf",
+            "./assets/fonts/PlusJakartaSans-SemiBold.ttf"
+          ]
+        }
       ]
     ],
     "experiments": {

app/(tabs)/index.tsx

@@ -1,37 +1,99 @@
+import ListHeading from "@/components/ListHeading";
+import SubscriptionCard from "@/components/SubscriptionCard";
+import UpcomingSubscriptionCard from "@/components/UpcomingSubscriptionCard";
+import {
+  HOME_BALANCE,
+  HOME_SUBSCRIPTIONS,
+  HOME_USER,
+  UPCOMING_SUBSCRIPTIONS,
+} from "@/constants/data";
+import icons from "@/constants/icons";
+import images from "@/constants/images";
 import "@/global.css";
-import { Link } from "expo-router";
+import { formatCurrency } from "@/lib/utils/currency";
+import dayjs from "dayjs";
+import { useRouter } from "expo-router";
 import { styled } from "nativewind";
-import { Text } from "react-native";
+import { useState } from "react";
+import { FlatList, Image, Text, View } from "react-native";
 import { SafeAreaView as RNSafeAreaView } from "react-native-safe-area-context";
 
 const SafeAreaView = styled(RNSafeAreaView);
 
 export default function App() {
+  const router = useRouter();
+  const [expandedSubscriptionId, setExpandedSubscriptionId] = useState<
+    string | null
+  >(null);
+
   return (
     <SafeAreaView className="flex-1 bg-background p-5">
-      <Text className="text-xl font-bold text-success">
-        Welcome to Nativewind!
-      </Text>
-      <Link
-        href="/(auth)/sign-in"
-        className="bg-accent text-white text-xl p-3 rounded-md m-5"
-      >
-        Sign In
-      </Link>
-      <Link
-        href="/(auth)/sign-up"
-        className="bg-accent text-white text-xl p-3 rounded-md m-5"
-      >
-        Sign Up
-      </Link>
+      <FlatList
+        showsVerticalScrollIndicator={false}
+        ListHeaderComponent={() => (
+          <>
+            <View className="home-header">
+              <View className="home-user">
+                <Image source={images.avatar} className="home-avatar" />
+                <Text className="home-user-name">{HOME_USER.name}</Text>
+              </View>
+              <Image source={icons.add} className="home-add-icon" />
+            </View>
+
+            <View className="home-balance-card">
+              <Text className="home-balance-label">Balance</Text>
+
+              <View className="home-balance-row">
+                <Text className="home-balance-amount">
+                  {formatCurrency(HOME_BALANCE.amount)}
+                </Text>
+                <Text className="home-balance-date">
+                  {dayjs(HOME_BALANCE.nextRenewalDate).format("MM/DD")}
+                </Text>
+              </View>
+            </View>
+
+            <View className="mb-5">
+              <ListHeading title="Upcoming" onPress={() => router.push("/(tabs)/subscriptions")} />
+              <FlatList
+                data={UPCOMING_SUBSCRIPTIONS}
+                renderItem={({ item }) => (
+                  <UpcomingSubscriptionCard {...item} />
+                )}
+                keyExtractor={(item) => item.id}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                ListEmptyComponent={
+                  <Text className="home-empty-state">
+                    No upcoming subscriptions yet.
+                  </Text>
+                }
+              />
+            </View>
 
-      {/* Subscription Examples */}
-      <Link
-        href={{ pathname: "/subscriptions/[id]", params: { id: "claude-ai" } }}
-        className="bg-accent text-white text-xl p-3 rounded-md m-5"
-      >
-        Claude Max Subscription
-      </Link>
+            <ListHeading title="All Subscriptions" onPress={() => router.push("/(tabs)/subscriptions")} />
+          </>
+        )}
+        data={HOME_SUBSCRIPTIONS}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <SubscriptionCard
+            {...item}
+            expanded={expandedSubscriptionId === item.id}
+            onPress={() => {
+              setExpandedSubscriptionId((currentId) =>
+                currentId === item.id ? null : item.id,
+              );
+            }}
+          />
+        )}
+        extraData={expandedSubscriptionId}
+        ItemSeparatorComponent={() => <View className="h-4" />}
+        ListEmptyComponent={
+          <Text className="home-empty-state">No subscriptions yet.</Text>
+        }
+        contentContainerClassName="pb-28"
+      />
     </SafeAreaView>
   );
 }

app/subscriptions/[id].tsx → app/(tabs)/subscriptions/[id].tsx

@@ -1,17 +1,21 @@
 import { Link, useLocalSearchParams } from "expo-router";
+import { styled } from "nativewind";
 import React from "react";
-import { Text, View } from "react-native";
+import { Text } from "react-native";
+import { SafeAreaView as RNSafeArea } from "react-native-safe-area-context";
+
+const SafeAreaView = styled(RNSafeArea);
 
 const SubscriptionDetails = () => {
   const { id } = useLocalSearchParams<{ id: string }>();
   return (
-    <View className="items-center justify-center flex-1">
+    <SafeAreaView className="items-center justify-center flex-1">
       <Text>Subscription Details: {id}</Text>
       <Link className="p-3 bg-accent text-xl rounded-md mt-3" href="../">
         {" "}
         Go Back{" "}
       </Link>
-    </View>
+    </SafeAreaView>
   );
 };
 

app/_layout.tsx

@@ -1,8 +1,29 @@
 import "@/global.css";
-import { Stack } from "expo-router";
+import { useFonts } from "expo-font";
+import { SplashScreen, Stack } from "expo-router";
+import { useEffect } from "react";
 import { StatusBar } from "react-native";
 
+SplashScreen.preventAutoHideAsync();
+
 export default function RootLayout() {
+  const [fontsLoaded, fontsError] = useFonts({
+    "sans-light": require("../assets/fonts/PlusJakartaSans-Light.ttf"),
+    "sans-regular": require("../assets/fonts/PlusJakartaSans-Regular.ttf"),
+    "sans-medium": require("../assets/fonts/PlusJakartaSans-Medium.ttf"),
+    "sans-semibold": require("../assets/fonts/PlusJakartaSans-SemiBold.ttf"),
+    "sans-bold": require("../assets/fonts/PlusJakartaSans-Bold.ttf"),
+    "sans-extrabold": require("../assets/fonts/PlusJakartaSans-ExtraBold.ttf"),
+  });
+
+  useEffect(() => {
+    if (fontsLoaded || fontsError) {
+      SplashScreen.hideAsync();
+    }
+  }, [fontsLoaded, fontsError]);
+
+  if (!fontsLoaded && !fontsError) return null;
+
   return (
     <>
       <StatusBar translucent backgroundColor="#000000" />

components/ListHeading.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Text, TouchableOpacity, View } from "react-native";
+
+const ListHeading = ({ title, onPress }: ListHeadingProps) => {
+  return (
+    <View className="list-head">
+      <Text className="list-title">{title}</Text>
+
+      <TouchableOpacity className="list-action" onPress={onPress}>
+        <Text className="list-action-text">View All</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default ListHeading;

components/SubscriptionCard.tsx

@@ -0,0 +1,127 @@
+import { formatCurrency } from "@/lib/utils/currency";
+import { formatSubscriptionDateTime } from "@/lib/utils/date";
+import { formatStatusLabel } from "@/lib/utils/status";
+import clsx from "clsx";
+import React from "react";
+import { Image, Pressable, Text, View } from "react-native";
+
+const SubscriptionCard = ({
+  name,
+  price,
+  currency,
+  icon,
+  billing,
+  color,
+  category,
+  plan,
+  paymentMethod,
+  renewalDate,
+  startDate,
+  status,
+  expanded,
+  onPress,
+}: SubscriptionCardProps) => {
+  return (
+    <Pressable
+      className={clsx("sub-card ", expanded ? "sub-card-expanded" : "bg-card")}
+      style={!expanded && color ? { backgroundColor: color } : undefined}
+      onPress={onPress}
+    >
+      <View className="sub-head">
+        <View className="sub-main">
+          <Image source={icon} className="sub-icon" />
+          <View className="sub-copy">
+            <Text numberOfLines={1} className="sub-title">
+              {name}
+            </Text>
+            <Text className="sub-meta" numberOfLines={1} ellipsizeMode="tail">
+              {category?.trim() ||
+                plan?.trim() ||
+                formatSubscriptionDateTime(renewalDate)}
+            </Text>
+          </View>
+        </View>
+
+        <View className="sub-price-box">
+          <Text className="sub-price">
+            {formatCurrency(price, currency)}
+          </Text>
+          <Text className="sub-billing">{billing}</Text>
+        </View>
+      </View>
+
+      {expanded && (
+        <View className="sub-body">
+          <View className="sub-details">
+            <View className="sub-row">
+              <View className="sub-row-copy">
+                <Text className="sub-label">Payment: </Text>
+                <Text
+                  className="sub-value"
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                >
+                  {paymentMethod?.trim()}
+                </Text>
+              </View>
+            </View>
+
+            <View className="sub-row">
+              <View className="sub-row-copy">
+                <Text className="sub-label">Category: </Text>
+                <Text
+                  className="sub-value"
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                >
+                  {category?.trim() || plan?.trim()}
+                </Text>
+              </View>
+            </View>
+
+            <View className="sub-row">
+              <View className="sub-row-copy">
+                <Text className="sub-label">Started: </Text>
+                <Text
+                  className="sub-value"
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                >
+                  {startDate ? formatSubscriptionDateTime(startDate) : ""}
+                </Text>
+              </View>
+            </View>
+
+            <View className="sub-row">
+              <View className="sub-row-copy">
+                <Text className="sub-label">Renewal Date: </Text>
+                <Text
+                  className="sub-value"
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                >
+                  {renewalDate ? formatSubscriptionDateTime(renewalDate) : ""}
+                </Text>
+              </View>
+            </View>
+
+            <View className="sub-row">
+              <View className="sub-row-copy">
+                <Text className="sub-label">Status: </Text>
+                <Text
+                  className="sub-value"
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                >
+                  {status ? formatStatusLabel(status) : ""}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      )}
+    </Pressable>
+  );
+};
+
+export default SubscriptionCard;

components/UpcomingSubscriptionCard.tsx

@@ -0,0 +1,31 @@
+import { formatCurrency } from "@/lib/utils/currency";
+import React from "react";
+import { Image, Text, View } from "react-native";
+
+const UpcomingSubscriptionCard = ({
+  name,
+  price,
+  daysLeft,
+  icon,
+  currency,
+}: UpcomingSubscriptionCardProps) => {
+  return (
+    <View className="upcoming-card">
+      <View className="upcoming-row">
+        <Image source={icon} className="upcoming-icon" />
+        <View>
+          <Text className="upcoming-price">{formatCurrency(price, currency)}</Text>
+          <Text className="upcoming-meta" numberOfLines={1}>
+            {daysLeft} {daysLeft > 1 ? "days" : "day"} left
+          </Text>
+        </View>
+      </View>
+
+      <Text className="upcoming-name" numberOfLines={1}>
+        {name}
+      </Text>
+    </View>
+  );
+};
+
+export default UpcomingSubscriptionCard;