A comprehensive bill tracking and management application for modern households and properties.
Fiskalio is a full-stack web application that helps you organize, track, and manage bills across multiple properties or profiles. Whether you're managing utilities for different apartments, tracking household expenses, or organizing business bills, Fiskalio provides an intuitive interface with powerful analytics and calendar views.
- Create and manage multiple profiles (properties, households, etc.)
- Customize each profile with colors and address information
- Track bill statistics and payment performance per profile
- Add bills to specific profiles with optional e-bill information
- Create monthly bill instances with amounts, due dates, and descriptions
- Mark bills as paid/unpaid with automatic overdue detection
- Support for e-bill credentials (username, password, links)
- Visual monthly calendar showing all bill instances
- Color-coded bills by profile with payment status indicators
- Filter by profile or payment status (all/paid/unpaid)
- Quick edit functionality directly from calendar view
- Overdue bill highlighting
- Profile Dashboard: Payment performance, monthly trends, top bills by amount
- Bill Dashboard: Instance statistics, financial summaries, current month highlights
- Real-time statistics with paid/unpaid/overdue counts
- Monthly comparison and change tracking
- Beautiful, responsive design with dark/light mode support
- Gradient text headers and smooth animations
- Card-based layouts with hover effects
- Intuitive navigation and breadcrumbs
- Next.js 15 - React framework with App Router
- React 19 - UI library with latest features
- TypeScript - Type-safe development
- Tailwind CSS 4 - Utility-first styling
- Shadcn - UI component library
- Lucide React - Beautiful icon library
-
Convex - Real-time backend platform
-
Real-time queries and mutations
-
Automatic type generation
-
Built-in authentication integration
-
Clerk - Complete authentication solution
-
User management and session handling
-
Secure JWT token validation
- ESLint - Code linting
- Prettier - Code formatting
- TypeScript - Static type checking
├── app/ # Next.js App Router
│ ├── _components/ # Shared app components
│ ├── bill/[id]/ # Individual bill pages
│ │ └── _components/ # Bill-specific components
│ ├── calendar/ # Calendar view
│ │ └── _components/ # Calendar components
│ ├── profile/[id]/ # Profile pages
│ │ └── _components/ # Profile-specific components
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/ # Reusable UI components
│ ├── ui/ # Shadcn/ui components
│ ├── ConvexClientProvider.tsx # Convex provider
│ ├── Navbar.tsx # Navigation component
│ └── ThemeProvider.tsx # Theme provider
├── convex/ # Backend logic
│ ├── _generated/ # Auto-generated types
│ ├── auth.config.ts # Authentication config
│ ├── billInstances.ts # Bill instance queries/mutations
│ ├── bills.ts # Bill queries/mutations
│ ├── profiles.ts # Profile queries/mutations
│ ├── schema.ts # Database schema
│ └── crons.ts # Scheduled functions
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── schemas/ # Validation schemas
└── package.json # Dependencies and scripts
-
Clone the repository
git clone https://github.com/yourusername/fiskalio.git cd fiskalio -
Install dependencies
npm install
-
Set up Convex
npx convex dev
Follow the prompts to create a new Convex project.
-
Set up Clerk Authentication
- Create a new Clerk application
- Copy your Clerk Publishable Key and Secret Key
- Follow the Convex Clerk integration guide
- Uncomment the Clerk provider in
convex/auth.config.ts - Add
CLERK_JWT_ISSUER_DOMAINto your Convex environment variables
-
Start the development server
npm run dev
The app will be available at http://localhost:3000.
- Sign up/login using Clerk authentication
- Create a new profile (e.g., "Main Apartment", "Summer House")
- Add address and choose a color for easy identification
- Navigate to a profile
- Add bills with names and optional e-bill information
- Create monthly instances with amounts and due dates
- Use the calendar view to see all bills at a glance
- Filter by profile or payment status
- Click on bills to quickly edit or mark as paid
- View profile dashboards for payment performance insights
- Track monthly trends and spending patterns
- Monitor overdue bills and payment rates
Bills in Fiskalio work through a pattern of templates and instances:
- A Bill is the template (e.g., "Electricity Bill")
- A Bill Instance is the monthly occurrence with specific amount and due date
- This allows tracking the same bill type across multiple months
Store credentials for online bill portals:
- Website links for quick access
- Username/password storage (encrypted)
- Quick access to pay bills online
- Color-coded by profile for easy identification
- Visual status indicators (paid/unpaid/overdue)
- Monthly navigation with quick edit capabilities
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
This project is licensed under the MIT License - see the LICENSE file for details.
- Live Demo: https://fiskalio.vercel.app
- Portfolio: https://www.marinactonci.com/
- LinkedIn: https://www.linkedin.com/in/marinactonci/