Product Assessment Expo Starter

This package is a clean Expo SDK 55 starter for the React Native practical assignment. It intentionally opens to a simple welcome screen so the evaluator can see the project runs before the candidate builds the requested UI.

What is already included

• Expo SDK 55 with React Native 0.83 and React 19.
• React Navigation native stack with typed route names.
• TanStack Query provider for server state and API loading/error handling.
• Zustand auth store with MMKV-backed session persistence.
• Axios + React Query Kit API hooks for login, product list, and product detail.
• A small theme token file and reusable screen/button components.

Setup

Use Node 20.19.x or newer, matching Expo SDK 55 requirements.

npm install
npm run start

Open the app in Expo Go, or run one of:

npm run ios
npm run android

Suggested implementation path

1. Replace the welcome route with Login, Products, and ProductDetail screens.
2. Use the existing feature hooks for DummyJSON requests:
   • src/features/auth/api/use-login.ts
   • src/features/products/api/use-products.ts
   • src/features/products/api/use-product-detail.ts
3. Use src/store/auth-store.ts to save and clear the authenticated session.
4. Use src/navigation/types.ts to keep navigation parameters typed.
5. Keep UI components under src/components and screen-level code under src/screens.

Folder structure

src/
  components/   Reusable UI building blocks
  constants/    API route constants
  core/         Shared Axios client, query provider, React Query Kit exports
  features/     Feature-first API hooks and types
  navigation/   Root navigator and route typing
  screens/      Welcome screen now; assignment screens go here
  storage/      MMKV persistence wrapper
  store/        Zustand stores
  theme/        Shared color and spacing tokens

Dependencies and rationale

• @react-navigation/native and @react-navigation/native-stack: production-ready native navigation.
• @tanstack/react-query: powers server-state caching under React Query Kit.
• axios: shared HTTP client with base URL, timeout, and response error normalization.
• react-query-kit: creates consistent useLogin, useProducts, and detail hooks.
• zustand: small state container for auth/session logic without Redux boilerplate.
• react-native-mmkv: fast persistent storage for session data.
• react-native-safe-area-context and react-native-screens: required React Navigation native support packages.

Assignment assumptions

• The Figma link was not provided, so this starter only defines structure and a welcome screen.
• MMKV is used instead of AsyncStorage because the package brief requested MMKV.
• The starter does not prebuild native projects; it is intended to run through Expo first.
• Web support is intentionally not included to keep the mobile assignment dependency set lean.
• API calls use the shared Axios client so request style stays consistent across screens.

API hook pattern

import { client, AxiosError, createMutation } from "@/core/api";
import { URL } from "@/constants/URL";

type Variables = {
  username: string;
  password: string;
};

type Response = {
  accessToken: string;
  refreshToken: string;
};

const useLogin = createMutation<Response, Variables, AxiosError>({
  mutationFn: async (variables) =>
    client({
      url: URL.LOGIN,
      method: "POST",
      data: variables,
    }).then((response) => response.data),
});

export { useLogin };

Future improvements

• Add form validation and field-level errors on the login screen.
• Add product list pagination or virtualization for larger datasets.
• Add query-level tests for API hooks once screens are implemented.
• Add a small design system once the Figma file is available.