diff --git a/README.md b/README.md index 3e2c3f8..a3bbd44 100644 --- a/README.md +++ b/README.md @@ -1,97 +1,114 @@ -This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli). +# CircleCollect -# Getting Started +CircleCollect is a React Native mobile app for organizing and managing group fund collections (rotating savings / contribution circles). Organizers create contribution groups, members join and contribute on a cycle, and a winner can be randomly selected each cycle. Payments are handled through an in-app payment gateway, and push notifications keep members up to date. -> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding. +## Features -## Step 1: Start Metro +- **OTP-based authentication** — login with a mobile number and one-time password; tokens stored securely with `react-native-keychain` +- **Organizer registration** — regular users can apply to become organizers and register bank / mobile money details +- **Group management** — create, edit, and review groups; browse public groups; approve or decline join requests; invite members from contacts +- **Contributions and payments** — contribute to one group or pay several at once (bulk pay), choose a payment mode, and complete checkout in a payment gateway WebView +- **Cycle winner selection** — randomly select a winning member for a group's current cycle +- **Transactions** — view personal transaction history and group payment records +- **Push notifications** — Firebase Cloud Messaging with Notifee for display, including deep-link redirection from a notification to the relevant screen +- **Profile** — edit profile details, profile picture, and bank details -First, you will need to run **Metro**, the JavaScript build tool for React Native. +## Tech stack -To start the Metro dev server, run the following command from the root of your React Native project: +| Area | Library | +| --- | --- | +| Framework | React Native 0.81, React 19, TypeScript | +| Navigation | React Navigation (native stack + bottom tabs) with deep linking | +| State | Redux Toolkit + redux-persist (user, notifications) | +| Server state | TanStack React Query with custom CRUD hooks (`useFetch`, `useCreate`, `useUpdate`, `useDelete`) | +| Networking | Axios client with auth interceptors (`src/api/client.ts`) | +| Push notifications | `@react-native-firebase/messaging` + `@notifee/react-native` | +| Secure storage | `react-native-keychain`, AsyncStorage | +| UI | React Native Paper, RN Elements, vector icons, Reanimated, linear gradient, calendars | +| Payments | Gateway checkout via `react-native-webview` | -```sh -# Using npm -npm start +## Project structure -# OR using Yarn -yarn start +``` +src/ +├── api/ # Axios client with request/response interceptors +├── assets/ # Images and static assets +├── components/ # Shared UI (cards, buttons, alerts, common widgets) +├── constents/ # Font family constants +├── hooks/ +│ ├── core/ # React Query CRUD hooks + API debug helpers +│ └── ui/ # useTheme +├── navigation/ # AppNavigator (root stack), BottomTabs, route types +├── payment/ # Payment WebView wrapper +├── redux/ # Store, userSlice, notificationSlice +├── screens/ +│ ├── home/ # Dashboard, group lists, requests +│ ├── management/ # Group/member management, payments, winner selection +│ ├── payment/ # Payment mode selection, gateway WebView +│ ├── profile/ # Profile, become organizer, bank details +│ ├── transaction/# Transaction history +│ ├── notification/ +│ └── setting/ +├── theme/ # ThemeProvider and theme tokens +└── utils/ # API URLs, helpers, Firebase setup, navigation service ``` -## Step 2: Build and run your app +The backend base URL and all endpoints are defined in `src/utils/ApiUrls.tsx`. -With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app: +## Getting started -### Android +### Prerequisites + +- Node.js >= 20 +- A working [React Native environment](https://reactnative.dev/docs/set-up-your-environment) (Android Studio / Xcode) +- Firebase configuration files in place (`android/app/google-services.json`, iOS `GoogleService-Info.plist`) for push notifications + +### Install dependencies ```sh -# Using npm -npm run android - -# OR using Yarn -yarn android +npm install ``` -### iOS - -For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps). - -The first time you create a new project, run the Ruby bundler to install CocoaPods itself: +For iOS, also install CocoaPods dependencies (first clone and after updating native deps): ```sh bundle install -``` - -Then, and every time you update your native dependencies, run: - -```sh bundle exec pod install ``` -For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html). +### Run the app + +Start Metro: ```sh -# Using npm -npm run ios - -# OR using Yarn -yarn ios +npm start ``` -If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device. +Then in a separate terminal: -This is one way to run your app — you can also build it directly from Android Studio or Xcode. +```sh +# Android +npm run android -## Step 3: Modify your app +# iOS +npm run ios +``` -Now that you have successfully run the app, let's make changes! +## Scripts -Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh). +| Command | Description | +| --- | --- | +| `npm start` | Start the Metro dev server | +| `npm run android` | Build and run on Android | +| `npm run ios` | Build and run on iOS | +| `npm test` | Run Jest tests | +| `npm run lint` | Run ESLint | -When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload: +## Configuration -- **Android**: Press the R key twice or select **"Reload"** from the **Dev Menu**, accessed via Ctrl + M (Windows/Linux) or Cmd ⌘ + M (macOS). -- **iOS**: Press R in iOS Simulator. +- **API base URL** — set in `src/utils/ApiUrls.tsx` (`BASE_URL`). A commented-out local URL is provided for development against a local backend. +- **Deep linking** — the app registers the `myapp://` scheme for notification redirection (see `src/navigation/AppNavigator.tsx`). -## Congratulations! :tada: +## Troubleshooting -You've successfully run and modified your React Native App. :partying_face: - -### Now what? - -- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps). -- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started). - -# Troubleshooting - -If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. - -# Learn More - -To learn more about React Native, take a look at the following resources: - -- [React Native Website](https://reactnative.dev) - learn more about React Native. -- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment. -- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**. -- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts. -- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native. +See the React Native [Troubleshooting guide](https://reactnative.dev/docs/troubleshooting). If Android builds fail after dependency changes, try `cd android && ./gradlew clean`.