Skip to content

Bryan-Mamuyac/LUCA_System

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

9 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Luca System Banner

βš–οΈ Luca System

Double Entry Book Keeping β€” Real-time Balance Sheet

Live Demo Built with HTML CSS3 JavaScript Vercel Upstash


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.


πŸ“‹ Table of Contents


✨ Features

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

πŸ“Έ Screenshots

πŸ”‘ Login Page

Login Page

Secure login with username and password. Includes password visibility toggle and error feedback. Auto-redirects to the ledger if already logged in.


πŸ“ Register Page

Register Page

Full registration form with first name, last name, username, email, phone, and password. Includes password strength meter, confirm password, and terms agreement.


🏠 Main Dashboard (Light Mode)

User Dashboard Light Mode

The main ledger interface showing the transaction entry form, general ledger table, and accounting equation summary β€” all in real time.


πŸŒ™ Main Dashboard (Dark Mode)

User Dashboard Dark Mode

Full dark mode support. Toggle via the moon/sun icon in the navbar. Theme preference is saved across sessions.


πŸ“Š General Ledger & Accounting Equation Summary

General Ledger and Summary

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.


🧾 Select Account β€” Debit & Credit Entry

Select Account Debit Credit

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.


πŸ’Ύ Balance Sheet Drafts (Empty)

Balance Sheet Drafts Empty

The Drafts modal lets you save unfinished transaction entries by name. Includes a live search bar to filter drafts.


πŸ’Ύ Balance Sheet Drafts (With Data)

Balance Sheet Drafts with Data

Saved drafts show the entry count, date, and timestamp. Load any draft back into the form with one click, or delete it individually.


πŸ”– Saved Records (Empty)

Saved Records Empty

The Records modal saves a full snapshot of your posted ledger β€” all transactions, totals, and balance status β€” for future reference or restoration.


πŸ”– Saved Records (With Data)

Saved Records with Data

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.


πŸ› οΈ Tech Stack

Frontend

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

Backend & Infrastructure

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

🧾 Accounting Logic

Luca System follows Luca Pacioli's double-entry bookkeeping rules (1494):

Assets = Liabilities + Equity
Equity = Owner's Capital + Revenue βˆ’ Expense

Normal Balance Rules

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

Common Transaction Examples

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

πŸš€ Getting Started

Prerequisites

Local Development

# 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 dev

Then open http://localhost:3000 in your browser.


πŸ“ Project Structure

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

🌐 Deployment

This project is deployed on Vercel with Upstash Redis as the database.

Quick Deploy Steps

  1. Fork this repository
  2. Import to Vercel
  3. Create an Upstash for Redis database in Vercel Storage
  4. Add environment variable: JWT_SECRET = any long random string
  5. Redeploy β€” done!

πŸ“– See DEPLOY.md for the complete step-by-step beginner guide.

Environment Variables

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

πŸ‘¨β€πŸ’» Author

Bryan Mamuyac

GitHub LinkedIn

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.

About

Luca System is a modern web-based double-entry bookkeeping application that helps users record, manage, and analyze financial transactions in real time. It features an interactive ledger, automatic balance checking, draft saving, and CSV import/export for efficient and accurate accounting.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors