ShelfIQ

ShelfIQ is a comprehensive Expo + React Native inventory management app for small business owners. It provides complete inventory tracking, sales and purchase management, customer management, OCR-powered bill processing, and invoice generation capabilities.

Features

✅ Completed

• Authentication System

  • User registration with automatic company and warehouse creation
  • Email/password login with session persistence
  • Password recovery via email
  • Secure token storage using AsyncStorage

• Business Profile Management

  • Edit company details (name, email, phone, address)
  • Upload and manage company logo
  • Logo storage in Supabase Storage

• Navigation

  • Bottom tab navigation (Home, Dashboard, Items, More)
  • Stack navigation for authentication flow
  • Stack navigation for Home tab (Business Profile)

• Home Screen

  • Welcome header with company logo and name
  • Summary cards for key metrics (products, low stock, sales, revenue, customers)
  • Recent transactions and customer activity
  • Invoice generation and sharing
  • Quick access to all major features

• Product Management

  • Add, edit, and delete products
  • Product detail view with full information
  • SKU management with uniqueness per company
  • Product images support
  • Cost and selling price tracking
  • Stock level adjustments
  • Low stock alerts and reorder levels
  • Product search and filtering

• Inventory Tracking

  • Real-time stock level monitoring
  • Stock adjustments with history
  • Low stock alerts and notifications
  • Reorder level and quantity management
  • Inventory views by warehouse

• Sales Management

  • Create sales with multiple products
  • Customer selection and assignment
  • Payment method tracking (Cash, Card, UPI, Credit)
  • Tax calculation and application
  • Sales history and detail views
  • Sales analytics and reporting
  • Revenue tracking

• Purchase Management

  • Create purchase orders
  • Supplier/vendor management
  • OCR-powered bill processing using Gemini AI
  • Automatic extraction of vendor, items, quantities, and prices from bills
  • Support for images (JPG, PNG) and PDF documents
  • Purchase history and detail views
  • Automatic inventory updates on purchase

• Customer Management

  • Add, edit, and delete customers
  • Customer contact information (name, email, phone, address)
  • Customer transaction history
  • Customer list with search functionality
  • Customer cards for quick reference

• OCR & Bill Processing

  • AI-powered OCR using Google Gemini 2.0 Flash
  • Automatic extraction of vendor/supplier names
  • Line item extraction (product name, quantity, unit price)
  • Tax and total amount extraction
  • Support for multiple file formats (JPG, PNG, PDF)
  • Preview and edit extracted data before saving
  • Automatic product matching and creation

• Invoice Generation

  • Professional PDF invoice generation
  • Company branding with logo
  • Multiple invoice formats (Standard, Detailed, Minimal)
  • Print and share functionality
  • Customer and company details
  • Itemized billing with taxes
  • Invoice customization settings

• Dashboard & Analytics

  • Comprehensive analytics dashboard
  • Sales and revenue metrics
  • Product performance tracking
  • Customer insights
  • Low stock alerts
  • Transaction summaries

• Settings

  • User profile management
  • Invoice format preferences
  • App customization options
  • Sign out functionality

• Navigation

  • Bottom tab navigation (Home, Dashboard, Items, More)
  • Stack navigation for authentication flow
  • Stack navigation for Home tab (Business Profile)
  • Stack navigation for Products (Items tab)
  • Stack navigation for Sales
  • Stack navigation for Purchases
  • Stack navigation for Customers

• Database Schema

  • Complete Supabase schema with core tables
  • Row Level Security (RLS) policies
  • Automatic triggers for calculations and alerts
  • Views for optimized queries
  • Support for companies, users, products, inventory, sales, purchases, customers, and more

Tech Stack

• Framework: Expo + React Native (v0.81.5)
• Backend: Supabase (PostgreSQL + Auth + Storage)
• Navigation: React Navigation (Tabs + Stack)
• State Management: React Context API
• Storage: AsyncStorage for session, Supabase Storage for files
• OCR/AI: Google Gemini 2.0 Flash API
• PDF Generation: Expo Print
• File Handling: Expo File System, Document Picker, Image Picker
• Camera: Expo Camera
• UI Components: React Native core + Expo Vector Icons

