Selected Projects
Universal Billing Platform
A comprehensive, client-side Universal Billing Platform for managing invoices, tracking customer payments, and calculating totals. It leverages Local Storage for persistent, zero-server data handling, ensuring rapid processing and complete data privacy for all billing records.
Core Logic Snippet (Client-Side Persistence)
// Calculate total bill and save record securely client-side const calculateAndSaveInvoice = (items) => { const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0); const invoiceRecord = { id: Date.now(), total, items }; // Save to client-side persistence (Local Storage model) let records = JSON.parse(localStorage.getItem('billing_records') || '[]'); records.push(invoiceRecord); localStorage.setItem('billing_records', JSON.stringify(records)); return total; };
Privacy-First Personal Finance Dashboard
A fully responsive, Zero-Server web application using pure HTML, Tailwind, and Vanilla JavaScript. All financial data is stored exclusively in Client-Side Local Storage, ensuring 100% data confidentiality and zero server maintenance cost. Features robust client-side state management, including complex debt settlement logic.
Core Logic Snippet (Client-Side Storage)
// Function to securely load financial data from Local Storage (Privacy-First) const loadFinancialData = () => { const data = localStorage.getItem('finance_dashboard_data'); if (data) { return JSON.parse(data); } return { transactions: [], debts: [] }; }; // Data never leaves the browser, eliminating server breach risk.
Zero-Server Todo Manager
A complete full-stack-like application built entirely on the client-side using IndexedDB for persistent storage. Demonstrates Zero-Server Architecture principles.
Core Logic Snippet (Data Handling)
// Function to save a new task to IndexedDB (Client-Side Storage) const saveTask = (taskData) => { const db = getDB(); // Initialize IndexedDB connection const transaction = db.transaction(['tasks'], 'readwrite'); const store = transaction.objectStore('tasks'); const request = store.add(taskData); request.onsuccess = () => { console.log("Task saved."); }; };
Modern Responsive Dashboard UI
Focus on complex, responsive layout design using pure Tailwind CSS for multiple breakpoints (mobile, tablet, desktop).
Core Snippet (Tailwind Grid/Flex)
<!-- Responsive Layout using Tailwind CSS --> <div class="grid grid-cols-1 gap-6 lg:grid-cols-3"> <div class="lg:col-span-2 p-4 bg-white rounded-lg shadow"> <h2 class="text-xl font-bold">Dashboard Analytics</h2> </div> <div class="lg:col-span-1 p-4 bg-gray-100 rounded-lg"> <h3 class="text-lg font-semibold">Quick Links</h3> </div> </div>