LuxSpend 💎

Advanced TypeScript & SCSS Expense Tracker

---

🚀 Project Overview

LuxSpend is a modern, interactive expense tracker built with TypeScript, SCSS, and HTML.

It’s designed to provide a sleek and professional UI with glassmorphism cards, animated hover effects, and dark mode styling. The project emphasizes TypeScript for all business logic, while SCSS handles all design, animations, and transitions.

💡 Features

.TypeScript-driven logic for managing expenses

.Add and remove expenses dynamically with animations

.Real-time calculations for Income, Expenses, and Balance

.Dark mode design with glass cards and hover effects

.Responsive layout for mobile and desktop

.Animated Logo & Form hover effects for a modern UX

---

📂 Project Structure

LuxSpend/
├─ index.html               # Main HTML page
├─ src/
│  ├─ assets/
│  │     └─ sreenshot.png
│  ├─ styles/
│  │  ├─ main.scss          # Main SCSS file
│  │  ├─ utils/
│  │  │  ├─ _variables.scss
│  │  │  └─ _mixins.scss
│  │  └─ components/
│  │     ├─ _cards.scss
│  │     ├─ _buttons.scss
│  │     └─ _form.scss
│  └─ ts/
│     └─ app.ts             # TypeScript logic
├─ dist/                    # Compiled CSS & JS
│  ├─ main.css
│  └─ app.js
├─ package.json
└─ README.md

---

⚡ Getting Started

1. Clone the repository

git clone https://github.com/yourusername/luxspend.git

cd luxspend

2. Install dependencies

npm install

3. Build the project

npm run build

4. Development (watch mode)

npm run watch:ts
npm run watch:sass

5. Open in browser

• Open index.html in your browser and start tracking your expenses.

🛠 Tech Stack

• TypeScript: Core logic, dynamic calculations, and DOM manipulations

• SCSS: Design, hover effects, dark mode, glass cards, animations

• HTML5: Structure and semantic layout

✨ Future Improvements

.Add charts to visualize income/expenses

.Save expenses locally using LocalStorage or IndexedDB

.Add category filters and tags

.Add user authentication and cloud sync

💌 Author

🌟 Made with ❤️ by danialsource