Build Mobile APP using AI | No Coding | Replit AI Mobile App Tutorial

Summary

1) Motivation + examples of mobile apps (live deployments)

The speaker says they have built and published two mobile apps:

• BBST Cafe: an online ordering app with delivery tracking.
• Creator Box: an app for students of online courses where users submit/verify their email, then get connected to support/team.

Marketplace status mentioned:

• Both apps are live on the Google Play Store and Apple App Store (per the speaker).
• BBST Cafe has no downloads yet because it hasn’t been promoted.

---

2) Core tutorial: building mobile apps “no coding” using Replit AI / Replit

The video’s main workflow uses Replit to:

1. Generate a mobile app UI and screens from text prompts.
2. Add functionality (e.g., login, OTP, bookings, databases).
3. Build a runnable preview using Expo Go.

Replit capabilities mentioned

• Replit can generate:
  • Web apps and mobile apps
  • Plus other content types mentioned in subtitles (animations, simulations, games, spreadsheets, document work).
• UI is created on a canvas (screen-by-screen design).
• The speaker uses ChatGPT-generated prompts to guide Replit through:
  • requirements → plan → design

Pricing/cost model discussed

Replit plans referenced:

• Free: limited; cannot build a real app.
• “Replit Core”: about $20/month, includes monthly credits.
• Small edits/customizations may cost additional credit fractions (e.g., cents-level credit usage).
• Referral/credits information is mentioned.

---

3) End-to-end example: “Fixia” service-booking app (service marketplace)

The speaker builds a marketplace app called Fixia, where users book professionals such as:

• plumber, electrician, AC repair, locksmith, gardener, cleaning

A) Design phase (screens + navigation)

Replit generates multiple pages, including (as mentioned):

• Splash screen
• Welcome screen
• Login / OTP verification
• Home screen (service list)
• Service details page
• Booking page (address, date/time, confirm booking)
• A chat/messaging element (mentioned as part of the interface)

Key points emphasized:

• Replit can generate many screens quickly (e.g., “13 pages” mentioned).
• Design updates can be made by editing elements on the canvas and re-prompting.
• Credit costs may apply per change (example given: changing a button label).

B) Iterative editing via “canvas element” prompts

Examples of edits:

• Change button text (e.g., “Contact Support” → “Get Support”)
  • by selecting the element in the canvas and writing the change instructions.
• Update the app icon
  • by uploading an image (512×512 or 1024×1024 mentioned).
• Modify the signup method
  • remove phone/email fields
  • switch to email-only signup with email OTP

C) Functionality phase (make pages work)

Replit is prompted to implement working logic, including:

• Database and application logic
  • The speaker explains: “database = storage for customer/professional/booking data”.

Database provider:

• Supabase (free plan mentioned)
• Bookings and customer accounts are stored in Supabase.

Roles concept described:

• Customers request services.
• Professionals are assigned (by an admin).

---

4) Running and testing: build → preview using Expo Go + QR code

After Replit builds the app:

• A temporary QR code is generated.
• The user installs/uses Expo Go on their phone.
• Scanning the QR loads a live preview.

Testing loop includes fixing issues such as:

• Example bug: after signing in, the app showed no signup option, blocking new users.
• Fix process:
  • report the issue to Replit via prompt
  • Replit updates the code
  • rebuild and re-test with a new QR code

---

5) Admin panel + synchronization: web-based dashboard for bookings/professionals

The marketplace requires two interfaces:

1. Customer mobile app
2. Admin web panel for the business owner/admin

Replit is used again to generate the admin dashboard.

Admin features shown:

• Statistics (bookings, sales, customers, professionals)
• Manage professionals:
  • create professional profiles (name, service type, contact, experience, rating auto-fill mentioned)
  • edit/delete availability/status
• Manage categories/services
• View booking requests and assign professionals
• Update service status (e.g., on the way/completed, implied workflow)

The speaker stresses data synchronization between:

• mobile app data (customers/professionals/requests)
• admin panel data

---

6) Hosting the admin panel: deploy Node.js/React app to Hostinger

Because App Store/Play Store don’t host the admin panel, it must be hosted separately.

• Hosting provider: Hostinger
• Technology stack mentioned:
  • Node.js server environment
  • React basis implied

Deployment steps include:

• Download deployable files/zip from Replit (an artifact like “hfn deploy” is referenced)
• Upload to Hostinger’s Files
• Configure:
  • Node version
  • Build/output settings (assisted by screenshots)
  • entry file (e.g., Server.js mentioned)
  • environment variables (database URL, Supabase SSL mode, and node_env=production)

Supabase connection setup:

• Add environment variables such as DATABASE_URL and NODE_ENV=production
• Ensure SSL is required by appending SSL settings to the connection string

---

7) Troubleshooting deployment: handling 503 errors

The speaker encounters 503 Service Unavailable.

Fix workflow described:

• Check Hostinger dashboard → logs/errors
• Most likely cause: database tables not created yet
• Solution:
  • run SQL in Supabase SQL editor using Replit-provided queries
  • re-run/enable RLS (mentioned)
• Then redeploy/restart and verify the domain loads correctly

---

8) Publishing mobile apps to app stores (requirements + accounts)

Cost requirements mentioned

• Google Play: one-time $25 fee for Play Console account
• Apple App Store: $99/year for Apple Developer Program

Prerequisites emphasized

• Unique app name
• Store listing website requirements:
  • Privacy Policy, Support, Contact, About pages
  • (speaker notes Replit can generate policy text)
• App assets:
  • App icon (square; 512/1024 px)
  • App screenshots/snapshots (multiple vertical screenshots required)
  • Description/keywords/support URLs
  • (speaker says Replit can draft marketing text)

---

9) App upload process: iOS using Expo + terminal commands, Apple App Store Connect

The publishing workflow described uses Expo (as a mediator/packaging tool), including:

• build → generate app code → download build → extract → run terminal commands

High-level iOS steps:

1. Create/login to Apple Developer account
2. Create an iOS App entry in App Store Connect
3. Create/verify Bundle ID
4. Add screenshots, preview, and promotional metadata
5. Download build code from Replit
6. Run terminal commands to submit/upload via Expo into Apple’s pipeline

The speaker also notes apps may be rejected if Apple review criteria fail (example apps mentioned).

---

Key “tutorial insights” highlighted

• Prompt-driven development
  • Use ChatGPT to write detailed requirements prompts
  • Send prompt → Replit generates plan → design → functional implementation
• Iterative debugging loop
  • Build → test on phone (Expo QR) → report issue → Replit fixes → rebuild → re-test
• Credit-based costs
  • Small edits/design changes cost small credit fractions
  • Full builds cost more
• Architecture emphasized
  • Mobile app (customer-facing)
  • Admin web panel (business logic)
  • Supabase database (shared data storage)
  • Hostinger hosting for the admin panel

---

Main speakers / sources

• Main speaker: the YouTube tutorial presenter (channel host; repeatedly mentions a name such as “Saddam Qasim” for referral links)
• Primary tools/services used
  • Replit (AI/builder + deployment artifacts)
  • ChatGPT (prompt authoring)
  • Supabase (database + SQL/SSL/RLS)
  • Expo Go / Expo (mobile preview + packaging/upload steps)
  • Hostinger (hosting the web admin panel)
  • Google Play Console and Apple App Store Connect (publishing requirements)