🎥 Authentication Flow Demo

The following demo illustrates the complete user authentication process, including account creation and secure login using JWT-based authentication.

Flow:

• Home Page
• Register New Account
• Login with Credentials
• Redirect to Dashboard upon successful authentication

🎥 Account Management Demo

This demo demonstrates account management features:

• Profile update
• Change password
• Secure confirmation modals
• Account deletion flow

🎥 Income Management Demo

This demo demonstrates income management features:

• Add new income entries
• Edit existing records
• Delete records with confirmation
• Real-time table updates
• Category-based income tracking

🎥 Expense Management Demo

This demo showcases expense management features:

• Add new expense entries
• Edit existing records
• Delete expenses with confirmation
• Category & payment method tracking
• Dynamic updates in the expense table

🎥 Analysis & Savings Demo

This demo showcases the analysis features of SpendSmart, highlighting your savings and trends:

• View monthly and yearly savings
• Track income vs. expense trends
• Interactive charts showing financial patterns

Key Features & Technologies

1. User Authentication & Security

• JWT Authentication: Secure user login and session management using JSON Web Tokens.
• Account Management: Users can register, update profile, change password, and delete account.
• Input Validation & Form Validation: All forms (registration, login, password change, income/expense forms) include robust client-side validation to prevent invalid or empty inputs.
• Email & Password Checks: Email format validation, password confirmation checks, and required field enforcement.
• Confirmation Modals: For logout, account deletion, and sensitive actions.

2. Dashboard & Analytics

• Income & Expense Summary Cards: Quick overview of total incomes, expenses, balance, and savings.
• Interactive Charts: Track financial trends over time with dynamic graphs.
• Monthly/Yearly View: Filter data by specific year using a responsive dropdown.

3. Income Management

• Add/Edit/Delete Income Entries: Real-time management with modal forms.
• Table View: Organized, scrollable, and color-coded income lists.
• Income Highlighting: Green cards and text for clear visual identification.
• Form Validation: Prevents invalid amounts, empty fields, and incorrect data types.

4. Expense Management

• Add/Edit/Delete Expenses: Manage your spending with modals and intuitive forms.
• Table View & Action Buttons: Red/pink cards and text for expenses, with edit/delete options.
• Form Validation: Ensures all fields are correctly filled and prevents invalid entries.

5. Notifications & Modals

• Toast Notifications: Feedback for updates, errors, and deletions.
• Smooth Animations: Fade-in/out and hover effects for better UX.
• Responsive Modals: Works for password change, income/expense management, logout confirmation, and account deletion.

6. Responsive & Modern UI

• Sidebar Navigation: Collapsible and interactive menu.
• Consistent UI Components: Buttons, cards, forms, and avatars styled for modern look.
• Fonts & Icons: Poppins font + Font Awesome 6 icons.

7. Frontend Technologies

• HTML5, CSS3, JavaScript (Vanilla)
• Responsive Flexbox and CSS Grid layouts
• Custom color palette with pastel accents and soft shadows

8. Optional Backend Integration

• Designed to easily connect to RESTful APIs.
• JWT authentication can be integrated with Node.js, Express, or any backend.