In today's fast-paced business environment, the quest for efficiency and streamlined operations is never-ending. Organizations, particularly small ones, often grapple with the complexities of expense management. The Expense Management Progressive Web Application (PWA) is a sophisticated and versatile solution designed to streamline organizational expense tracking and management. Built on a robust tech stack including React, Express, Chakra UI, Node.js, Chart.js, and integrated with Firebase for storage and Firestore database, this application embodies a mobile-first approach and is completely mobile-responsive.

Key Features

Organizational Hierarchy

The application facilitates hierarchical organization management, allowing top-level administrators to add or remove organizations, along with the ability to manage users within each organization.

User Roles and Permissions

Three distinct user roles – Manager, Accountant, and Working Employee – define the organizational structure. Role-based access control ensures that each user has specific permissions tailored to their responsibilities.

Expense Submission and Approval Workflow

Working Employees can seamlessly submit expenses, specifying details such as amount, currency, remarks, and attaching receipts in PDF or image format. Managers oversee the approval process, assigning settlements to other managers or accountants.

Batch Processing and Real-time Updates

Leveraging Firebase Firestore, the application efficiently fetches expenses in batches of 10, categorizing them based on their state (pending, rejected, approved, settled). Real-time updates ensure seamless collaboration and data consistency.

Receipt Lifecycle Management

Users have the flexibility to remove already uploaded receipts, enhancing the overall user experience. The application seamlessly integrates with Firebase Storage to manage the lifecycle of receipts, maintaining data integrity.

Data Visualization and Export

Utilizing Chart.js, the app provides insightful data visualization in the form of pie charts, offering users a quick overview of their expenses. Moreover, users can export expense data in Excel format, enhancing accessibility and reporting capabilities.

Mobile-First Approach

With a complete mobile-first approach, the PWA ensures a responsive and intuitive user interface, delivering a seamless experience across various devices. The design prioritizes accessibility and user engagement on mobile platforms.

Challenges & the Solutions

Schema Design

In developing an expense management app, we faced challenges with schema design aimed at reducing redundancy and improving search efficiency for user expenses. To solve this, we embedded a subdocument for expenses within each user document, simplifying searches to O(n). However, to prevent data corruption from concurrent updates, we utilized Firebase transactions. These transactions ensured atomic and isolated updates to user and expense documents, preserving data integrity and enabling smooth concurrency control. This solution highlights the balance between search optimization and data reliability in software development.

Data type for schema validation

To maintain data integrity in Firebase, a NoSQL database lacking native schema type checking, we employed Zod, a TypeScript-first schema library, on both frontend and backend. Backend implementation of Zod enabled data type definition and enforcement, ensuring data consistency before interaction with Firebase. Similarly, frontend utilization of Zod ensured incoming data matched expected structures, enhancing user experience and codebase maintainability. This approach effectively addressed data type consistency challenges in NoSQL environments, leveraging TypeScript and Zod to ensure data across the application conformed to predefined types, boosting system reliability.

Layouts for Consistency

Implementing two types of layouts, namely 'public' and 'protected,' not only enforces consistency in the structure and appearance of pages but also helps maintain a clear separation between content that is accessible to all users and content that requires authentication. Common components like navigation bars, bottom bars, and main containers can be encapsulated within these layouts, promoting a DRY (Don't Repeat Yourself) approach.

Reusable Custom Components

The creation of reusable custom components, such as buttons and containers, is a crucial step towards code cleanliness and maintainability. These components serve as building blocks for different parts of the application, ensuring a consistent look and behavior. By encapsulating functionality within custom components, you not only enhance code readability but also make it easier to update and maintain the application as a whole.

Component Naming Conventions

Establishing clear and consistent naming conventions for your components contributes significantly to code readability. Choose names that accurately reflect the purpose and functionality of each component, making it easier for other developers (or yourself) to understand their role within the application.

The Expense Management PWA is specifically engineered to address the intricate needs of small organizations. By using modern technology with thoughtful design and user-centric features, it seamlessly eases the expense management.