LendsLog is a comprehensive mobile application built with React Native and Expo. It provides an intuitive and seamless platform for users to log, manage, and track their lending and borrowing activities, ensuring transparent and hassle-free financial interactions among peers.
- Authentication & Security: Secure login, sign-up, and mobile number verification via OTP.
- Interactive Dashboard: Get a quick overview of today's lends, upcoming dues, and pending installments at a glance.
- Log Management: Effortlessly add, track, and scrutinize lends and dues.
- Installment Tracking: Manage split payments and track individual installments cleanly.
- Real-time Notifications: Leveraging Firebase Messaging to keep you updated on upcoming and overdue logs.
- Robust Searching & Filtering: Easily dig through past logs with a scalable search bar and category filters.
- Profile Management: Manage your account details easily through a dedicated profile screen.
This project is scaffolded using Expo and leans on modern React Native development practices.
- Framework: React Native & Expo (SDK 51)
- Routing: Expo Router (File-based routing)
- Language: TypeScript
- State Management: Redux Toolkit & React-Redux
- Data Fetching: Axios
- Forms & Validation: React Hook Form combined with Zod
- UI/UX: Custom animated components,
react-native-reanimated, andreact-navigationtabs. - Cloud & Notifications: React Native Firebase (App & Messaging)
- Local Storage: AsyncStorage
A quick look at the file hierarchy inside the app/ directory and surroundings:
lendslog/
├── app/ # Main Expo Router directory (file-based routing)
│ ├── (auth)/ # Authentication screens (login, sign-up, mobile verify)
│ ├── dashboard/ # Main app features (lends, dues, adding logs, profile, notifications)
│ ├── _layout.tsx # Root layout
│ └── index.tsx # Entry point
├── api/ # Axios instances and API endpoint configurations
├── components/ # Reusable UI components (Cards, Inputs, Modals, Checkboxes, etc.)
├── redux/ # Redux Toolkit store and slices for global state management
├── hooks/ # Custom React Hooks
├── contexts/ # React Context Providers
├── constants/ # Global constants and theme definitions
├── utils/ # Helper functions for formatting, validation, etc.
└── assets/ # Local media like fonts, icons, and splash screens
Follow these steps to run the application locally.
- Node.js installed (v18 or higher recommended)
npm,yarn, orpnpm- Expo Go app installed on your physical device, or an iOS Simulator / Android Emulator running on your machine.
-
Clone the repository (if applicable):
git clone <repository-url> cd lendslog
-
Install dependencies:
npm install
-
Start the development server:
npm start
Once the development server is running, you can open the app in several ways:
- Expo Go (Physical Device): Open the Expo Go app and scan the QR code generated in your terminal.
- iOS Simulator: Press
iin the terminal to open the app on an iOS simulator (macOS only). - Android Emulator: Press
ain the terminal to open the app on an Android emulator. - Web Browser: Press
win the terminal to run the app in a web browser.
npm start/npm run dev: Starts the Expo development server.npm run android: Starts the app directly in Android mode.npm run ios: Starts the app directly in iOS mode.npm run web: Starts the app on the web.npm run lint: Runs ESLint to find and fix problems in the project's codebase.npm test: Runs the Jest test suite in watch mode.npm run dev-build/npm run preview-build: Utility scripts for building with EAS (Expo Application Services).
To dive deeper into the technologies used within LendsLog, check out the following resources: