Initial commit

Generated by create-expo-app 3.2.0.
2025-03-10 19:49:23 +01:00
commit b24544f115
30 changed files with 17173 additions and 0 deletions
@@ -0,0 +1,45 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+ios
+android
+.idea
+.windsurfrules
+.env
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example
+
+.env.local
@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+    npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
@@ -0,0 +1,52 @@
+{
+  "expo": {
+    "name": "shoppingapp",
+    "slug": "shoppingapp",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "mnkyshop",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": false,
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.anonymous.shoppingapp",
+      "appleTeamId": "8AF5S7C42H"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.anonymous.shoppingapp"
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash-icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
+          "backgroundColor": "#ffffff"
+        }
+      ],
+      [
+        "@sentry/react-native/expo",
+        {
+          "url": "https://sentry.io/",
+          "project": "shoppingapp",
+          "organization": "secure-whisper"
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}
@@ -0,0 +1,103 @@
+import CardButton from "@/components/CartButton";
+import { useReactQueryDevTools } from "@dev-plugins/react-query";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  router,
+  Stack,
+  useNavigationContainerRef,
+  useRouter,
+} from "expo-router";
+import { useMMKVDevTools } from "@dev-plugins/react-native-mmkv";
+import { storage } from "@/store/mmkv";
+import * as Sentry from "@sentry/react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { TouchableOpacity } from "react-native";
+import React, { useEffect, useRef } from "react";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { NavigationContainerRef } from "@react-navigation/native";
+
+const navigationIntegration = Sentry.reactNavigationIntegration({
+  enableTimeToInitialDisplay: true, // Only in native builds, not in Expo Go.
+});
+
+Sentry.init({
+  dsn: "https://8af0004917f7c8cfb06b2beac6fd3a66@o4507486642765824.ingest.de.sentry.io/4508981409808464",
+  attachScreenshot: true,
+  debug: false,
+  tracesSampleRate: 1.0, // Adjust this value in production
+  _experiments: {
+    profilesSampleRate: 1.0, // Only during debugging, change to lower value in production
+    replaysSessionSampleRate: 1.0, // Only during debugging, change to lower value in production
+    replaysOnErrorSampleRate: 1,
+  },
+  integrations: [
+    Sentry.mobileReplayIntegration({
+      maskAllText: false,
+      maskAllImages: true,
+      maskAllVectors: false,
+    }),
+    Sentry.spotlightIntegration(),
+    navigationIntegration,
+  ],
+  // uncomment the line below to enable Spotlight (https://spotlightjs.com)
+  // spotlight: __DEV__,
+});
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 60 * 1000, // 1 minute
+    },
+  },
+});
+
+const RootLayout = () => {
+  useReactQueryDevTools(queryClient);
+  useMMKVDevTools({
+    storage,
+  });
+
+  const router = useRouter();
+  const navigationRef = useNavigationContainerRef();
+
+  useEffect(() => {
+    navigationIntegration.registerNavigationContainer(navigationRef);
+  }, [navigationRef]);
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <GestureHandlerRootView>
+        <Stack>
+          <Stack.Screen
+            name="index"
+            options={{
+              title: "Products",
+              headerShadowVisible: false,
+              headerSearchBarOptions: {
+                placeholder: "Search products",
+                hideWhenScrolling: false,
+                hideNavigationBar: false,
+              },
+              headerRight: () => <CardButton />,
+            }}
+          />
+          <Stack.Screen name="product/[id]" options={{ title: "Product" }} />
+          <Stack.Screen
+            name="cart"
+            options={{
+              title: "Cart",
+              presentation: "modal",
+              headerLeft: () => (
+                <TouchableOpacity onPress={() => router.back()}>
+                  <Ionicons name="arrow-back" size={20} color="black" />
+                </TouchableOpacity>
+              ),
+            }}
+          />
+        </Stack>
+      </GestureHandlerRootView>
+    </QueryClientProvider>
+  );
+};
+
+export default Sentry.wrap(RootLayout);
@@ -0,0 +1,91 @@
+import CartItem from "@/components/CartItem";
+import useCartStore from "@/store/cartStore";
+import { COLORS } from "@/utils/colors";
+import Ionicons from "@expo/vector-icons/Ionicons";
+import { useRouter } from "expo-router";
+import {
+  Alert,
+  FlatList,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const Page = () => {
+  const { products, total, clearCart } = useCartStore();
+  const { bottom } = useSafeAreaInsets();
+  const router = useRouter();
+
+  const handleCheckout = () => {
+    if (products.length === 0) {
+      Alert.alert("Add some products to your cart first!");
+      return;
+    }
+    clearCart();
+    Alert.alert("Checkout successful!");
+    router.dismiss();
+  };
+
+  return (
+    <View style={styles.container}>
+      {products.length === 0 && (
+        <Text style={styles.emptyText}>No products in the cart</Text>
+      )}
+      <FlatList
+        data={products}
+        contentContainerStyle={{ gap: 10 }}
+        renderItem={({ item }) => <CartItem item={item} />}
+        keyExtractor={(item) => item.id.toString()}
+        ListHeaderComponent={() => (
+          <>
+            {products.length && (
+              <Text style={styles.totalText}>Total: ${total.toFixed(2)}</Text>
+            )}
+          </>
+        )}
+      />
+      <TouchableOpacity
+        style={[
+          styles.addToCartButton,
+          { paddingBottom: Platform.OS === "ios" ? bottom : 20 },
+        ]}
+        onPress={handleCheckout}
+      >
+        <Ionicons name="checkmark" size={20} color="white" />
+        <Text style={styles.addToCartText}>Checkout</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+export default Page;
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  emptyText: {
+    textAlign: "center",
+  },
+  totalText: {
+    fontSize: 20,
+    fontWeight: "bold",
+    textAlign: "center",
+    padding: 10,
+  },
+  addToCartButton: {
+    backgroundColor: COLORS.primary,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    padding: 16,
+  },
+  addToCartText: {
+    color: "white",
+    fontWeight: "600",
+    fontSize: 16,
+  },
+});
@@ -0,0 +1,145 @@
+import ProductCard from "@/components/ProductCart";
+import { fetchProducts, getCategories, Product } from "@/utils/api";
+import { COLORS } from "@/utils/colors";
+import { FlashList } from "@shopify/flash-list";
+import { useQuery } from "@tanstack/react-query";
+import { Stack } from "expo-router";
+import React, { useCallback, useMemo } from "react";
+import {
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  View,
+  Text,
+  Platform,
+} from "react-native";
+import { useHeaderHeight } from "@react-navigation/elements";
+import { ProductShimmerGrid } from "@/components/ProductListShimmer";
+
+export default function Index() {
+  const [selectedCategory, setSelectedCategory] = React.useState("all");
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const headerHeight = useHeaderHeight();
+
+  const {
+    data: products,
+    refetch,
+    isLoading,
+    isRefetching,
+  } = useQuery({
+    queryKey: ["products"],
+    queryFn: fetchProducts,
+  });
+
+  const { data: categories = [] } = useQuery({
+    queryKey: ["categories"],
+    queryFn: getCategories,
+  });
+
+  const renderProduct = useCallback(
+    ({ item }: { item: Product }) => <ProductCard product={item} />,
+    []
+  );
+
+  const allCategories = ["all", ...categories];
+
+  const filteredProducts = useMemo(() => {
+    return products?.filter((product) => {
+      if (selectedCategory !== "all") {
+        return product.category === selectedCategory;
+      }
+      return product.title.toLowerCase().includes(searchQuery.toLowerCase());
+    });
+  }, [products, selectedCategory, searchQuery]);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { marginTop: Platform.select({ ios: headerHeight, android: 0 }) },
+      ]}
+    >
+      <Stack.Screen
+        options={{
+          headerSearchBarOptions: {
+            onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
+          },
+        }}
+      />
+      <View style={styles.categoryContainer}>
+        <ScrollView
+          style={styles.categoryScrollView}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+        >
+          {allCategories.map((category) => (
+            <Pressable
+              key={category}
+              onPress={() => setSelectedCategory(category)}
+              style={[
+                styles.categoryButton,
+                selectedCategory === category && styles.selectedCategoryButton,
+              ]}
+            >
+              <Text
+                style={[
+                  styles.categoryText,
+                  selectedCategory === category && styles.selectedCategoryText,
+                ]}
+              >
+                {category.charAt(0).toUpperCase() + category.slice(1)}
+              </Text>
+            </Pressable>
+          ))}
+        </ScrollView>
+      </View>
+
+      {isLoading ? (
+        <ProductShimmerGrid />
+      ) : (
+        <FlashList
+          data={filteredProducts}
+          renderItem={renderProduct}
+          estimatedItemSize={200}
+          numColumns={2}
+          contentContainerStyle={{ padding: 8 }}
+          keyExtractor={(item) => item.id.toString()}
+          onRefresh={refetch}
+          refreshing={isRefetching}
+        />
+      )}
+    </View>
+  );
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  categoryContainer: {
+    height: 60,
+    zIndex: 1,
+    boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
+  },
+  categoryScrollView: {
+    padding: 12,
+  },
+  categoryButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 20,
+    marginHorizontal: 4,
+    backgroundColor: COLORS.lightGray,
+    alignSelf: "center",
+  },
+  categoryText: {
+    fontSize: 14,
+    color: COLORS.white,
+  },
+  selectedCategoryButton: {
+    backgroundColor: COLORS.primary,
+  },
+  selectedCategoryText: {
+    color: COLORS.white,
+  },
+});
@@ -0,0 +1,167 @@
+import { ProductDetailsShimmer } from "@/components/ProductDetailsShimmer";
+import { fetchProduct } from "@/utils/api";
+import { COLORS } from "@/utils/colors";
+import { useQuery } from "@tanstack/react-query";
+import { Image } from "expo-image";
+import { Stack, useLocalSearchParams } from "expo-router";
+import React from "react";
+
+import useCartStore from "@/store/cartStore";
+import { Ionicons } from "@expo/vector-icons";
+import {
+  Platform,
+  ScrollView,
+  Share,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const Page = () => {
+  const { id } = useLocalSearchParams();
+  const { bottom } = useSafeAreaInsets();
+
+  const { addProduct } = useCartStore();
+
+  const { data: product, isLoading } = useQuery({
+    queryKey: ["product", id],
+    queryFn: () => fetchProduct(Number(id)),
+  });
+
+  const onShare = async () => {
+    const url = `mnkyshop://product/${product?.id}`;
+    if (Platform.OS === "ios") {
+      await Share.share({
+        url,
+        message: `Check out this product on Galaxies Shop: ${url}`,
+      });
+    } else {
+      await Share.share({
+        message: `Check out this product on Galaxies Shop: ${url}`,
+      });
+    }
+  };
+
+  if (isLoading) {
+    return <ProductDetailsShimmer />;
+  }
+
+  if (!product) {
+    return <Text>Product not found</Text>;
+  }
+
+  const handleAddToCart = () => {
+    addProduct(product);
+  };
+
+  return (
+    <View style={styles.container}>
+      <Stack.Screen
+        options={{
+          title: product?.title,
+          headerRight: () => (
+            <TouchableOpacity onPress={onShare}>
+              <Ionicons name="share-outline" size={24} color={COLORS.primary} />
+            </TouchableOpacity>
+          ),
+        }}
+      />
+      <ScrollView>
+        <Image
+          source={{ uri: product.image }}
+          style={styles.image}
+          contentFit="contain"
+        />
+        <View style={styles.content}>
+          <Text style={styles.title}>{product.title}</Text>
+          <Text style={styles.price}>${product.price}</Text>
+          <Text style={styles.category}>{product.category}</Text>
+          <Text style={styles.description}>{product.description}</Text>
+          <View style={styles.ratingContainer}>
+            <Text style={styles.rating}>★ {product.rating.rate}</Text>
+            <Text style={styles.ratingCount}>
+              ({product.rating.count} reviews)
+            </Text>
+          </View>
+        </View>
+      </ScrollView>
+
+      <TouchableOpacity
+        style={[
+          styles.addToCartButton,
+          { paddingBottom: Platform.OS === "ios" ? bottom : 20 },
+        ]}
+        onPress={handleAddToCart}
+      >
+        <Ionicons name="cart" size={20} color="white" />
+        <Text style={styles.addToCartText}>Add to Cart</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default Page;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  image: {
+    width: "100%",
+    height: 300,
+    backgroundColor: "#f9f9f9",
+  },
+  content: {
+    padding: 16,
+    gap: 12,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "600",
+  },
+  price: {
+    fontSize: 20,
+    fontWeight: "700",
+    color: COLORS.primary,
+  },
+  category: {
+    fontSize: 16,
+    color: "#666",
+    textTransform: "capitalize",
+  },
+  description: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: "#333",
+  },
+  ratingContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  rating: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#FFB800",
+  },
+  ratingCount: {
+    fontSize: 14,
+    color: "#666",
+  },
+  addToCartButton: {
+    backgroundColor: COLORS.primary,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    padding: 16,
+  },
+  addToCartText: {
+    color: "white",
+    fontWeight: "600",
+    fontSize: 16,
+  },
+});
@@ -0,0 +1,11 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: [
+      ['babel-preset-expo', {
+        unstable_transformImportMeta: true
+      }]
+    ]
+  };
+};
+
@@ -0,0 +1,44 @@
+import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
+import React from "react";
+import useCartStore from "@/store/cartStore";
+import { COLORS } from "@/utils/colors";
+import { Ionicons } from "@expo/vector-icons";
+import { Link } from "expo-router";
+
+const CardButton = () => {
+  const { count } = useCartStore();
+  return (
+    <Link href="/cart" asChild>
+      <TouchableOpacity onPress={() => {}}>
+        {count > 0 && (
+          <View style={styles.countContainer}>
+            <Text style={styles.countText}>{count}</Text>
+          </View>
+        )}
+        <Ionicons name="cart" size={28} color="black" />
+      </TouchableOpacity>
+    </Link>
+  );
+};
+
+export default CardButton;
+
+const styles = StyleSheet.create({
+  countContainer: {
+    position: "absolute",
+    right: -10,
+    bottom: -5,
+    backgroundColor: COLORS.primary,
+    borderRadius: 10,
+    zIndex: 1,
+    width: 20,
+    height: 20,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  countText: {
+    fontSize: 12,
+    fontWeight: "bold",
+    color: COLORS.white,
+  },
+});
@@ -0,0 +1,189 @@
+import { Product } from "@/utils/api";
+import { Image } from "expo-image";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import useCartStore from "@/store/cartStore";
+import Ionicons from "@expo/vector-icons/Ionicons";
+import { COLORS } from "@/utils/colors";
+import { useRef } from "react";
+import Reanimated, {
+  SharedValue,
+  useAnimatedStyle,
+  useSharedValue,
+  withSequence,
+  withSpring,
+  Easing,
+  withTiming,
+} from "react-native-reanimated";
+
+import ReanimatedSwipeable, {
+  SwipeableMethods,
+} from "react-native-gesture-handler/ReanimatedSwipeable";
+
+interface CartItemProps {
+  item: Product & { quantity: number };
+}
+
+const LeftActions = (
+  progress: SharedValue<number>,
+  dragX: SharedValue<number>,
+  onShouldDelete: () => void
+) => {
+  const styleAnimation = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: dragX.value - 100 }],
+    };
+  });
+  return (
+    <Reanimated.View style={styleAnimation}>
+      <TouchableOpacity style={styles.leftAction} onPress={onShouldDelete}>
+        <Ionicons name="trash" size={24} color="#fff" />
+      </TouchableOpacity>
+    </Reanimated.View>
+  );
+};
+
+const CartItem = ({ item }: CartItemProps) => {
+  const { addProduct, reduceProduct } = useCartStore();
+  const reanimatedRef = useRef<SwipeableMethods>(null);
+  const opacityAnim = useSharedValue(1);
+  const scaleAnim = useSharedValue(1);
+  const heightAnim = useSharedValue(80);
+
+  const handleQuantityChanged = (type: "increment" | "decrement") => {
+    if (type === "increment") {
+      addProduct(item);
+    } else {
+      reduceProduct(item);
+    }
+
+    scaleAnim.value = withSequence(
+      withSpring(1.2, { damping: 2, stiffness: 80 }),
+      withSpring(1, { damping: 2, stiffness: 80 })
+    );
+  };
+
+  const onShouldDelete = async () => {
+    opacityAnim.value = withTiming(0, {
+      duration: 300,
+      easing: Easing.inOut(Easing.ease),
+    });
+
+    heightAnim.value = withTiming(0, {
+      duration: 300,
+      easing: Easing.inOut(Easing.ease),
+    });
+
+    await new Promise((resolve) => setTimeout(resolve, 300));
+
+    reanimatedRef.current?.close();
+    for (let i = 0; i < item.quantity; i++) {
+      reduceProduct(item);
+    }
+  };
+
+  const quantityAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ scale: scaleAnim.value }],
+    };
+  });
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacityAnim.value,
+      height: heightAnim.value,
+    };
+  });
+
+  return (
+    <Reanimated.View style={animatedStyle}>
+      <ReanimatedSwipeable
+        ref={reanimatedRef}
+        leftThreshold={50}
+        friction={2}
+        containerStyle={styles.swipeable}
+        renderLeftActions={(progress, dragX) =>
+          LeftActions(progress, dragX, onShouldDelete)
+        }
+      >
+        <View style={styles.cartItemContainer}>
+          <Image source={{ uri: item.image }} style={styles.image} />
+          <View style={styles.itemContainer}>
+            <Text style={styles.cartItemName} numberOfLines={2}>
+              {item.title}
+            </Text>
+            <Text>Price: ${item.price}</Text>
+          </View>
+          <View style={styles.quantityContainer}>
+            <TouchableOpacity
+              onPress={() => handleQuantityChanged("decrement")}
+              style={styles.quantityButton}
+            >
+              <Ionicons name="remove" size={24} color="black" />
+            </TouchableOpacity>
+            <Reanimated.Text
+              style={[styles.cartItemQuantity, quantityAnimatedStyle]}
+            >
+              {item.quantity}
+            </Reanimated.Text>
+            <TouchableOpacity
+              onPress={() => handleQuantityChanged("increment")}
+              style={styles.quantityButton}
+            >
+              <Ionicons name="add" size={24} color="black" />
+            </TouchableOpacity>
+          </View>
+        </View>
+      </ReanimatedSwipeable>
+    </Reanimated.View>
+  );
+};
+export default CartItem;
+const styles = StyleSheet.create({
+  cartItemContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 20,
+    backgroundColor: "#fff",
+    height: 80,
+  },
+  image: {
+    width: 50,
+    height: "100%",
+    borderRadius: 10,
+    resizeMode: "contain",
+  },
+  itemContainer: {
+    flex: 1,
+  },
+  cartItemName: {
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  quantityContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+  },
+  quantityButton: {
+    padding: 10,
+  },
+  cartItemQuantity: {
+    fontWeight: "bold",
+    backgroundColor: COLORS.primary,
+    fontSize: 16,
+    padding: 5,
+    width: 30,
+    color: "white",
+    textAlign: "center",
+  },
+  swipeable: {
+    height: 80,
+  },
+  leftAction: {
+    backgroundColor: "red",
+    width: 100,
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
@@ -0,0 +1,58 @@
+import { Product } from "@/utils/api";
+import { COLORS } from "@/utils/colors";
+import { useRouter } from "expo-router";
+import React from "react";
+import { Pressable, StyleSheet, Text, Image, View } from "react-native";
+
+interface ProductCardProps {
+  product: Product;
+}
+
+const ProductCard = ({ product }: ProductCardProps) => {
+  const router = useRouter();
+  return (
+    <Pressable
+      style={styles.productCard}
+      onPress={() => router.push(`/product/${product.id}`)}
+    >
+      <Image source={{ uri: product.image }} style={styles.image} />
+      <View style={styles.productInfo}>
+        <Text style={styles.title} numberOfLines={2}>
+          {product.title}
+        </Text>
+        <Text style={styles.price}>{product.price}</Text>
+      </View>
+    </Pressable>
+  );
+};
+
+export default ProductCard;
+
+const styles = StyleSheet.create({
+  productCard: {
+    flex: 1,
+    margin: 0,
+    gap: 8,
+    padding: 12,
+    borderRadius: 16,
+    backgroundColor: "#fff",
+    boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
+  },
+  image: {
+    width: "100%",
+    height: 150,
+    borderRadius: 12,
+  },
+  productInfo: {
+    gap: 4,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "500",
+  },
+  price: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: COLORS.primary,
+  },
+});
@@ -0,0 +1,79 @@
+import { View, StyleSheet } from "react-native";
+import { createShimmerPlaceholder } from "react-native-shimmer-placeholder";
+import { LinearGradient } from "expo-linear-gradient";
+
+const ShimmerPlaceholder = createShimmerPlaceholder(LinearGradient);
+
+export function ProductDetailsShimmer() {
+  return (
+    <View style={styles.container}>
+      <ShimmerPlaceholder
+        style={styles.image}
+        shimmerColors={["#ebebeb", "#ddd", "#ebebeb"]}
+      />
+      <View style={styles.content}>
+        <ShimmerPlaceholder
+          style={styles.title}
+          shimmerColors={["#ebebeb", "#ddd", "#ebebeb"]}
+        />
+        <ShimmerPlaceholder
+          style={styles.price}
+          shimmerColors={["#ebebeb", "#ddd", "#ebebeb"]}
+        />
+        <ShimmerPlaceholder
+          style={styles.category}
+          shimmerColors={["#ebebeb", "#ddd", "#ebebeb"]}
+        />
+        <ShimmerPlaceholder
+          style={styles.description}
+          shimmerColors={["#ebebeb", "#ddd", "#ebebeb"]}
+        />
+        <ShimmerPlaceholder
+          style={styles.rating}
+          shimmerColors={["#ebebeb", "#ddd", "#ebebeb"]}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  image: {
+    width: "100%",
+    height: 400,
+    backgroundColor: "#f9f9f9",
+  },
+  content: {
+    padding: 16,
+    gap: 12,
+  },
+  title: {
+    height: 28,
+    width: "70%",
+    borderRadius: 4,
+  },
+  price: {
+    height: 24,
+    width: "20%",
+    borderRadius: 4,
+  },
+  category: {
+    height: 20,
+    width: "40%",
+    borderRadius: 4,
+  },
+  description: {
+    height: 80,
+    width: "100%",
+    borderRadius: 4,
+  },
+  rating: {
+    height: 20,
+    width: "30%",
+    borderRadius: 4,
+  },
+});
@@ -0,0 +1,88 @@
+import { View, StyleSheet, Dimensions } from "react-native";
+import React from "react";
+import { createShimmerPlaceholder } from "react-native-shimmer-placeholder";
+import { LinearGradient } from "expo-linear-gradient";
+
+const Placeholder = createShimmerPlaceholder(LinearGradient);
+
+const { width } = Dimensions.get("window");
+const CARD_WIDTH = width * 0.43;
+
+const ProductShimmer = () => {
+  return (
+    <View style={styles.card}>
+      {/* Image placeholder */}
+      <Placeholder
+        style={styles.image}
+        shimmerColors={["#ebebeb", "#ddd", "#ebebeb"]}
+      />
+
+      {/* Content container */}
+      <View style={styles.content}>
+        {/* Title placeholder */}
+        <Placeholder
+          style={styles.title}
+          shimmerColors={["#ebebeb", "#ddd", "#ebebeb"]}
+        />
+
+        {/* Rating container placeholder */}
+        <View style={styles.ratingContainer}>
+          <Placeholder
+            style={styles.rating}
+            shimmerColors={["#ebebeb", "#ddd", "#ebebeb"]}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export const ProductShimmerGrid = () => {
+  return (
+    <View style={styles.container}>
+      {[...Array(6)].map((_, index) => (
+        <ProductShimmer key={index} />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8,
+    justifyContent: "center",
+  },
+  card: {
+    width: CARD_WIDTH,
+    backgroundColor: "white",
+    borderRadius: 12,
+    margin: 8,
+    boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
+  },
+  image: {
+    width: "100%",
+    height: CARD_WIDTH, // Square image
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
+  },
+  content: {
+    padding: 12,
+    gap: 8,
+  },
+  title: {
+    height: 20,
+    width: "85%",
+    borderRadius: 4,
+  },
+  ratingContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  rating: {
+    height: 16,
+    width: "30%",
+    borderRadius: 4,
+  },
+});
@@ -0,0 +1,11 @@
+const { getSentryExpoConfig } = require('@sentry/react-native/metro');
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getSentryExpoConfig(__dirname, {
+  annotateReactComponents: true,
+  enableSourceContextInDevelopment: true,
+});
+
+module.exports = config;
+
+// https://docs.sentry.io/platforms/react-native/session-replay/#react-component-names
@@ -0,0 +1,66 @@
+{
+  "name": "shoppingapp",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web",
+    "test": "jest --watchAll",
+    "lint": "expo lint"
+  },
+  "jest": {
+    "preset": "jest-expo"
+  },
+  "dependencies": {
+    "@dev-plugins/react-native-mmkv": "~0.2.0",
+    "@dev-plugins/react-query": "~0.2.0",
+    "@expo/vector-icons": "^14.0.2",
+    "@react-navigation/bottom-tabs": "^7.2.0",
+    "@react-navigation/native": "^7.0.14",
+    "@sentry/react-native": "~6.10.0",
+    "@shopify/flash-list": "1.7.3",
+    "@tanstack/react-query": "^5.67.3",
+    "expo": "~52.0.37",
+    "expo-blur": "~14.0.3",
+    "expo-constants": "~17.0.7",
+    "expo-dev-client": "~5.0.12",
+    "expo-font": "~13.0.4",
+    "expo-haptics": "~14.0.1",
+    "expo-image": "~2.0.6",
+    "expo-linear-gradient": "~14.0.2",
+    "expo-linking": "~7.0.5",
+    "expo-router": "~4.0.17",
+    "expo-splash-screen": "~0.29.22",
+    "expo-status-bar": "~2.0.1",
+    "expo-symbols": "~0.2.2",
+    "expo-system-ui": "~4.0.8",
+    "expo-web-browser": "~14.0.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.9",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-mmkv": "^3.2.0",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.4.0",
+    "react-native-shimmer-placeholder": "^2.0.9",
+    "react-native-web": "~0.19.13",
+    "react-native-webview": "13.12.5",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@tanstack/eslint-plugin-query": "^5.67.2",
+    "@types/jest": "^29.5.12",
+    "@types/react": "~18.3.12",
+    "@types/react-test-renderer": "^18.3.0",
+    "jest": "^29.2.1",
+    "jest-expo": "~52.0.4",
+    "react-test-renderer": "18.3.1",
+    "typescript": "^5.3.3"
+  },
+  "private": true
+}
@@ -0,0 +1,78 @@
+import { Product } from "@/utils/api";
+import { create } from "zustand";
+import { zustandStorage } from "@/store/mmkv";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+export interface CartState {
+  products: Array<Product & { quantity: number }>;
+  addProduct: (product: Product) => void;
+  reduceProduct: (product: Product) => void;
+  clearCart: () => void;
+  total: number;
+  count: number;
+}
+
+const INITIAL_STATE = {
+  products: [],
+  total: 0,
+  count: 0,
+};
+
+const useCartStore = create<CartState>()(
+  persist(
+    (set) => ({
+      ...INITIAL_STATE,
+      addProduct: (product) => {
+        set((state) => {
+          const hasProduct = state.products.find((p) => p.id === product.id);
+          const newTotal = +state.total.toFixed(2) + +product.price.toFixed(2);
+          const newCount = state.count + 1;
+
+          if (hasProduct) {
+            return {
+              products: state.products.map((p) =>
+                p.id === product.id ? { ...p, quantity: p.quantity + 1 } : p
+              ),
+              total: +newTotal.toFixed(2),
+              count: newCount,
+            };
+          } else {
+            return {
+              products: [...state.products, { ...product, quantity: 1 }],
+              total: +newTotal.toFixed(2),
+              count: newCount,
+            };
+          }
+        });
+      },
+      reduceProduct: (product) => {
+        set((state) => {
+          const newTotal = +state.total.toFixed(2) - +product.price.toFixed(2);
+          const newCount = state.count - 1;
+
+          return {
+            products: state.products
+              .map((p) => {
+                if (p.id === product.id) {
+                  return { ...p, quantity: p.quantity - 1 };
+                }
+                return p;
+              })
+              .filter((p) => p.quantity > 0),
+            total: newTotal,
+            count: newCount,
+          };
+        });
+      },
+      clearCart: () => {
+        set(INITIAL_STATE);
+      },
+    }),
+    {
+      name: "cart",
+      storage: createJSONStorage(() => zustandStorage),
+    }
+  )
+);
+
+export default useCartStore;
@@ -0,0 +1,12 @@
+import { MMKV } from "react-native-mmkv";
+import { StateStorage } from "zustand/middleware";
+
+export const storage = new MMKV({
+  id: "mmkv-storage",
+});
+
+export const zustandStorage: StateStorage = {
+  getItem: (key) => storage.getString(key) || null,
+  setItem: (key, value) => storage.set(key, value),
+  removeItem: (key) => storage.delete(key),
+};
@@ -0,0 +1,17 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts"
+  ]
+}
@@ -0,0 +1,31 @@
+const API_URL = process.env.EXPO_PUBLIC_API_URL;
+
+export interface Product {
+  id: number;
+  title: string;
+  price: number;
+  description: string;
+  category: string;
+  image: string;
+  rating: Rating;
+}
+
+export interface Rating {
+  rate: number;
+  count: number;
+}
+
+export const fetchProducts = async (): Promise<Product[]> => {
+  const response = await fetch(`${API_URL}/products`);
+  return response.json();
+};
+
+export const fetchProduct = async (id: number): Promise<Product> => {
+  const response = await fetch(`${API_URL}/products/${id}`);
+  return response.json();
+};
+
+export const getCategories = async (): Promise<string[]> => {
+  const response = await fetch(`${API_URL}/products/categories`);
+  return response.json();
+};
@@ -0,0 +1,15 @@
+export const COLORS = {
+  primary: "#007AFF",
+  secondary: "#FF0000",
+  background: "#FFFFFF",
+  text: "#000000",
+  white: "#FFFFFF",
+  black: "#000000",
+  gray: "#666666",
+  lightGray: "#999999",
+  darkGray: "#333333",
+  success: "#4CAF50",
+  warning: "#FFC107",
+  error: "#F44336",
+  info: "#2196F3",
+};