Update README with project-specific documentation
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Abin Toppo
co-authored by
Claude Fable 5
Claude Fable 5
parent
a34baa8be9
commit
efcd3b15e0
@@ -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
|
## Project structure
|
||||||
# Using npm
|
|
||||||
npm start
|
|
||||||
|
|
||||||
# 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
|
```sh
|
||||||
# Using npm
|
npm install
|
||||||
npm run android
|
|
||||||
|
|
||||||
# OR using Yarn
|
|
||||||
yarn android
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### iOS
|
For iOS, also install CocoaPods dependencies (first clone and after updating native deps):
|
||||||
|
|
||||||
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:
|
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
bundle install
|
bundle install
|
||||||
```
|
|
||||||
|
|
||||||
Then, and every time you update your native dependencies, run:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
bundle exec pod install
|
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
|
```sh
|
||||||
# Using npm
|
npm start
|
||||||
npm run ios
|
|
||||||
|
|
||||||
# OR using Yarn
|
|
||||||
yarn ios
|
|
||||||
```
|
```
|
||||||
|
|
||||||
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).
|
- **API base URL** — set in `src/utils/ApiUrls.tsx` (`BASE_URL`). A commented-out local URL is provided for development against a local backend.
|
||||||
- **iOS**: Press <kbd>R</kbd> in iOS Simulator.
|
- **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:
|
See the React Native [Troubleshooting guide](https://reactnative.dev/docs/troubleshooting). If Android builds fail after dependency changes, try `cd android && ./gradlew clean`.
|
||||||
|
|
||||||
### 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.
|
|
||||||
|
|||||||
Reference in New Issue
Block a user