-
Venkata Keerthi Priya Vissamsetti - M15804108
-
Yukta Ventrapragada - M15887062
The Spending Analyzer app is designed to assist users in efficiently recording their income and expenditures, enabling them to effortlessly monitor and evaluate their budgets and spending patterns. The following is the explanation of the different .js files designed for our app along with the outputs:
App.tsx - This file serves as the entry point for our React Native application, defining the navigation stack using React Navigation. It includes screens for home, login, signup, menu, expenses, income, categories, and reports, facilitating seamless navigation throughout the app's features.
HomeScreen.js - The HomeScreen.js file defines the home screen of the Spending Analyzer app, presenting a background image with options to login or sign up. It utilizes React Native components and styling to create a visually appealing and functional user interface.
SignUpScreen.js - The SignUpScreen.js file defines the screen where users can sign up for a new account in the Spending Analyzer app, incorporating email and password input fields. It utilizes AsyncStorage for data storage and React Native components for user interface elements, maintaining a visually appealing and easy signup process.
LoginScreen.js - The LoginScreen.js file defines the screen where users can log in to the Spending Analyzer app using their email and password. It utilizes AsyncStorage for storing user data and React Native components for creating a user-friendly login interface.
MenuScreen.js - The MenuScreen.js file presents users with options to navigate to different sections of the Spending Analyzer app, such as Expenses, Income, Categories, and Reports, utilizing TouchableOpacity for interactive buttons. It integrates a background image for visual appeal and maintains a clean and intuitive user interface design.
Expenses.js - The Expenses.js file allows users to add expenses with category, item, and amount details, saving them to AsyncStorage. It features navigation buttons to other sections and a logout option, all within a user-friendly interface utilizing React Native components.
Income.js -
The Income.js file enables users to add income entries with category, item, and amount details, storing them in AsyncStorage. It also provides navigation buttons to other sections and a logout option within a visually appealing interface utilizing React Native components.
Categories.js -
The Categories.js component presents categorized expenses and income entries obtained from AsyncStorage, showcasing their total amounts. It also provides navigation buttons to other sections and a logout option, utilizing React Native components for seamless user interaction.
Reports.js - The Reports.js component fetches expenses and income data from AsyncStorage, aggregates them by category, and displays them using BarChart from react-native-chart-kit. It also calculates total expenses and income, rendering them along with the category-wise data, and provides a logout button for user authentication.
Video Explaining the output -
SpendingAnalyzer.mp4
Links to the Files -