Project Structure

ShelfIQ/
├── App.js                          # App entry point with AuthProvider
├── app.json                        # Expo configuration
├── lib/
│   └── supabase.js                # Supabase client configuration
├── contexts/
│   ├── AuthContext.js             # Authentication context & hooks
│   └── SettingsContext.js          # App settings context
├── screens/
│   ├── auth/
│   │   ├── LoginScreen.js         # Login screen
│   │   ├── RegisterScreen.js      # Registration screen
│   │   └── ForgotPasswordScreen.js # Password reset screen
│   ├── products/
│   │   ├── ProductListScreen.js   # Product list with search
│   │   ├── AddProductScreen.js    # Add new product
│   │   ├── EditProductScreen.js   # Edit product
│   │   ├── ProductDetailScreen.js # Product details
│   │   └── AdjustStockScreen.js   # Stock adjustments
│   ├── sales/
│   │   ├── SalesListScreen.js     # Sales history
│   │   ├── CreateSaleScreen.js    # Create new sale
│   │   └── SaleDetailScreen.js    # Sale details
│   ├── purchases/
│   │   ├── PurchaseListScreen.js  # Purchase history
│   │   ├── CreatePurchaseScreen.js # Create purchase (with OCR)
│   │   └── PurchaseDetailScreen.js # Purchase details
│   ├── customers/
│   │   ├── CustomerListScreen.js  # Customer list
│   │   ├── AddCustomerScreen.js   # Add customer
│   │   └── EditCustomerScreen.js  # Edit customer
│   ├── HomeScreen.js              # Main dashboard
│   ├── BusinessProfileScreen.js   # Business profile editor
│   ├── DashboardScreen.js         # Analytics dashboard
│   ├── SettingsScreen.js          # App settings
│   └── MoreScreen.js              # More options
├── navigation/
│   ├── TabNavigator.js            # Bottom tabs
│   ├── AuthNavigator.js           # Auth flow navigation
│   ├── HomeStackNavigator.js      # Home tab stack
│   ├── ItemsStackNavigator.js     # Products stack
│   ├── SalesStackNavigator.js     # Sales stack
│   ├── PurchasesStackNavigator.js # Purchases stack
│   └── CustomerStackNavigator.js  # Customers stack
├── components/
│   ├── SplashScreen.js            # Splash animation
│   ├── SummaryCard.js            # Dashboard cards
│   ├── InvoiceActionModal.js      # Invoice actions
│   ├── TaxPicker.js               # Tax selection
│   ├── products/
│   │   └── (product components)
│   ├── sales/
│   │   ├── SaleCard.js            # Sale card component
│   │   ├── CartItem.js            # Cart item
│   │   ├── ProductPicker.js       # Product selection
│   │   ├── CustomerPicker.js      # Customer selection
│   │   └── PaymentMethodSelector.js # Payment method
│   ├── purchases/
│   │   ├── PurchaseCard.js        # Purchase card
│   │   ├── PurchaseCartItem.js    # Purchase cart item
│   │   ├── SupplierPicker.js     # Supplier selection
│   │   ├── OCRPreviewModal.js     # OCR preview
│   │   └── ImageSourcePickerModal.js # Image source picker
│   └── customers/
│       └── CustomerCard.js        # Customer card
├── services/
│   ├── productService.js          # Product CRUD operations
│   ├── salesService.js            # Sales operations
│   ├── purchaseService.js         # Purchase operations
│   ├── customerService.js         # Customer operations
│   ├── invoiceService.js          # Invoice generation
│   └── ocrService.js              # OCR processing with Gemini AI
├── database-schema.sql            # Database schema
└── assets/                        # Images, logos, icons

Getting Started

Prerequisites

• Node.js (v18 or later)
• npm or yarn
• Expo CLI (npm install -g expo-cli)

