A modern, AI-powered web application for tracking transactions, managing receipts, and gaining insights into spending patterns. Built with Next.js 15, TypeScript, and integrated with Google Wallet and Gemini AI.
- Welcome Screen with feature highlights carousel
- Multi-login Options (Gmail, Phone, Skip option)
- Google Wallet Integration for seamless transaction sync
- Profile Setup with preferences and data sync options
- Real-time Transaction Overview with insights
- Quick Actions for common tasks
- Spending Analytics with visual charts
- Receipt Management with view, download, and share options
- AI-Powered Chat with Gemini integration for natural language queries
- Receipt Scanning with camera interface and OCR processing
- Advanced Transaction Filtering with search and bulk actions
- Smart Insights with spending recommendations and trend analysis
- Profile Management with security settings
- Notifications Center with customizable alerts
- Help Center with AI support and comprehensive FAQ
- Data Export and backup options
- Next.js 15.3.5 - React framework with App Router
- TypeScript - Type-safe JavaScript
- Tailwind CSS - Utility-first CSS framework
- Lucide React - Beautiful icons library
- React Context API - Global state management
- React Hooks - Local state and effects
- Google Wallet API - Transaction synchronization
- Gemini AI - Intelligent chat and insights
- Camera API - Receipt scanning functionality
- Vercel - Production deployment platform
- Git - Version control
-
Clone the repository
git clone <repository-url> cd ireceipts
-
Install dependencies
npm install # or yarn install -
Set up environment variables
cp .env.example .env.local
Configure the following variables:
GOOGLE_WALLET_API_KEY- Google Wallet integrationGEMINI_API_KEY- Gemini AI chat functionalityNEXT_PUBLIC_APP_URL- Application URL
-
Run the development server
npm run dev # or yarn dev -
Open your browser Navigate to http://localhost:3000
- Launch the app and view the welcome screen
- Choose your login method (Gmail, Phone, or Skip)
- Connect your Google Wallet (optional)
- Set up your profile and preferences
- Start tracking transactions!
- View recent transactions and spending insights
- Access quick actions for common tasks
- Monitor spending patterns and trends
- Add Transactions: Use the scan/upload feature
- View Receipts: Click the eye icon on any transaction
- Filter & Search: Use advanced filters in the transactions view
- Bulk Actions: Select multiple transactions for batch operations
- Ask natural language questions about your spending
- Get insights and recommendations
- Query specific transactions or categories
- View spending breakdowns by category
- Analyze trends over different time periods
- Get personalized recommendations
- Track financial goals and progress
ireceipts/
├── app/
│ ├── components/ # React components
│ │ ├── WelcomeScreen.tsx
│ │ ├── LoginOptions.tsx
│ │ ├── GoogleWalletIntegration.tsx
│ │ ├── InitialSetup.tsx
│ │ ├── HomeDashboard.tsx
│ │ ├── ScanUpload.tsx
│ │ ├── ChatQuery.tsx
│ │ ├── InsightsDashboard.tsx
│ │ ├── ProfileManagement.tsx
│ │ ├── TransactionsAdvanced.tsx
│ │ ├── NotificationsCenter.tsx
│ │ └── HelpCenter.tsx
│ ├── contexts/ # React contexts
│ │ └── AppContext.tsx
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main page component
├── public/ # Static assets
├── next.config.ts # Next.js configuration
├── tailwind.config.ts # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies and scripts
- Central hub with transaction overview
- Quick actions and navigation
- Real-time insights and alerts
- Advanced analytics and visualizations
- Spending trends and category breakdowns
- AI-powered recommendations
- Natural language transaction queries
- Gemini AI integration
- Context-aware responses
- Comprehensive transaction management
- Advanced filtering and search
- Bulk operations and export
- Modern Design with clean, intuitive layouts
- Responsive - Works on desktop and mobile
- Dark Mode Support - User preference based
- Accessibility - ARIA labels and keyboard navigation
- Progressive Enhancement - Works without JavaScript
- Loading States - Smooth transitions and feedback
- Error Handling - Graceful error messages
- Offline Support - Core functionality works offline
- Automatic transaction synchronization
- Secure authentication flow
- Real-time balance updates
- Natural language processing
- Contextual transaction insights
- Personalized recommendations
npm run build
npm startvercel --prodMake sure to set up the following in your deployment environment:
GOOGLE_WALLET_API_KEYGEMINI_API_KEYNEXT_PUBLIC_APP_URL
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow TypeScript best practices
- Use ESLint and Prettier for code formatting
- Write meaningful commit messages
- Add comments for complex logic
- Write unit tests for utility functions
- Test React components with React Testing Library
- Ensure mobile responsiveness
- Optimize images and assets
- Use React.memo for expensive components
- Implement proper loading states
- Google Wallet integration requires API key configuration
- Gemini AI features need proper authentication setup
- Camera scanning works best in good lighting conditions
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js team for the amazing framework
- Vercel for seamless deployment
- Google for Wallet API and Gemini AI
- Lucide for beautiful icons
- Tailwind CSS for utility-first styling
Built with ❤️ using Next.js 15 and TypeScript