CircleCollect/circle-collect
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update README with project-specific documentation

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Abin Toppo
2026-06-12 16:58:58 +05:30
co-authored by Claude Fable 5
parent a34baa8be9
commit efcd3b15e0
1 changed files with 81 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+81 -64
View File
@@ -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 <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS).
- **iOS**: Press <kbd>R</kbd> 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`.