Setup Instructions

1. Clone and install dependencies

   npm install

2. Set up environment variables

   • Get Supabase credentials: Contact Devrat Patel for the project URL and anon key
   • Get Gemini API key: Get your API key from Google AI Studio (required for OCR features)
   • Create a .env file in the root directory:

     EXPO_PUBLIC_SUPABASE_URL=your-project-url
     EXPO_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
     EXPO_PUBLIC_GEMINI_API_KEY=your-gemini-api-key
     

3. Start the development server

   npm start

   Or use:

   npm run ios      # iOS Simulator
   npm run android  # Android Emulator
   npm run web      # Web browser

4. Test the app

   • Register a new account
   • Login with your credentials
   • Explore the Home screen with summary cards
   • Click company logo/name to edit business profile
   • Upload a company logo
   • Add products and manage inventory
   • Create sales and purchases
   • Test OCR feature by uploading a purchase bill image/PDF
   • Generate and share invoices
   • Manage customers
   • Explore dashboard analytics

Environment Variables

Create a .env file in the root directory:

EXPO_PUBLIC_SUPABASE_URL=your-supabase-project-url
EXPO_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
EXPO_PUBLIC_GEMINI_API_KEY=your-gemini-api-key

Required Variables:

• EXPO_PUBLIC_SUPABASE_URL: Your Supabase project URL (required for all features)
• EXPO_PUBLIC_SUPABASE_ANON_KEY: Your Supabase anonymous key (required for all features)
• EXPO_PUBLIC_GEMINI_API_KEY: Google Gemini API key (required for OCR bill processing feature)

Important: Never commit .env to git. It's already in .gitignore.

Documentation

• Database Schema: The complete database schema is defined in database-schema.sql. Contact Devrat Patel if you need access to the Supabase database or schema documentation.
• API Services: All backend operations are handled through service files in the services/ directory:
  • productService.js - Product CRUD and inventory operations
  • salesService.js - Sales creation and management
  • purchaseService.js - Purchase creation and management
  • customerService.js - Customer CRUD operations
  • invoiceService.js - PDF invoice generation and sharing
  • ocrService.js - OCR processing using Gemini AI

Security

• ✅ Row Level Security (RLS) enabled on all tables
• ✅ Users can only access their company's data
• ✅ Secure token storage with AsyncStorage
• ✅ Environment variables for sensitive credentials
• ✅ Secure file uploads to Supabase Storage
• ✅ API keys stored securely in environment variables
• ✅ Company-level data isolation

Key Features in Detail

OCR Bill Processing

The app uses Google Gemini 2.0 Flash AI to automatically extract data from purchase bills:

• Upload bill images (JPG, PNG) or PDF documents
• AI automatically extracts vendor name, line items, quantities, prices, tax, and total
• Preview and edit extracted data before saving
• Automatically matches products or creates new ones
• Supports multiple bill formats and layouts

Invoice Generation

Generate professional PDF invoices with:

• Company branding and logo
• Multiple invoice formats (Standard, Detailed, Minimal)
• Customer and company details
• Itemized billing with taxes
• Print and share functionality
• Customizable invoice settings

Inventory Management

Comprehensive inventory tracking:

• Real-time stock levels
• Low stock alerts
• Stock adjustment history
• Reorder level management
• Automatic updates on sales and purchases
• Multi-warehouse support

Contributing

This is a group project. To contribute:

1. Create a branch for your feature or fix:

   git checkout -b feature/your-feature-name
   # or
   git checkout -b fix/your-fix-name

2. Make your changes and commit them:

   git add .
   git commit -m "Description of your changes"

3. Push your branch to the remote repository:

   git push origin feature/your-feature-name

4. Create a Pull Request (PR) on GitHub:

   • Go to the repository on GitHub
   • Click "New Pull Request"
   • Select your branch
   • Add a description of your changes
   • Request review from team members
   • Wait for approval before merging

Getting Supabase Credentials

To get Supabase credentials for local development, contact Devrat Patel.