You are working on my existing Loan247 project.

My existing production website is:

https://www.loan247.online/

I want you to build a complete mobile application for Loan247 using Expo + React Native + TypeScript.

IMPORTANT SAFETY RULE

DO NOT modify, delete, refactor, redeploy, or break my existing production website.

DO NOT modify the existing live website deployment configuration.

DO NOT delete or modify my existing database.

DO NOT modify production AWS infrastructure.

DO NOT modify the existing payment backend unless absolutely required and I explicitly approve it.

The current website must remain live and unaffected.

Create the mobile application inside a completely separate folder:

/mobile-app

Before writing the mobile app, inspect the complete existing website codebase and understand its design, components, APIs, forms, authentication, validation, loan application flow, payment flow, content, branding, legal pages, and backend integration.

GOAL

I want the mobile application to look and behave as close as reasonably possible to the existing Loan247 website.

Do NOT create a generic loan app design.

Do NOT redesign Loan247 according to your own preferences.

Use the existing Loan247 website as the source of truth for:

- branding
- logo
- colors
- typography
- headings
- buttons
- cards
- spacing
- border radius
- icons
- form fields
- text
- loan amounts
- validation
- FAQ content
- reviews
- legal content
- navigation
- application flow
- payment flow
- success/error states

This must be a real React Native application.

DO NOT simply put the website inside a WebView.

TECH STACK

Use

Expo

React Native

TypeScript

Expo Router

React hooks

Reusable components

SecureStore where appropriate for sensitive local tokens

Setting variables for public configuration

Existing Loan247 backend APIs wherever possible

Keep the architecture clean and understandable.

Since the owner is non-technical, keep configuration simple and document everything.

PHASE 1 — INSPECT EXISTING LOAN247 WEBSITE

Before implementing anything

- Inspect the existing website repository.
- Identify every customer-facing page.
- Identify every reusable component.
- Identify the current application form flow.
- Identify authentication implementation.
- Identify all API endpoints used by the website.
- Identify how customer applications are submitted.
- Identify payment initiation and payment status handling.
- Identify validation rules.
- Identify existing assets including logo and icons.
- Identify colors, fonts, sizes and spacing.
- Identify Terms, Privacy, FAQ, reviews and other informational sections.
- Identify where the website communicates with the backend/database.

Create:

mobile-app/LOAN247_APP_PLAN.md

Document your findings before implementing the complete app.

Do not invent API endpoints.

Reuse existing working APIs whenever technically appropriate.

PHASE 2 — PROJECT STRUCTURE

Create the Expo project under:

mobile-app/

Use Expo Router.

Create a logical structure similar to:

mobile-app/

app/

components/

hooks/

services/

constants/

store/

utils/

assets/

types/

Keep components reusable.

Do not create one giant file.

PHASE 3 — BRANDING

Reuse the genuine Loan247 logo/assets from the existing repository where licensing and format allow.

Match the existing website

- primary colors
- secondary colors
- background colors
- typography hierarchy
- button styles
- border radius
- shadows




- card styles
- form appearance
- spacing

Create centralized design tokens so colors and styles are not duplicated everywhere.

The mobile UI should feel like the official Loan247 mobile application, not a template.

PHASE 4 — MOBILE RESPONSIVENESS The application must work correctly on:

Small Android phones

Normal Android phones

Large Android phones iPhone SE-sized displays

Standard iPhones

Large iPhones

Use SafeArea correctly.

Handle keyboard opening correctly.

Form fields must never be hidden behind the keyboard.

Buttons should have appropriate touch areas.

Scrolling must work correctly.

PHASE 5 — CUSTOMER FLOW

Reproduce the existing customer journey from the website.

Inspect the website first and implement the actual current sequence.

Where applicable this should include:

Home / landing experience

Loan amount selection

Application form

Personal details

Contact details

Employment/income details if currently present

PAN or other details if currently present

Bank-related fields if currently present

Verification steps

Review/confirmation

Payment initiation if currently part of the website flow

Payment processing state

Payment success state

Payment failure/cancel state

Application submitted state

Do not add fields just because other loan applications commonly contain them.

Use only the fields actually required by Loan247.

PHASE 6 — FORMS

Match all existing validation rules.

