195 lines
No EOL
5.5 KiB
Markdown
195 lines
No EOL
5.5 KiB
Markdown
# Mobile-Desktop Development Workflow Guide
|
|
|
|
## 📱➡️💻 Cross-Platform Development with CourseWorx
|
|
|
|
This guide explains how to seamlessly work on CourseWorx from your mobile device and continue development on your desktop.
|
|
|
|
## 🚀 Quick Start Options
|
|
|
|
### Option 1: GitHub Codespaces (Recommended for Mobile)
|
|
1. **From Mobile**: Go to your GitHub repository
|
|
2. **Create Codespace**: Click "Code" → "Codespaces" → "Create codespace"
|
|
3. **Development Environment**: Full VS Code in browser with all tools
|
|
4. **Sync**: All changes automatically sync with GitHub
|
|
5. **Continue on Desktop**: Open same codespace or pull latest changes
|
|
|
|
### Option 2: Cloud IDE Services
|
|
- **GitPod**: `gitpod.io/#https://github.com/yourusername/courseworx`
|
|
- **CodeSandbox**: Import GitHub repository directly
|
|
- **Replit**: Connect GitHub repo for instant development
|
|
|
|
### Option 3: Local Development with Git Sync
|
|
1. **Mobile**: Use apps like Working Copy (iOS) or MGit (Android)
|
|
2. **Make Changes**: Edit files locally on mobile
|
|
3. **Commit & Push**: Push changes to GitHub
|
|
4. **Desktop**: Pull latest changes and continue
|
|
|
|
## 🛠️ Mobile Development Setup
|
|
|
|
### Prerequisites
|
|
- GitHub account with repository access
|
|
- Stable internet connection
|
|
- Modern mobile browser (Chrome, Safari, Firefox)
|
|
|
|
### Mobile-Friendly Development Tools
|
|
|
|
#### 1. **GitHub Codespaces** (Best Option)
|
|
```markdown
|
|
✅ Full VS Code experience in browser
|
|
✅ Built-in terminal and debugging
|
|
✅ Extensions support
|
|
✅ Automatic environment setup
|
|
✅ Direct GitHub integration
|
|
```
|
|
|
|
#### 2. **GitPod**
|
|
```markdown
|
|
✅ One-click development environment
|
|
✅ Docker-based consistent environment
|
|
✅ Git integration
|
|
✅ VS Code or Theia IDE
|
|
```
|
|
|
|
#### 3. **Mobile Git Clients**
|
|
- **iOS**: Working Copy, Git2Go
|
|
- **Android**: MGit, Pocket Git, Git Journal
|
|
|
|
## 📋 Workflow Steps
|
|
|
|
### Starting on Mobile
|
|
1. **Access Repository**: Open GitHub in mobile browser
|
|
2. **Launch Environment**:
|
|
- Codespaces: Click "Code" → "Codespaces" → "Create"
|
|
- GitPod: Add `gitpod.io/#` before your GitHub URL
|
|
3. **Start Development**: Make changes using web IDE
|
|
4. **Test Changes**: Use built-in preview/terminal
|
|
5. **Commit & Push**: Save changes to repository
|
|
|
|
### Continuing on Desktop
|
|
1. **Pull Latest**: `git pull origin main`
|
|
2. **Install Dependencies**: `npm run install-all` (if needed)
|
|
3. **Start Development**: `npm run dev`
|
|
4. **Continue Work**: Pick up where you left off
|
|
|
|
## 🔄 Synchronization Strategy
|
|
|
|
### Git Workflow
|
|
```bash
|
|
# On Mobile (or Desktop)
|
|
git add .
|
|
git commit -m "Mobile: Add new feature X"
|
|
git push origin feature-branch
|
|
|
|
# On Desktop (or Mobile)
|
|
git pull origin feature-branch
|
|
# Continue development
|
|
```
|
|
|
|
### Branch Strategy
|
|
```markdown
|
|
- `main`: Production-ready code
|
|
- `develop`: Integration branch
|
|
- `feature/mobile-work`: Mobile development
|
|
- `feature/desktop-work`: Desktop development
|
|
```
|
|
|
|
## 📱 Mobile Development Best Practices
|
|
|
|
### 1. **Touch-Friendly UI**
|
|
- Ensure button sizes are 44px+ for touch targets
|
|
- Test responsive breakpoints
|
|
- Optimize for mobile performance
|
|
|
|
### 2. **Progressive Web App (PWA)**
|
|
Your CourseWorx already has PWA foundations:
|
|
- `manifest.json` configured
|
|
- Service worker ready
|
|
- Offline functionality possible
|
|
|
|
### 3. **Mobile Testing**
|
|
```bash
|
|
# Test responsive design
|
|
npm run dev
|
|
# Open http://localhost:3000 on mobile
|
|
# Use browser dev tools for mobile simulation
|
|
```
|
|
|
|
## 🌐 Environment Configuration
|
|
|
|
### Cloud Development Environment
|
|
```json
|
|
{
|
|
"name": "CourseWorx Mobile Dev",
|
|
"dockerFile": "Dockerfile.dev",
|
|
"forwardPorts": [3000, 5000],
|
|
"postCreateCommand": "npm run install-all",
|
|
"extensions": [
|
|
"ms-vscode.vscode-typescript-next",
|
|
"bradlc.vscode-tailwindcss",
|
|
"ms-vscode.vscode-json"
|
|
]
|
|
}
|
|
```
|
|
|
|
### Mobile Browser Debugging
|
|
1. **Chrome DevTools**: Inspect mobile view
|
|
2. **Firefox Responsive Design**: Test different devices
|
|
3. **Safari Web Inspector**: iOS testing
|
|
|
|
## 🔧 Troubleshooting
|
|
|
|
### Common Mobile Development Issues
|
|
|
|
#### 1. **Performance on Mobile**
|
|
- Limit bundle size
|
|
- Use code splitting
|
|
- Optimize images and assets
|
|
|
|
#### 2. **Touch Events**
|
|
- Test touch interactions
|
|
- Implement proper swipe gestures
|
|
- Handle orientation changes
|
|
|
|
#### 3. **Network Limitations**
|
|
- Implement offline functionality
|
|
- Add loading states
|
|
- Use service workers for caching
|
|
|
|
## 📊 Recommended Tools Stack
|
|
|
|
### Mobile Development
|
|
```markdown
|
|
🔧 Primary IDE: GitHub Codespaces
|
|
🌐 Browser: Chrome/Safari (latest)
|
|
📱 Testing: Browser DevTools mobile simulation
|
|
🔄 Version Control: GitHub Web Interface
|
|
📝 Notes: GitHub Issues/Projects
|
|
```
|
|
|
|
### Desktop Development
|
|
```markdown
|
|
🔧 Primary IDE: VS Code/Cursor
|
|
🖥️ Environment: Local Node.js + PostgreSQL
|
|
📱 Testing: Physical devices + emulators
|
|
🔄 Version Control: Git CLI/Desktop
|
|
📊 Analytics: Local development tools
|
|
```
|
|
|
|
## 🎯 Next Steps
|
|
|
|
1. **Set up Codespaces**: Enable for your repository
|
|
2. **Test Mobile Workflow**: Try making a simple change
|
|
3. **Configure Linear**: Set up project management integration
|
|
4. **Create Development Branches**: Organize mobile vs desktop work
|
|
5. **Set up Notifications**: GitHub notifications for collaboration
|
|
|
|
## 💡 Pro Tips
|
|
|
|
- **Small Commits**: Make frequent, small commits on mobile
|
|
- **Detailed Messages**: Use descriptive commit messages
|
|
- **Feature Flags**: Use environment variables for mobile-specific features
|
|
- **Testing**: Always test on actual mobile devices
|
|
- **Documentation**: Update this guide as workflow evolves
|
|
|
|
---
|
|
*This workflow enables seamless development across devices while maintaining code quality and team collaboration.* |