Finance Dashboard

System Requirements

• Operating System: Windows, macOS, or Linux
• Modern Web Browser:
• Google Chrome (recommended)
• Mozilla Firefox
• Microsoft Edge
• Safari
• Code Editor (optional):
• Visual Studio Code
• Sublime Text
• Notepad++

Launching the Application

1. Open the project in a web browser by:

• Opening the index.html file directly, or
• Running the project using Live Server in Visual Studio Code.

1. Wait for the dashboard to load completely.

Navigating the Dashboard

After the application loads, users can access the following sections:

Dashboard Overview

• View the current financial summary.
• Check the total balance, monthly spending, savings, and upcoming bills through animated statistic cards.

Cash Flow Chart

• Analyze income and expense trends using the interactive SVG line chart.
• Identify financial patterns over time.

Spending by Category

• Review how expenses are distributed across different categories using the donut chart.
• Understand which categories contribute the most to overall spending.

Recent Transactions

• Browse the latest financial transactions.
• View transaction details such as date, description, category, and amount.

Savings Goals

• Monitor progress toward savings targets using visual progress bars.
• Track completion percentages for each goal.

Responsive Experience

The dashboard automatically adjusts to different screen sizes:

• Desktop: Displays the full sidebar navigation and multi-column layout.
• Tablet: Reorganizes content into fewer columns for better readability.
• Mobile: Replaces the sidebar with a bottom navigation bar and stacks content vertically for easier interaction.

User Interaction

Users can:

• Navigate between dashboard sections.
• View animated statistics and charts.
• Examine transaction records.
• Monitor savings progress.
• Resize the browser window to experience the responsive layout.
• Use keyboard navigation with visible focus indicators for improved accessibility.

Accessibility Features

The application includes:

• Keyboard-accessible navigation.
• Visible focus states for interactive elements.
• Responsive layouts for various devices.
• Reduced-motion support for users who prefer minimal animations.
• High-contrast color combinations for improved readability.

Browser Compatibility

Northwind works with modern web browsers, including:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari

Notes

• This is a frontend-only application.
• No login or user authentication is required.
• No internet connection is needed after the project files have been downloaded.
• All data displayed on the dashboard is static and intended for demonstration purposes unless connected to a backend service in future enhancements.

ComponentRecommended RequirementProcessorIntel Core i5 / AMD Ryzen 5 or higherRAM4 GB or moreStorage500 MB free disk spaceDisplay Resolution1920 × 1080 pixels (Full HD)Internet ConnectionRequired only for downloading fonts or project updates