Named after Luca Pacioli β the father of double-entry bookkeeping (1494). A modern web app that enforces proper accounting rules, real-time balance checking, and secure user authentication.
- β¨ Features
- πΈ Screenshots
- π οΈ Tech Stack
- π§Ύ Accounting Logic
- π Getting Started
- π Project Structure
- π Deployment
- π¨βπ» Author
| Feature | Description |
|---|---|
| π User Authentication | Register & login with JWT tokens, passwords hashed with bcrypt |
| π Double-Entry Ledger | Every transaction follows Luca Pacioli's accounting rules |
| βοΈ Real-time Balance Check | Instantly shows if Assets = Liabilities + Equity |
| πΎ Draft System | Save unfinished entries as named drafts, search & load them |
| π Records System | Snapshot your full ledger state for reference or restoration |
| π€ Import / Export CSV | Full ledger export and re-import via CSV files |
| π Dark Mode | Toggle between light and dark theme, preference is remembered |
| π± Responsive Design | Works on desktop, tablet, and mobile |
| βοΈ Cloud Storage | Accounts stored on Upstash Redis via Vercel serverless API |
| π¨ Animated UI | Canvas particle background and smooth transitions |
Secure login with username and password. Includes password visibility toggle and error feedback. Auto-redirects to the ledger if already logged in.
Full registration form with first name, last name, username, email, phone, and password. Includes password strength meter, confirm password, and terms agreement.
The main ledger interface showing the transaction entry form, general ledger table, and accounting equation summary β all in real time.
Full dark mode support. Toggle via the moon/sun icon in the navbar. Theme preference is saved across sessions.
The General Ledger table categorizes each transaction across Assets, Liabilities, Equity, and Profit & Loss columns. The Accounting Equation Summary below shows live totals and balance status.
Entry pairs enforce double-entry rules. Each pair has a Debit and Credit row. Account options are grouped by type: Assets, Liabilities, Owner's Equity, and Profit & Loss.
The Drafts modal lets you save unfinished transaction entries by name. Includes a live search bar to filter drafts.
Saved drafts show the entry count, date, and timestamp. Load any draft back into the form with one click, or delete it individually.
The Records modal saves a full snapshot of your posted ledger β all transactions, totals, and balance status β for future reference or restoration.
Each saved record shows a 3-column snapshot of Assets, Liabilities, and Equity, along with a Balanced/Not Balanced badge. Load the record to fully restore that ledger state.
| Technology | Purpose |
|---|---|
| HTML5 | Page structure and semantics |
| CSS3 | Custom design system with CSS variables |
| Vanilla JavaScript | All interactivity, accounting logic, DOM updates |
| IBM Plex Mono | Monospace font for financial figures |
| Sora | Display font for headings and UI |
| Font Awesome 6 | Icons throughout the interface |
| Canvas API | Animated particle background |
| Technology | Purpose |
|---|---|
| Vercel | Hosting + Serverless Functions |
| Vercel KV (Upstash Redis) | User account storage |
| bcryptjs | Password hashing (12 salt rounds) |
| jose | JWT signing and verification |
| Node.js | Serverless function runtime |
Luca System follows Luca Pacioli's double-entry bookkeeping rules (1494):
Assets = Liabilities + Equity
Equity = Owner's Capital + Revenue β Expense
| Account Type | Normal Balance | Debit Effect | Credit Effect |
|---|---|---|---|
| Assets | Debit | β Increase | β Decrease |
| Liabilities | Credit | β Decrease | β Increase |
| Owner's Capital | Credit | β Decrease | β Increase |
| Revenue | Credit | β Decrease | β Increase |
| Expense | Debit | β Increase | β Decrease |
| Transaction | Debit | Credit |
|---|---|---|
| Owner invests cash | Cash | Owner's Capital |
| Borrowed money | Cash | Accounts Payable |
| Earned revenue (cash) | Cash | Revenue |
| Paid an expense | Expense | Cash |
| Sold goods on credit | Accounts Receivable | Revenue |
| Bought inventory on credit | Inventory | Accounts Payable |
- Node.js (LTS version)
- Git
- Vercel CLI β
npm install -g vercel - A free Vercel account
- A free Upstash account
# 1. Clone the repository
git clone https://github.com/YOUR_USERNAME/luca-system.git
cd luca-system
# 2. Install dependencies
npm install
# 3. Set up environment variables
# Create a .env.local file:
KV_REST_API_URL=your_upstash_redis_url
KV_REST_API_TOKEN=your_upstash_redis_token
JWT_SECRET=your_secret_key_here
# 4. Run locally with Vercel dev server
vercel devThen open http://localhost:3000 in your browser.
luca-system/
β
βββ api/ # Vercel Serverless Functions
β βββ register.js # POST /api/register β create account
β βββ login.js # POST /api/login β authenticate user
β βββ verify.js # GET /api/verify β validate JWT token
β
βββ docs/
β βββ screenshots/ # App screenshots for documentation
β
βββ index.html # Main ledger dashboard (auth-gated)
βββ login.html # Login page
βββ register.html # Registration page
β
βββ styles.css # Main app styles + dark mode
βββ auth.css # Login/register page styles
βββ script.js # Ledger logic, accounting engine
βββ canvas.js # Animated canvas backgrounds
β
βββ package.json # Node dependencies
βββ vercel.json # Vercel routing configuration
βββ README.md # This file
This project is deployed on Vercel with Upstash Redis as the database.
- Fork this repository
- Import to Vercel
- Create an Upstash for Redis database in Vercel Storage
- Add environment variable:
JWT_SECRET= any long random string - Redeploy β done!
π See DEPLOY.md for the complete step-by-step beginner guide.
| Variable | Description |
|---|---|
KV_REST_API_URL |
Auto-set by Vercel when you connect Upstash |
KV_REST_API_TOKEN |
Auto-set by Vercel when you connect Upstash |
JWT_SECRET |
Your own secret string for signing tokens |
Bryan Mamuyac
BS Information Technology Graduate β DMMMSU-MLUC Internship: Universal Leaf Philippines, Inc. (Full-Stack Developer)
Luca System Β© 2025 β Named after Luca Pacioli, the father of double-entry bookkeeping.
Built with vanilla HTML, CSS, and JavaScript. No frameworks. No shortcuts.








