🍉 Kufea - كوفية

Celebrating Palestinian Identity Through Digital Innovation

A modern mobile application showcasing Palestinian culture, heritage, and folklore through an immersive and accessible experience.

---

📖 About

Kufea is a launch-ready MVP that brings Palestinian identity, folklore, and culture to life through a beautifully crafted mobile experience. The app provides an easy-to-explore platform featuring:

• 🍽️ Traditional Palestinian Recipes - Authentic dishes with detailed instructions
• 🎨 Bedouin Handicrafts - Showcasing traditional crafts and artistry
• 👗 Palestinian Thobe - Interactive map of regional embroidery patterns
• 📚 Cultural Heritage - Stories, traditions, and historical context
• 🌍 Multi-language Support - Full Arabic (RTL) and English localization

Built with scalability in mind, Kufea is designed to grow into a comprehensive platform with a web version and future e-commerce capabilities for culturally inspired products.

---

✨ Key Features

🏗️ Enterprise-Grade Architecture

• Feature-based structure - Modular design for scalability and maintainability
• Clear separation of concerns - UI, business logic, and data layers are distinct
• Scalable patterns - Ready for team collaboration and future expansion

🎨 Modern User Experience

• Professional theme system - Light & Dark mode with polished Zinc & Crimson palette
• Consistent typography - Poppins font family with semantic variants
• Smooth animations - React Native Reanimated for fluid interactions
• Responsive design - Optimized for all screen sizes

🌐 Internationalization (i18n)

• RTL Support - Native right-to-left layout for Arabic
• Multi-language - Arabic, English, and French translations
• Context-aware - Seamless language switching with persistent preferences

⚡ Performance Optimized

• Efficient rendering - FlashList for optimized scrolling
• Image optimization - Expo Image with caching
• Fast storage - MMKV for lightning-fast data persistence
• State management - Redux Toolkit with RTK Query for data fetching & caching

📱 Cross-Platform

• iOS & Android - Native performance on both platforms
• New Architecture - Expo's new architecture enabled for better performance

---

🛠️ Tech Stack

Core

• React Native 0.81.5 - Mobile framework
• Expo ~54.0 - Development platform
• TypeScript - Type safety and better DX
• Expo Router - File-based navigation

State & Data

• Redux Toolkit - State management
• RTK Query - Data fetching & caching
• MMKV - High-performance storage
• AsyncStorage - Persistent settings

UI & Styling

• React Native Reanimated - Advanced animations
• Expo Vector Icons - Icon library
• Expo Image - Optimized image handling
• Linear Gradient - Beautiful gradients

Internationalization

• i18next - Translation framework
• react-i18next - React bindings with hooks

Developer Experience

• ESLint - Code linting
• Prettier - Code formatting
• Husky - Git hooks
• TypeScript - Static typing
• pnpm - Fast package manager

---

📁 Project Structure

kufea/
├── app/                    # 🗺️  Expo Router - File-based navigation
│   ├── (tabs)/            # Tab-based screens
│   ├── handicrafts/       # Handicrafts module routes
│   ├── recipes/           # Recipes module routes
│   ├── thobe/             # Thobe module routes
│   └── _layout.tsx        # Root layout
│
├── src/
│   ├── features/          # 🎯 Feature modules (isolated & scalable)
│   │   ├── auth/
│   │   ├── handicrafts/
│   │   ├── home/
│   │   ├── recipes/
│   │   ├── settings/
│   │   └── thobe/
│   │
│   ├── shared/            # 🔧 Shared resources
│   │   ├── ui/           # Reusable UI components
│   │   ├── i18n/         # Localization system
│   │   ├── theme/        # Theme & design tokens
│   │   ├── hooks/        # Custom React hooks
│   │   ├── utils/        # Helper functions
│   │   └── types/        # TypeScript definitions
│   │
│   └── store.ts          # Redux store configuration
│
├── assets/               # 🎨 Static assets
│   └── images/
│
├── docs/                 # 📚 Documentation
│   ├── 01-PROJECT_STRUCTURE.md
│   ├── 02-I18N_TRANSLATION.md
│   └── 03-THOBE_MAP_DOCUMENTATION.md
│
└── config files          # ⚙️  Configuration
    ├── app.json
    ├── tsconfig.json
    ├── eslint.config.js
    └── package.json

