📱 Zeller React Native Code Challenge

Demo

Simulator.Screen.Recording.-.iPhone.16e.-.2026-04-03.at.15.42.08.mov

🚀 Overview

This project is a React Native application built as part of the Zeller coding challenge. It demonstrates offline-first architecture, clean code practices, and a scalable structure.

The app allows users to:

• View customers
• Filter by role (Admin / Manager)
• Search by name
• Add and delete users
• Persist data locally for offline usage

---

✨ Features

📡 Data Integration

• Integrated with GraphQL API (listZellerCustomers)
• Data is fetched from API and stored in local SQLite database
• UI always reads from local DB (offline-first approach)

---

👤 User Management

• Add new users (stored locally)

• Delete users with confirmation

• Form validation:

  • Name required
  • Only alphabets & spaces
  • Max 50 characters
  • Valid email format

---

🔍 Filtering & Search

• Filter users by:

  • All
  • Admin
  • Manager

• Real-time search by name

---

🎨 UI & UX

• SectionList grouped alphabetically (A, B, C…)
• Custom reusable Tab Bar component
• Floating Action Button (FAB)
• Clean and minimal UI (matching design reference)
• Empty state handling

---

⚡ Performance & Architecture

• Offline-first design
• Local DB is source of truth
• Zustand for lightweight state management
• Reusable components for scalability

---

🧱 Tech Stack

• React Native (TypeScript)
• GraphQL (Apollo Client)
• SQLite (react-native-sqlite-storage)
• Zustand (state management)
• React Hook Form + Yup (validation)

---

📂 Project Structure

src/
 ├── api/              # GraphQL setup & queries
 ├── components/       # Reusable UI components
 ├── database/         # SQLite logic
 ├── hooks/            # Custom hooks (business logic)
 ├── navigation/       # Navigation + types
 ├── screens/          # App screens
 ├── store/            # Zustand store
 ├── types/            # TypeScript types
 └── utils/            # Validation schemas

---

⚙️ Setup Instructions

1. Install dependencies

yarn install

2. iOS setup

cd ios
pod install
cd ..

3. Run app

iOS

yarn ios

Android

yarn android

---

🧪 Testing

(To Test)

yarn test

---

📌 Key Design Decisions

🟢 Offline-first Approach

• API data is stored in SQLite
• UI reads from DB → works without internet

🟢 Separation of Concerns

• API, DB, UI, and state are clearly separated
• Business logic handled in custom hooks

🟢 Reusable Components

• Custom Tab Bar extracted for reuse
• Scalable structure for future features

---

🙌 Conclusion

This project focuses on:

• Clean architecture
• Maintainability
• Real-world production patterns

---