Drive Clone Mobile

A React Native mobile application for Drive Clone - a secure file storage and management platform. This app provides mobile access to your files with features like biometric authentication, file browsing, uploads, downloads, photo albums, and more.

Features

Core Functionality

• User Authentication - Secure login with JWT tokens and 2FA support
• Biometric Security - Face ID / Touch ID integration for quick and secure access
• File Management - Browse, upload, download, rename, and delete files and folders
• Folder Navigation - Hierarchical folder structure with breadcrumb navigation
• File Preview - Built-in preview for images, PDFs, documents, and text files
• Search - Fast file search across your entire drive
• Starred Files - Mark important files for quick access
• Recent Files - View recently accessed files
• Photo Albums - Organize photos into albums with grid view
• File Sharing - Share files using iOS/Android native share sheets
• Download Management - Progress tracking for file downloads

Security Features

• Encrypted storage using Expo SecureStore
• Biometric authentication (Face ID, Touch ID, Fingerprint)
• App lock when returning from background
• JWT token-based API authentication
• Secure credential management

Screenshots

Add screenshots of your app here

Tech Stack

• Framework: React Native 0.81 with Expo SDK 54
• Router: Expo Router 6 (file-based routing)
• UI Components: React Native core components + Ionicons
• State Management: React hooks (useState, useEffect)
• HTTP Client: Axios
• Secure Storage: expo-secure-store
• Authentication: expo-local-authentication (biometrics)
• File System: expo-file-system, expo-document-picker, expo-sharing

Prerequisites

• Node.js 16+ and npm
• Expo CLI (npm install -g expo-cli)
• iOS Simulator (for macOS) or Android Emulator
• Expo Go app (optional, for quick testing)
• Backend API server running (see backend repository)

Installation

1. Clone the repository

   git clone https://github.com/yourusername/drive-clone-mobile.git
   cd drive-clone-mobile

2. Install dependencies

   npm install

3. Configure the API URL

   The app uses expo-constants to read configuration. Update app.json to add your backend API URL:

   {
     "expo": {
       "extra": {
         "apiUrl": "https://your-api-server.com/api"
       }
     }
   }

   Or for local development, the app defaults to http://localhost:5000/api

4. Update the bundle identifier (for production builds)

   In app.json, change the iOS bundle identifier:

   {
     "expo": {
       "ios": {
         "bundleIdentifier": "com.yourcompany.driveclonemobile"
       }
     }
   }

Running the App

Development Mode

Start the Expo development server:

npm start

Then choose how to run:

• Press i for iOS Simulator (macOS only)
• Press a for Android Emulator
• Press w for web browser
• Scan the QR code with Expo Go app on your physical device

Specific Platforms

# iOS (requires macOS)
npm run ios

# Android
npm run android

# Web
npm run web

Building for Production

This project uses Expo Application Services (EAS) for building production apps.

Prerequisites

npm install -g eas-cli
eas login

Build Commands

# Development build (with dev client)
eas build --profile development --platform ios
eas build --profile development --platform android

# Preview build (internal testing)
eas build --profile preview --platform ios
eas build --profile preview --platform android

# Production build
eas build --profile production --platform ios
eas build --profile production --platform android

Build configuration is in eas.json.

Project Structure

drive-clone-mobile/
├── app/
│   ├── (auth)/              # Authentication screens
│   │   └── login.js         # Login with 2FA support
│   ├── (tabs)/              # Main tab navigation
│   │   ├── _layout.js       # Tab bar configuration
│   │   ├── index.js         # Files browser (home)
│   │   ├── recent.js        # Recent files
│   │   ├── albums.js        # Photo albums
│   │   ├── starred.js       # Starred files
│   │   └── profile.js       # User profile & settings
│   ├── album/
│   │   └── [id].js          # Album detail view
│   ├── screens/             # Settings screens
│   │   ├── AccountSettings.js
│   │   ├── SecuritySettings.js
│   │   ├── BiometricSettings.js
│   │   └── NotificationsSettings.js
│   ├── components/          # Reusable components
│   │   ├── FilePreview.js   # File preview modal
│   │   └── DownloadModal.js # Download progress modal
│   ├── config/
│   │   └── api.js           # Axios configuration
│   ├── utils/               # Helper utilities
│   │   ├── biometricAuth.js # Biometric authentication
│   │   ├── downloadHelper.js # File download handling
│   │   └── fileIcons.js     # File type icons
│   └── _layout.js           # Root layout with auth guard
├── app.json                 # Expo configuration
├── eas.json                 # EAS Build configuration
├── package.json
└── tsconfig.json

Key Features Explained

Authentication Flow

1. User enters credentials on login screen
2. If 2FA is enabled, a second screen prompts for the code
3. JWT token is stored securely in Expo SecureStore
4. Token is automatically added to all API requests via Axios interceptor
5. Root layout (app/_layout.js) manages navigation guards

Biometric Authentication

• On first login, users are prompted to enable biometric authentication
• Preferences stored securely using Expo SecureStore
• When enabled, app requires biometric unlock on startup
• Re-locks when app goes to background and returns to foreground
• Supports Face ID (iOS), Touch ID (iOS), and Fingerprint (Android)

File Operations

• Upload: Uses expo-document-picker to select files
• Download: Uses expo-file-system with progress tracking, then expo-sharing to open share sheet
• Preview: In-app preview for images, PDFs, and documents
• Navigation: Breadcrumb trail for folder hierarchy

API Integration

The app expects a backend API with these endpoints:

• POST /auth/login - User authentication (with 2FA support)
• GET /files - List files (supports parent_id query param for folders)
• GET /files/search?q=query - Search files
• POST /files/upload - Upload files
• POST /files/folder - Create folder
• PATCH /files/:id/rename - Rename file
• PATCH /files/:id/star - Star/unstar file
• DELETE /files/:id - Delete file
• GET /albums - List albums
• GET /albums/:id - Get album details
• POST /albums - Create album
• DELETE /albums/:id - Delete album

All requests include Authorization: Bearer <token> header.

Configuration

API URL Configuration

Edit app.json:

{
  "expo": {
    "extra": {
      "apiUrl": "https://your-backend-api.com/api"
    }
  }
}

EAS Project

Update the project ID in app.json:

{
  "expo": {
    "extra": {
      "eas": {
        "projectId": "your-eas-project-id"
      }
    }
  }
}

Development Tips

Debugging

• Use React Native Debugger or Expo DevTools
• Console logs appear in terminal and browser devtools
• Check network requests in the browser Network tab

Common Issues

Issue: API requests failing

• Check that backend server is running
• Verify API_BASE_URL is correct
• Check network connectivity (use real device or configure emulator)

Issue: Biometric not working

• iOS Simulator: Face ID must be enrolled (Features > Face ID > Enroll)
• Android Emulator: Set up fingerprint in Settings > Security

Issue: File uploads failing

• Check file size limits on backend
• Verify proper multipart/form-data handling

Code Quality

# Run linter
npm run lint

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Related Projects

• Drive Clone Backend - Node.js backend API

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Built with Expo
• Icons from Ionicons
• Inspired by Google Drive

Support

For issues and questions:

• Open an issue on GitHub
• Check Expo Documentation

---

Made with ❤️ using React Native and Expo