Skip to content

Commit

Permalink
fix: resolve database initialization issues
Browse files Browse the repository at this point in the history 
- Implement singleton pattern with promise caching
- Separate schema definitions into schemas.ts
- Add proper error handling and logging
- Fix AppContext database lifecycle
- Remove database destruction on unmount
- Add ignoreDuplicate option to RxDB config
  • Loading branch information
@EXTREMOPHILARUM
EXTREMOPHILARUM committed Nov 22, 2024
1 parent 54284da commit 58b2cc4
Show file tree
Hide file tree
Showing 15 changed files with 4,967 additions and 458 deletions.
122 changes: 17 additions & 105 deletions App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,113 +6,25 @@
*/

import React from 'react';
import type {PropsWithChildren} from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
} from 'react-native';

import {
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

type SectionProps = PropsWithChildren<{
title: string;
}>;

function Section({children, title}: SectionProps): React.JSX.Element {
const isDarkMode = useColorScheme() === 'dark';
return (
<View style={styles.sectionContainer}>
<Text
style={[
styles.sectionTitle,
{
color: isDarkMode ? Colors.white : Colors.black,
},
]}>
{title}
</Text>
<Text
style={[
styles.sectionDescription,
{
color: isDarkMode ? Colors.light : Colors.dark,
},
]}>
{children}
</Text>
</View>
);
}

function App(): React.JSX.Element {
const isDarkMode = useColorScheme() === 'dark';

const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
import { NavigationContainer } from '@react-navigation/native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaView, StatusBar } from 'react-native';
import { AppProvider } from './src/context/AppContext';
import AppNavigator from './src/navigation/AppNavigator';

const App = () => {
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
backgroundColor={backgroundStyle.backgroundColor}
/>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={backgroundStyle}>
<Header />
<View
style={{
backgroundColor: isDarkMode ? Colors.black : Colors.white,
}}>
<Section title="Step One">
Edit <Text style={styles.highlight}>App.tsx</Text> to change this
screen and then come back to see your edits.
</Section>
<Section title="See Your Changes">
<ReloadInstructions />
</Section>
<Section title="Debug">
<DebugInstructions />
</Section>
<Section title="Learn More">
Read the docs to discover what to do next:
</Section>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
<GestureHandlerRootView style={{ flex: 1 }}>
<SafeAreaView style={{ flex: 1, backgroundColor: '#ffffff' }}>
<StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
<AppProvider>
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
</AppProvider>
</SafeAreaView>
</GestureHandlerRootView>
);
}

const styles = StyleSheet.create({
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
},
highlight: {
fontWeight: '700',
},
});
};

export default App;
130 changes: 75 additions & 55 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,99 @@
This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
# Marauders Money - Personal Finance App

# Getting Started
A comprehensive, offline-first personal finance management application built with React Native.

>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
## Features

## Step 1: Start the Metro Server
- **Multi-Account Management**: Track multiple financial accounts in one place
- **Budget Tracking**: Set and monitor budgets by category
- **Investment Portfolio**: Track your investments and monitor performance
- **Financial Goals**: Set and track progress towards financial goals
- **Offline-First**: All data is stored locally using RxDB
- **Cross-Platform**: Works on both iOS and Android

First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
## Tech Stack

To start Metro, run the following command from the _root_ of your React Native project:
- **Framework**: React Native (bare configuration)
- **State Management**: React Context
- **Database**: RxDB for offline-first functionality
- **Styling**: NativeWind (Tailwind CSS for React Native)
- **Navigation**: React Navigation
- **Testing**: Jest and React Native Testing Library

```bash
# using npm
npm start

# OR using Yarn
yarn start
```

## Step 2: Start your Application

Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:

### For Android

```bash
# using npm
npm run android
## Getting Started

# OR using Yarn
yarn android
```

### For iOS
### Prerequisites

```bash
# using npm
npm run ios
- Node.js (>= 18)
- npm or yarn
- React Native development environment set up for iOS and Android

# OR using Yarn
yarn ios
```
### Installation

If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.
1. Clone the repository:
```bash
git clone https://github.com/yourusername/marauders-money.git
cd marauders-money
```

This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
2. Install dependencies:
```bash
npm install
```

## Step 3: Modifying your App
3. Install iOS dependencies (macOS only):
```bash
cd ios && pod install && cd ..
```

Now that you have successfully run the app, let's modify it.
4. Start the development server:
```bash
npm start
```

1. Open `App.tsx` in your text editor of choice and edit some lines.
2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
5. Run the app:
- For iOS (macOS only):
```bash
npm run ios
```
- For Android:
```bash
npm run android
```

For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
## Project Structure

## Congratulations! :tada:
```
src/
├── context/ # Global state management
├── database/ # RxDB configuration and schemas
├── navigation/ # Navigation configuration
├── screens/ # Main app screens
└── components/ # Reusable components
```
You've successfully run and modified your React Native App. :partying_face:
## Development
### Now what?
- **State Management**: The app uses React Context for global state management, with the main context provider in `src/context/AppContext.tsx`
- **Database**: RxDB is configured in `src/database/config.ts` with schemas for accounts, transactions, budgets, investments, and goals
- **Navigation**: The app uses a bottom tab navigator for main navigation, defined in `src/navigation/AppNavigator.tsx`
- **Styling**: All styling is done using NativeWind (Tailwind CSS) classes
- 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 [Introduction to React Native](https://reactnative.dev/docs/getting-started).
## Testing
# Troubleshooting
Run the test suite:
```bash
npm test
```

If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
## Contributing

# Learn More
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

To learn more about React Native, take a look at the following resources:
## License

- [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.
This project is licensed under the MIT License - see the LICENSE file for details
1 change: 1 addition & 0 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* @format
*/

import 'react-native-gesture-handler';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
Expand Down
Loading

0 comments on commit 58b2cc4

Please sign in to comment.