---

📋 Table of Contents

#	Section
1	🌟 About the Project
2	✨ Features
3	🏗️ App Architecture
4	📱 Screen Flow
5	🛠️ Tech Stack
6	📁 Project Structure
7	🚀 Getting Started
8	🔌 API Reference
9	🎨 Design System
10	👨‍💻 Developer

---

🌟 About the Project

FarmerEats is a full-featured mobile application built as part of a practical assignment for sowlab.com. It creates a direct bridge between local farmers and consumers, enabling farmers to register their business, set operating hours, upload verification documents, and manage their farm profile.

The app is built using React Native with Expo SDK 54, integrating REST APIs, multi-step registration flows, JWT authentication, and secure local storage — all with a premium, polished design.

🎯 Assignment Objectives Covered

• ✅ Splash Screen with animated intro
• ✅ 3-slide Onboarding carousel with animated dot indicators
• ✅ Login with email/password + JWT token storage
• ✅ 5-step Farmer Registration flow with data accumulation
• ✅ Forgot Password → OTP Verification → Reset Password
• ✅ Home Dashboard with user stats
• ✅ Full API integration with sowlab.com/assignment
• ✅ Custom reusable component library

---

✨ Features

Feature	Description	Status
🔐 JWT Authentication	Secure login with token persistence via AsyncStorage	✅ Done
📋 5-Step Registration	Multi-screen form with shared state via module-level object	✅ Done
📱 Onboarding Carousel	Horizontal FlatList with animated expanding dots	✅ Done
🔑 Forgot Password Flow	Mobile OTP → 6-digit verify → reset with strength meter	✅ Done
📄 Document Upload	Business registration proof via expo-document-picker	✅ Done
🕐 Business Hours	Day-by-day time slot selector with schedule summary	✅ Done
🗺️ State Dropdown	All 50 US states with custom dropdown (no external lib)	✅ Done
💪 Password Strength	Real-time visual strength indicator (weak/medium/strong)	✅ Done
🎨 Custom Components	Reusable CustomInput, CustomButton, StepIndicator	✅ Done
🌿 Brand Design System	Consistent colors, fonts (BeVietnamPro), spacing tokens	✅ Done

---

🏗️ App Architecture

┌─────────────────────────────────────────────────────┐
│                    index.js                          │
│            registerRootComponent(App)                │
└─────────────────────┬───────────────────────────────┘
                      │
┌─────────────────────▼───────────────────────────────┐
│                     App.js                           │
│  ┌────────────────┐   ┌──────────────────────────┐  │
│  │  Fonts Loader  │   │  GestureHandlerRootView  │  │
│  │ (BeVietnamPro) │   │  ┌─────────────────────┐ │  │
│  └────────────────┘   │  │    AuthProvider      │ │  │
│                       │  │  ┌────────────────┐  │ │  │
│                       │  │  │  AppNavigator  │  │ │  │
│                       │  │  └────────────────┘  │ │  │
│                       │  └─────────────────────┘ │  │
│                       └──────────────────────────┘  │
└─────────────────────────────────────────────────────┘
                      │
┌─────────────────────▼───────────────────────────────┐
│              Stack Navigator (12 screens)            │
│                                                      │
│  Splash → Onboarding → Login → Register(1→5)        │
│  ForgotPassword → OTP → ResetPassword → Home        │
└─────────────────────────────────────────────────────┘
                      │
┌─────────────────────▼───────────────────────────────┐
│                  Data Layer                          │
│  ┌─────────────┐  ┌───────────┐  ┌──────────────┐  │
│  │ AuthContext │  │  authApi  │  │ registerData │  │
│  │ (JWT token) │  │  (axios)  │  │ (shared obj) │  │
│  └─────────────┘  └───────────┘  └──────────────┘  │
└─────────────────────────────────────────────────────┘

---

📱 Screen Flow

┌──────────┐     2.8s      ┌─────────────┐    swipe/skip
│  SPLASH  │ ──────────── ▶│  ONBOARDING │ ──────────────▶
│  🌿      │               │ 3 slides    │
└──────────┘               └─────────────┘
                                                    │
                                                    ▼
     ┌──────────────────────────────────────────────────┐
     │                    LOGIN                         │
     │  email + password → POST /user/login → JWT      │
     └──────────────────────────────────────────────────┘
              │                         │
         REGISTER                 FORGOT PASSWORD
              │                         │
     ┌────────▼──────────┐     ┌────────▼──────────┐
     │   Register Step 1 │     │  Forgot Password  │
     │   Personal Info   │     │  Mobile Number    │
     └────────┬──────────┘     └────────┬──────────┘
              │                         │
     ┌────────▼──────────┐     ┌────────▼──────────┐
     │   Register Step 2 │     │    OTP Screen     │
     │   Farm/Business   │     │   6-digit verify  │
     └────────┬──────────┘     └────────┬──────────┘
              │                         │
     ┌────────▼──────────┐     ┌────────▼──────────┐
     │   Register Step 3 │     │  Reset Password   │
     │   Document Upload │     │  Strength meter   │
     └────────┬──────────┘     └───────────────────┘
              │
     ┌────────▼──────────┐
     │   Register Step 4 │
     │   Business Hours  │
     └────────┬──────────┘
              │
     ┌────────▼──────────┐        ┌─────────────┐
     │   Register Step 5 │ ──────▶│    HOME     │
     │   Review+Submit   │        │  Dashboard  │
     └───────────────────┘        └─────────────┘

