Skip to content

A user-friendly React Native app to help you effortlessly track and manage your finances.

Notifications You must be signed in to change notification settings

SiddharthSsb11/expense-manager

Repository files navigation

Expense Manager

A user-friendly mobile application built with React Native to help you effortlessly track and manage your finances.

This is a new React Native project, bootstrapped using @react-native-community/cli.

Features

  • Clear Overview- Recent Expenses: Gain instant insights into your spending habits with a comprehensive recent expenses list at the app's forefront.
  • Complete Expense History - All Expenses: Access a detailed record of all your expenses for thorough financial analysis.
  • Effortless Expense Management - Add new expenses - edit existing: Add new expenses and seamlessly edit existing ones, empowering you to stay on top of your finances.
  • Robust Input Validation : Experience a smooth user experience with intelligent input validation that prevents errors and ensures data integrity.
  • Nested Navigation: (Native Stack, Bottom-Tab, Stack )
  • Store Data Management
  • Efficient Data Handling - Firebase - Leverage the power of Firebase, a robust backend cloud solution, for persistent storage of your expense data, guaranteeing its accessibility across devices.
  • Enhanced User Experience - spinner loader: Enjoy a smooth and responsive user interface with a spinner loader that displays during data fetching, keeping you informed during the process.
  • Custom Pressable Button Component
  • FlatList for displaying your expenses lists
  • Utilizes latest JavaScript and React features
  • Styled with React Native StyleSheet
  • Implemented using React Hooks
  • Cross-platform code for Android and iOS
  • Latest features of JavaScript i.e. ES8 is used

Few Screenshots

AllExpenses RecentExpenses EditExpenses AddExpenses

Getting Started

Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.

Step 1: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native.

To start Metro, run the following command from the root of your React Native project:

# 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

# using npm
npm run android

# OR using Yarn
yarn android

For iOS

# using npm
npm run ios

# OR using Yarn
yarn ios

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.

This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.