Include

required-field validation mobile number validation email validation

PAN validation if currently used numeric amount validation proper error messages loading state disabled button state duplicate submission protection

Do not allow users to submit the same form multiple times by rapidly tapping a button.

PHASE 7 — BACKEND The mobile application should use the existing Loan247 backend rather than creating an unnecessary second backend.

First inspect existing APIs.

Create a clean API service layer such as:

services/api.ts

Never put

database credentials payment gateway secret keys private API secrets admin credentials inside the mobile application.

Any privileged or sensitive action must happen on the server.

Create environment configuration for safe client-side values.

PHASE 8 — AUTHENTICATION

Inspect how authentication currently works.

Implement a mobile-appropriate authentication experience.

Where Google Sign-In is required, use an Expo-compatible supported native/OAuth implementation.

Store authentication/session information securely.

Add

loading state signed-in state signed-out state sign-out authentication error handling

Never place Google client secrets inside client source code.

PHASE 9 — PAYMENT

Inspect the existing Loan247 payment flow before changing anything.

Use the existing secure server-side payment APIs wherever possible.

Never put payment gateway secret keys in the Expo application.

The server must remain the source of truth for whether a payment succeeded.





Do not mark a payment successful simply because the mobile UI says that a payment screen completed.

Handle

payment initiated payment pending payment success payment failed payment cancelled network interruption

Do not disrupt the existing website payment flow.

PHASE 10 — INFORMATIONAL CONTENT

Reproduce current relevant Loan247 information including, where present:

FAQ customer reviews

About Loan247

Privacy Policy

Terms and Conditions

Disclaimer

Contact/Support

Use the existing site's current content instead of inventing legal wording.

PHASE 11 — UX

Create appropriate

splash/loading state screen loading indicators button loading indicators

API error messages network error messages empty states success states confirmation states The application should not crash if the network is temporarily unavailable.

PHASE 12 — SECURITY

Follow mobile application security best practices.

Do not log sensitive customer information unnecessarily.

Do not expose secrets.

Do not store sensitive customer application data permanently on the device unless required.

Use HTTPS endpoints.

Keep server-side authorization checks on the server.

Never rely exclusively on the mobile UI for authorization.

PHASE 13 — PLATFORM PERMISSIONS

Do not request unnecessary Android or iOS permissions.

Only add a device permission when a feature genuinely requires it.

Explain any requested permission in LOAN247_APP_PLAN.md before implementing it.

Do not implement broad contact-list, gallery, location, camera, microphone, or tracking access unless it is required for a legitimate user-facing feature and compatible with app-store policies.

PHASE 14 — DEVELOPMENT TESTING

Make sure the project

installs successfully has no TypeScript errors has no obvious lint errors starts successfully works with the appropriate Expo development workflow does not contain broken imports does not contain placeholder screens where an existing Loan247 screen should exist

Run the available checks yourself.

Fix errors instead of leaving them for me.

PHASE 15 — DOCUMENTATION FOR NON-TECHNICAL OWNER

Create

mobile-app/README.md

Explain in very simple language:

How to install dependencies

How to start the app

How to open it on Android

How to open it on iPhone

Where environment variables go

How APIs are configured

Where the logo is located

Where colors are configured

Where page text is configured

How to change the app name

How to change the app icon

How to create a production Android build

How to create a production iOS build

Do not assume I have technical knowledge.

IMPORTANT WORKING METHOD

First inspect.

Then create LOAN247_APP_PLAN.md.

Then create the Expo architecture.

Then implement screens systematically.

Do not blindly rewrite the existing website.

Do not damage production.

Do not claim something is working unless you actually checked it.

Whenever something requires a credential or external console configuration that you cannot do from the repository, implement everything possible first and then clearly tell me exactly what value is required and exactly where I need to get it.

START NOW by inspecting the existing Loan247 repository and create:

mobile-app/LOAN247_APP_PLAN.md

After the audit, proceed with implementation of the mobile application while keeping the existing production website completely untouched.

Call Now - (phone hidden) ,

Pay: ₹25,000.00 - ₹30,000.00 per month

Work Location: In person

📌 Full Stack Developer (Gurugram)
🏢 loan247
📍 Gurugram