---

🛠️ Tech Stack

Core Framework

Navigation & UI

Fonts & Assets

Networking & Storage

File & Media

---

📁 Project Structure

FarmerEatsApp/
│
├── 📄 index.js                    # Entry point (registerRootComponent)
├── 📄 App.js                      # Root: fonts + providers + navigator
├── 📄 app.json                    # Expo config (name, icons, splash)
├── 📄 babel.config.js             # Babel transpiler config
├── 📄 package.json                # Dependencies
│
├── 📂 assets/                     # App icons, splash, adaptive icons
│
└── 📂 src/
    │
    ├── 📂 api/
    │   └── authApi.js             # All REST API calls (axios)
    │       ├── loginUser()
    │       ├── registerUser()
    │       ├── forgotPassword()
    │       ├── verifyOTP()
    │       └── resetPassword()
    │
    ├── 📂 context/
    │   └── AuthContext.js         # JWT token state, login/logout
    │
    ├── 📂 navigation/
    │   └── AppNavigator.js        # Stack navigator, screen definitions
    │
    ├── 📂 theme/
    │   └── colors.js              # Design token: primary, secondary, etc.
    │
    ├── 📂 components/             # Reusable UI components
    │   ├── CustomButton.js        # Primary/outline/secondary variants
    │   ├── CustomInput.js         # Input with icon, error, eye toggle
    │   └── StepIndicator.js       # Progress dots for registration
    │
    └── 📂 screens/                # 12 screens
        ├── SplashScreen.js        # Animated logo entry (2.8s)
        ├── OnboardingScreen.js    # 3-slide horizontal onboarding
        ├── LoginScreen.js         # Email/password login
        ├── RegisterStep1Screen.js # Personal info + shared registerData{}
        ├── RegisterStep2Screen.js # Farm/business info + US state picker
        ├── RegisterStep3Screen.js # Document upload (expo-document-picker)
        ├── RegisterStep4Screen.js # Business hours (day × time slot grid)
        ├── RegisterStep5Screen.js # Review + FormData multipart submit
        ├── ForgotPasswordScreen.js# Mobile number input
        ├── OTPScreen.js           # 6-box OTP input with auto-focus
        ├── ResetPasswordScreen.js # New password + strength indicator
        └── HomeScreen.js          # Dashboard with stats and quick actions

---

🚀 Getting Started

Prerequisites

node >= 18.x
npm >= 9.x
Expo Go app on your Android/iOS device

Installation

# 1. Clone the repo (or navigate to project folder)
cd "FarmerEatsApp"

# 2. Install dependencies
npm install --legacy-peer-deps

# 3. Start Metro bundler with cleared cache
npx expo start --clear

# 4. Scan the QR code with Expo Go app
#    OR press 'a' for Android, 'w' for web

Common Issues & Fixes

Problem	Solution
White screen on Expo Go	Ensure newArchEnabled: false in app.json
babel-preset-expo not found	Run npm install babel-preset-expo --save-dev
Terminal hangs on press a	Old Expo process still running — open new terminal
Cannot find module 'worklets'	Don't use react-native-reanimated@^4.x with Expo Go
Fonts not loading	Clear cache: npx expo start --clear

---

🔌 API Reference

Base URL: https://sowlab.com/assignment

Endpoint	Method	Description	Auth
/user/login	POST	Login with email + password	❌
/user/register	POST	Register new farmer (multipart)	❌
/user/forgot-password	POST	Send OTP to mobile	❌
/user/verify-otp	POST	Verify 6-digit OTP	❌
/user/reset-password	POST	Set new password with token	❌

Login Request Body

{
  "email": "farmer@example.com",
  "password": "password123",
  "role": "farmer",
  "device_token": "expo_device_token",
  "type": "email"
}

Register (FormData fields)

full_name, email, phone, password, role,
business_name, informal_name, address, city,
state, zip_code, business_hours (JSON string),
device_token, type, registration_proof (file)

---

🎨 Design System

Color Palette

Token	Hex	Usage
primary	#D5715B	Buttons, active states, brand
secondary	#F2C94C	Highlights, accents
tertiary	#5EA25F	Success, green badges
dark	#261C12	Body text, headings
white	#FFFFFF	Backgrounds
inputBg	rgba(38,28,18,0.08)	Input field backgrounds
error	#E53935	Error states, validation

Typography

All text uses BeVietnamPro (Google Fonts) with 4 weights:

Weight	Font Name	Usage
400	BeVietnamPro_400Regular	Body text, subtitles
500	BeVietnamPro_500Medium	Labels, secondary text
600	BeVietnamPro_600SemiBold	Links, emphasized text
700	BeVietnamPro_700Bold	Headings, buttons, brand

---

👨‍💻 Developer

Kinshuk Saxena

Made with ❤️ and 🌿 by Kinshuk Saxena

⭐ Star this repo if you found it helpful! ⭐

---