A comprehensive, modern mobile-first financial platform built with a React Native (Expo) frontend and Spring Boot backend. Features include payment processing, wallet management, user authentication, food delivery, and more—all with a beautiful, responsive UI and robust real-time features.
- Overview
- Features
- Project Structure
- Quick Start
- Configuration
- Splash Screen & UI/UX
- Testing
- Building & Deployment
- Performance & Security
- Troubleshooting
- Support
- License
Looply is a cross-platform mobile application and backend API designed to deliver a seamless digital finance and lifestyle experience. Users can manage wallets, make payments, order food, and more—all with real-time updates and a delightful user interface.
- User Authentication: Secure phone number login with OTP
- Digital Wallet: Real-time balance, top-up, and transaction history
- Payment Processing: Pay bills, buy airtime, manage payment methods
- Food Delivery: Browse restaurants, order meals, track orders
- Profile Management: Edit profile, upload images, manage preferences
- Real-time Notifications: Instant updates for transactions and orders
- Modern UI/UX: Responsive design, dark/light mode, smooth navigation
- Robust Error Handling: Connection loss detection, retry flows, user feedback
- Spring Boot 3.4.5 with Java 17
- JWT Authentication and role-based access control
- PostgreSQL (Neon) with Liquibase migrations
- Payment Gateway Integration (Hubtel)
- Firebase for file storage
- Swagger/OpenAPI for API docs
- WebSocket for real-time features
- Comprehensive REST API for all app features
project-root/
├── docs/ # 📚 All Documentation
│ ├── deployment/ # Deployment guides
│ ├── fixes/ # Bug fix documentation
│ ├── api/ # API documentation
│ └── troubleshooting/ # Common issues & solutions
├── scripts/ # 🔧 Build & Utility Scripts
│ ├── build/ # Build scripts
│ ├── deploy/ # Deployment scripts
│ └── maintenance/ # Maintenance scripts
├── backend/ # 🖥️ Spring Boot API Server
│ ├── src/main/java/com/group70/hubtel/
│ │ ├── config/ # Security & Firebase configs
│ │ ├── controller/ # REST API endpoints
│ │ ├── dto/ # Data Transfer Objects
│ │ ├── model/ # JPA entities
│ │ ├── repository/ # Data access layer
│ │ ├── service/ # Business logic
│ │ └── security/ # JWT authentication
│ ├── src/main/resources/
│ │ ├── application.properties
│ │ ├── db/migration/ # Database migrations
│ │ └── firebase-service-account.json
│ ├── docs/ # Backend-specific docs
│ └── pom.xml
├── frontend/ # 📱 React Native (Expo) App
│ ├── app/ # Expo Router screens
│ ├── components/ # Reusable UI components
│ ├── stores/ # Zustand state management
│ ├── constants/ # App constants & API config
│ ├── utils/ # Utility functions
│ ├── assets/ # Images and icons
│ ├── docs/ # Frontend-specific docs
│ ├── scripts/ # Frontend build scripts
│ ├── package.json
│ └── app.json
├── .github/ # 🔄 GitHub workflows & templates
│ ├── workflows/ # CI/CD pipelines
│ └── ISSUE_TEMPLATE/ # Issue templates
├── README.md # 📖 Main project documentation
├── CONTRIBUTING.md # 👥 Contribution guidelines
├── CHANGELOG.md # 📝 Version history
└── LICENSE # ⚖️ License information
- Node.js v18+
- Java 17 (JDK)
- Maven v3.6+
- Expo CLI (
npm install -g @expo/cli) - Git
- Neon PostgreSQL, Firebase, Cloudinary, Hubtel API accounts
git clone <repository-url>
cd project-rootcd backend
# Configure database, Firebase, and Hubtel credentials in application.properties
mvn clean install
mvn spring-boot:runcd frontend
npm install # or yarn install
# Configure API endpoint in constants/api.ts
# Set Cloudinary credentials in utils/uploadToCloudinary.ts
npm start # or yarn start- Scan QR code with Expo Go (mobile)
- Press
wfor web,ifor iOS simulator,afor Android emulator
- Backend:
application.properties,FirebaseConfig.java,SecurityConfig.java,WebSocketConfig.java - Frontend:
constants/api.ts,constants/colors.ts,stores/auth-store.ts,utils/apiClient.ts,.envfor secrets
- Splash Config:
frontend/app.json(seesplashsection) - Splash Image:
frontend/assets/images/splash-icon.jpg - Advanced Control: Use
expo-splash-screeninApp.tsxfor manual hide/show - Modern UI/UX: Shimmer/skeleton loading, connection error handling, responsive design, dark/light mode, smooth navigation
- Backend:
cd backend && mvn test - Frontend:
cd frontend && npm test
- Backend:
mvn clean package(deploy JAR to cloud) - Frontend:
expo build:android,expo build:ios, or use EAS Build - Web:
expo build:web
- Backend: DB indexing, caching, connection pooling, rate limiting, JWT, HTTPS, input validation, GDPR compliance
- Frontend: Image optimization, code splitting, memory management, secure token storage, robust error handling
- Backend: Check DB/Firebase credentials, JWT secret, Liquibase changelogs
- Frontend: Clear Expo cache (
npx expo start --clear), verify API URLs, check Cloudinary config, theme issues - Debug Commands:
npx expo start --clear
npx react-native start --reset-cache
npm cache clean --force
rm -rf node_modules && npm install- Development Team: Group 70, Looply
- Course: Mobile Application Development
- Institution: Kwame Nkrumah University of Science and Technology
- Contact: See project repository for issues and contact info
This project is developed for educational purposes as part of the Mobile Application Development course (CSM 266).
Last Updated: July 2025
Version: 1.0.0
Status: Active Development
Company: Looply