App Goal: Create a professional mobile app where users can view your business profile, services, contact you, and receive notifications.

1. Adalo Account & Project Setup (5 minutes) :

1. Go to adalo.com → Sign up (free)
2. Dashboard → « New App »
3. App Name: « My Business Pro »
4. Choose « Blank App » (not template)
5. Icon: Upload simple logo (200×200 PNG)
6. Preview: Download Adalo app → Scan QR code

Screen Settings:

App Name: My Business Pro
Primary Color: #2C5AA0 (professional blue)
Secondary Color: #F5F7FA (light gray)
Font: Roboto (clean modern)

2. Screen 1: Splash Screen (Loading) (5 minutes) :

Drag Components:

1. Background → Gradient (Blue → Light Blue)
2. Logo/Image → Center top (your business logo)
3. Text → « My Business Pro » (White, Bold, 32pt)
4. Spinner/Loader → Center bottom

Screen Actions:

On Load → Delay 2 seconds → Navigate to Login Screen

Pro Tip: Keep splash < 3 seconds for good UX.

3. Screen 2: Login Screen (10 minutes)
Layout (Vertical Stack):

Top 40%: Logo + App Title
Middle 40%: Login Form
Bottom 20%: Social Login + Forgot Password

Components to Add:

1. Image: Business logo (top)
2. Text: « Welcome Back » (H1, White)
3. Text Input: « Email Address »
• Placeholder: « john@business.com »
• Keyboard: Email
4. Text Input: « Password »
• Secure text (masked)
• Min length: 6
5. Button: « Login » (Blue, Full Width)
6. Text Link: « Don’t have account? Sign Up »
7. OR Divider
8. Google/Facebook Login Buttons

Button Actions:

Login Button → Custom Action →
1. Validate email/password
2. If valid → Create Session → Navigate Home
3. If invalid → Show « Wrong credentials » toast

4. Screen 3: Sign Up Screen (8 minutes)
Copy Login Screen + Changes:

1. Change title: « Create Account »
2. Add « Full Name » input field
3. Change button: « Sign Up »
4. Add Terms Checkbox: « I agree to Terms & Privacy »

Sign Up Flow:

1. Validate all fields
2. Create user in database
3. Auto-login new user
4. Navigate to Home Screen

5. Screen 4: Home/Dashboard (15 minutes)
Layout (2 Column Grid):

Left Column (60%): Welcome + Quick Stats
Right Column (40%): Navigation Cards

Left Column Components:

1. Text: « Welcome, [User Name]! »
2. Stats Row:
• « Services: 5 »
• « Clients: 23 »
• « Reviews: 4.8⭐ »
3. Text: « What’s new for you today »

Right Column – Action Cards (4 Cards):

Card 1: « My Profile »
Icon: User → Navigate Profile Screen

Card 2: « Our Services »
Icon: Briefcase → Services List

Card 3: « Contact Us »
Icon: Phone → Contact Form

Card 4: « Notifications »
Icon: Bell → Notification List

6. Screen 5: Profile Screen (12 minutes)
Top Section (User Info):

1. Profile Photo (circular, 120px)
2. Text: « [Full Name] »
3. Text: « [Email] »
4. Text: « [Phone] »
5. Text: « [Website] »

Edit Section:

1. Button: « Edit Profile » → Show Edit Form
2. Edit Form (hidden initially):
• Photo upload
• Name, Phone, Website inputs
• « Save Changes » button

Bottom Section:

Social Links Row:
✅ LinkedIn | Facebook | Instagram | WhatsApp

7. Screen 6: Services Screen (10 minutes)
Services List (Collection):

Database Collection: Services
Fields: Name, Description, Icon, Price

Sample Data:
1. Web Design – « Modern responsive websites » – $1500
2. SEO – « Rank higher on Google » – $800/mo
3. Marketing – « Get more customers » – $1200
4. Consulting – « Business strategy » – $200/hr

List Layout:

Each Item:
• Icon left
• Title + Description
• Price badge
• « Learn More » → Detail screen

8. Screen 7: Contact Form (8 minutes)
Form Fields:

1. Name Input
2. Email Input
3. Phone Input
4. Message (Multi-line, 500 chars)
5. Submit Button: « Send Message »

Success Flow:

Submit → Show Loading →
Email to business@domain.com →
« Thank you! We’ll reply within 24 hours » →
Navigate Home

9. Testing Your Complete App (10 minutes):

Test Checklist:

✅ [ ] Splash → Login (2 sec)
✅ [ ] Login works (test@email.com / 123456)
✅ [ ] Sign up creates new user
✅ [ ] Home screen loads user data
✅ [ ] Profile shows correct info
✅ [ ] Services list displays 4+ items
✅ [ ] Contact form sends email
✅ [ ] iPhone preview (Adalo app)
✅ [ ] Android preview (Adalo app)

Common Issues & Fixes:

❌ Login fails → Check database connection
❌ Screens blank → Refresh database
❌ Buttons don’t work → Check actions
❌ Slow loading → Optimize images

10. Publish Preview Version (2 minutes):

Adalo → Publish →
✅ Web App Link (shareable)
✅ QR Code for phones
✅ Test on real devices
✅ Share with potential clients

What You Accomplished:

✅ 7 complete screens
✅ User authentication
✅ Database integration
✅ Professional design
✅ Ready for client demo
✅ Native iOS/Android preview