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
Environment 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 - 8810381949 ,
Pay: ₹25,000.00 - ₹30,000.00 per month
Work Location: In person