---

🚀 Getting Started

Prerequisites

• Node.js 18+ and pnpm installed
• Expo CLI (npm install -g expo-cli)
• iOS Simulator (macOS) or Android Studio for development
• Expo Go app (optional, for quick testing)

Installation

1. Clone the repository

   git clone https://github.com/yourusername/kufea.git
   cd kufea

2. Install dependencies

   pnpm install

3. Start the development server

   pnpm start

4. Run on a platform

   # iOS (macOS only)
   pnpm ios
   
   # Android
   pnpm android
   
   # Web
   pnpm web

Available Scripts

pnpm start          # Start Expo development server
pnpm ios            # Run on iOS simulator
pnpm android        # Run on Android emulator
pnpm web            # Run in web browser
pnpm lint           # Run ESLint
pnpm format         # Format code with Prettier
pnpm lint-format    # Format and lint in sequence
pnpm json-server    # Start mock API server (port 3001)

---

🎨 Design System

Color Palette

• Primary: Crimson (#e11d48) - Sophisticated, professional
• Neutrals: Zinc scale - Modern, warm-toned grays
• Semantic: Success, Error, Warning, Info states

Typography

• Font Family: Poppins (Regular, Medium, SemiBold, Bold, ExtraBold)
• Scale: Caption (12px) → Hero (48px)
• Variants: hero, titleLg, title, subtitle, bodyLg, body, caption

Spacing System

• xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 32px, xxl: 48px

Border Radius

• sm: 4px, md: 8px, lg: 12px, xl: 16px, xxl: 24px, round: 9999px

---

🌍 Localization

Kufea supports full internationalization with:

• Arabic (ar) - Primary language with RTL support
• English (en) - Secondary language
• French (fr) - Additional language

Language is persisted across sessions and can be changed in Settings.

Translation files: src/shared/i18n/locales/

---

📱 Features Breakdown

Home

• Featured stories and content
• Quick access to all categories
• Culturally immersive hero section

Recipes

• Browse traditional Palestinian recipes
• Filter by difficulty and cooking time
• Step-by-step instructions with ingredients
• Beautiful imagery and cultural context

Handicrafts

• Explore Bedouin crafts and traditional arts
• Learn about historical significance
• Visual gallery of craftsmanship

Palestinian Thobe

• Interactive map of Palestine showing regional designs
• Detailed embroidery patterns by region
• Cultural and historical background

Settings

• Theme switching (Light/Dark)
• Language selection with instant switching
• App version and about information

---

🗺️ Roadmap

Phase 1: MVP ✅ (In Progress)

• Core navigation and routing
• Theme system with dark mode
• i18n with RTL support
• Recipes feature with filtering
• Palestinian Thobe interactive map
• Handicrafts content integration
• Polish animations and transitions

Phase 2: Content & Polish

• Add comprehensive recipe database
• Expand handicrafts gallery
• Add user favorites/bookmarks
• Implement search functionality
• Add storytelling/folklore section

Phase 3: Web Platform

• Responsive web version
• SEO optimization
• Progressive Web App (PWA) support
• Content management system (CMS)

Phase 4: E-Commerce

• Shop for culturally inspired products
• Payment integration
• Order management
• User accounts and profiles

---

🤝 Contributing

This is a private project. If you'd like to contribute or collaborate, please reach out to the project maintainer.

---

📄 License

Private - All rights reserved.

---

👨‍💻 Author

Hazem Badran

• Email: hazzemaqbadran@gmail.com
• GitHub: @hazzembadran

---

🙏 Acknowledgments

• Palestinian heritage and culture that inspired this project
• The React Native and Expo communities
• All contributors to open-source libraries used in this project

---

Made with ❤️ for Palestinian Culture

Preserving heritage through innovation