A modern React Native task management application built with Expo, featuring authentication, real-time updates, and a beautiful UI powered by NativeWind (Tailwind CSS).
- π Authentication System - Firebase Auth integration
- π Task Management - Create, edit, delete, and organize tasks
- π¨ Modern UI - NativeWind styling with responsive design
- π± Cross-Platform - Runs on iOS, Android, and Web
- π Notifications - Task reminders and updates
- π€ User Profiles - Customizable user settings
- π Dark Mode - Theme switching support
- Node.js (v18 or higher)
- Expo CLI
- Git
- Android Studio / Xcode (for device testing)
-
Clone the repository
git clone https://github.com/ChamathDilshanC/Advanced-Mobile-Development.git cd Advanced-Mobile-Development
-
Install dependencies
npm install
-
Set up environment variables
# Create .env file in root directory cp .env.example .env
-
Configure Firebase (See Firebase Setup section below)
-
Start the development server
npx expo start
-
Run on your preferred platform
- Press
a
for Android emulator - Press
i
for iOS simulator - Press
w
for web browser - Scan QR code with Expo Go app for physical device
- Press
- Go to Firebase Console
- Click "Create a project"
- Follow the setup wizard
- In Firebase Console, go to Authentication > Sign-in method
- Enable Email/Password provider
- Enable Google provider (optional)
- Go to Project Settings > General
- Click "Add app" and select Web
- Register your app with a nickname
- Copy the Firebase config object
Replace the config in firebase.ts
with your Firebase project details:
const firebaseConfig = {
apiKey: "your-api-key",
authDomain: "your-project.firebaseapp.com",
projectId: "your-project-id",
storageBucket: "your-project.appspot.com",
messagingSenderId: "your-sender-id",
appId: "your-app-id",
};
Add your API endpoints to .env
:
API_BASE_URL="your-api-base-url"
EXPO_PUBLIC_API_BASE_URL="your-public-api-url"
βββ app/ # Main application routes
β βββ (auth)/ # Authentication screens
β β βββ login.tsx # Login screen
β β βββ register.tsx # Registration screen
β βββ (dashboard)/ # Main app screens
β β βββ dashboard.tsx # Dashboard/Home
β β βββ tasks.tsx # Task management
β β βββ profile.tsx # User profile
β β βββ settings.tsx # App settings
β βββ _layout.tsx # Root layout
βββ assets/ # Static assets
βββ context/ # React contexts
β βββ AuthContext.tsx # Authentication context
βββ services/ # API services
β βββ authService.ts # Authentication API
β βββ taskService.ts # Task management API
β βββ config/
β βββ api.ts # API configuration
βββ firebase.ts # Firebase configuration
βββ global.css # Global styles
# Development
npm start # Start Expo development server
npm run android # Run on Android
npm run ios # Run on iOS
npm run web # Run on web
# Building
npm run build # Build for production
npm run build:android # Build Android APK
npm run build:ios # Build iOS app
# Code Quality
npm run lint # Run ESLint
npm run lint:fix # Fix ESLint issues
npm run type-check # TypeScript type checking
This project uses NativeWind (Tailwind CSS for React Native) for styling:
- Configure styles in
tailwind.config.js
- Global styles in
global.css
- Component-level utility classes
- Dark mode support
- Expo Go: Scan QR code for quick testing
- Development Build: For production-like testing
- Emulators: Android Studio/Xcode simulators
# Generate development build
npx expo run:android --device
npx expo run:ios --device
app.json
- Expo app configurationbabel.config.js
- Babel transpiler configmetro.config.js
- Metro bundler configtailwind.config.js
- Tailwind CSS configtsconfig.json
- TypeScript configuration
- Add your Firebase project configuration to
firebase.ts
- Configure Firebase Authentication providers
- Set up Firestore database rules
- Configure Firebase Cloud Messaging (FCM) for push notifications
- Set up Firebase Storage for file uploads
- Implement task categories and tags
- Add task priority levels
- Create task sharing functionality
- Implement offline sync
- Add task statistics and analytics
- Create export/import functionality
- Implement team collaboration features
- Add animations and transitions
- Implement gesture controls
- Create onboarding flow
- Add accessibility features
- Optimize for tablet layouts
- Create custom icon set
- Add unit and integration tests
- Implement error boundary components
- Add performance monitoring
- Optimize bundle size
- Add CI/CD pipeline
- Implement analytics tracking
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
If you encounter any issues:
- Check the Issues page
- Create a new issue with detailed description
- Join our Discord community
- Expo Documentation
- React Native Documentation
- Firebase Documentation
- NativeWind Documentation
- TypeScript Documentation
Built with β€οΈ by ChamathDilshanC