A complete mobile shopping application with both Progressive Web App (PWA) and React Native versions.
- Local Access: http://localhost:3000
- Network Access (Phone): http://192.168.1.7:3000
- Status: ✅ Running on port 3000
How to install on your phone:
- Open
http://192.168.1.7:3000on your mobile browser - Tap "Add to Home Screen" when prompted
- The app will install like a native app!
- Status: ✅ Running with Expo
- Access: Scan the QR code in your terminal with Expo Go app
See: PWA-INSTALLATION-GUIDE.md
This guide includes:
- How to install the app on your phone
- How to share with anyone (like z.ai does)
- How to deploy permanently for free
- Troubleshooting tips
You wanted the same experience as z.ai where:
✅ You open a localhost link on your phone
✅ It shows a notification to download the app
✅ Anyone with the link can download and use it
✅ It works like a real mobile app
This is now working with the PWA version!
mobile/
├── mobile-app/ # React Native + Expo app
├── src/ # Next.js PWA source code
├── public/
│ ├── manifest.json # PWA manifest
│ └── icons/ # App icons (all sizes)
├── package.json # Next.js dependencies
└── README.md # This file
npm run devRuns on: http://localhost:3000
cd mobile-app
npm startScan QR code with Expo Go app
# Option 1: ngrok
ngrok http 3000
# Option 2: Cloudflare Tunnel
cloudflared tunnel --url http://localhost:3000
# Option 3: LocalTunnel
npx localtunnel --port 3000# Vercel (Recommended)
npm install -g vercel
vercel
# You'll get a permanent URL like:
# https://shop-faisu.vercel.app- ✅ Installable on any device
- ✅ Works offline
- ✅ Fast loading
- ✅ App-like experience
- ✅ No app store needed
- ✅ Shareable via link
- ✅ Native performance
- ✅ Cross-platform (iOS/Android)
- ✅ Rich mobile features
- ✅ Smooth animations
- ✅ Native components
| Service | Best For | Free Tier |
|---|---|---|
| Vercel | Next.js PWA | ✅ Unlimited |
| Netlify | Static PWA | ✅ 100GB/month |
| Railway | Full-stack | ✅ $5 credit |
| Render | Web services | ✅ 750 hours |
| Service | Duration | Setup |
|---|---|---|
| ngrok | Permanent* | Account needed |
| Cloudflare | Session-based | No account |
| LocalTunnel | Session-based | No account |
*With free account, tunnel stays active
-
Next.js PWA - Port 3000
- Accessible on same WiFi network
- Can be installed on mobile devices
- Full PWA capabilities
-
React Native Expo - Port 8081
- Requires Expo Go app
- Development mode
- Hot reload enabled
For your use case (sharing like z.ai):
Use the PWA (Next.js) version because:
- ✅ Share via simple link
- ✅ No app store needed
- ✅ Works on any device
- ✅ Instant updates
- ✅ Easier to distribute
Steps:
- Deploy to Vercel (free, 2 minutes)
- Share the Vercel URL with anyone
- They can install it as an app on their phone
- Done!
- Ensure same WiFi network
- Try: http://192.168.1.7:3000
- Check Windows Firewall
- Use HTTPS (via ngrok/tunnel)
- Try incognito mode
- Clear browser cache
- Use ngrok/cloudflare tunnel for temporary
- Deploy to Vercel for permanent
Choose what you want to do:
-
Test locally - Already running! Open http://192.168.1.7:3000 on your phone
-
Share temporarily - Use ngrok:
ngrok http 3000 -
Deploy permanently - Use Vercel:
vercel -
Customize PWA - Edit public/manifest.json
-
Build native app - Use Expo EAS Build
- PWA Installation Guide - Detailed setup
- Next.js PWA Docs
- Expo Documentation
- Vercel Deployment
Made with ❤️ by Faisu