A modern financial dashboard application built with React, Redux, and Tailwind CSS. This application provides users with an intuitive interface to track their finances, view transactions, manage credit cards, and more.
The application is deployed and available at: https://financial-dashboard-51023.web.app
- Dashboard Overview: Visual representation of financial data with interactive charts and cards
- Transaction Management: View and categorize financial transactions
- Credit Card Management: Monitor and manage credit cards
- Responsive Design: Fully responsive layout that works on desktop, tablet, and mobile devices
- User Settings: Customizable user profile and application settings
- Interactive Charts: Data visualization using Chart.js
- Optimized Performance: Code-splitting with React.lazy and Suspense for improved loading times
- Dynamic Data Fetching: Redux integration for efficient state management and API communication
- Frontend Framework: React.js
- State Management: Redux with Redux Toolkit
- Routing: React Router
- Styling: Tailwind CSS
- Charts: Chart.js with React-ChartJS-2
- Performance: React.lazy and Suspense for code-splitting
- Icons: Heroicons
- Deployment: Firebase Hosting
-
Clone the repository:
git clone https://github.com/bishtranjan1/sora-dashboard.git cd sora-dashboard -
Install dependencies:
npm install -
Start the development server:
npm start -
Open http://localhost:3000 to view it in your browser.
To build the application for production:
npm run build
To deploy to Firebase (requires Firebase CLI):
firebase deploy
The dashboard is designed to work across multiple device sizes:
- Desktop: Full featured layout with sidebar navigation
- Tablet: Adapted layout with optimized space usage
- Mobile: Streamlined interface with hamburger menu navigation
The application implements several performance optimizations:
- Code Splitting: Components are lazily loaded using React.lazy to reduce initial bundle size
- Suspense Boundaries: React Suspense is used to show appropriate loading states during component loading
- Redux Selectors: Efficient data access through memoized selectors
- Loading States: Consistent loading indicators for improved user experience
- Route-Based Splitting: Primary code-splitting at the route level for optimal performance
The project follows a structured approach to organize code for better maintainability and scalability:
sora-dashboard/
├── public/ # Public assets and index.html
│ ├── api/ # Mock API JSON data files
│ │ ├── cardsdata.json # Credit card data
│ │ ├── transactionsdata.json # Transaction data
│ │ ├── weeklyactivitydata.json # Weekly activity charts
│ │ ├── expensestatisticsdata.json # Expense statistics
│ │ ├── quicktransferdata.json # Quick transfer data
│ │ └── balancehistorydata.json # Balance history data
│ ├── index.html # Main HTML file
│ └── ... # Other public assets
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── dashboard/ # Dashboard-specific components
│ │ │ ├── BalanceHistoryChart.js # Balance history visualization
│ │ │ ├── CardItem.js # Individual card component
│ │ │ ├── CardSkeleton.js # Skeleton loading for cards
│ │ │ ├── ExpenseStatisticsChart.js # Expense statistics chart
│ │ │ ├── MyCards.js # Cards container component
│ │ │ ├── QuickTransfer.js # Quick transfer component
│ │ │ ├── RecentTransactions.js # Recent transactions component
│ │ │ └── WeeklyActivityChart.js # Weekly activity chart
│ │ ├── layout/ # Layout components
│ │ │ ├── DashboardLayout.js # Main dashboard layout
│ │ │ ├── Header.js # App header component
│ │ │ └── Sidebar.js # Navigation sidebar
│ │ └── ui/ # Generic UI components
│ │ ├── Button.js # Reusable button component
│ │ ├── Card.js # Card container component
│ │ ├── Spinner.js # Loading spinner component
│ │ └── ... # Other UI components
│ ├── pages/ # Page components for different routes
│ │ ├── Dashboard.js # Main dashboard page with lazy loading
│ │ ├── Settings.js # User settings page
│ │ ├── Transactions.js # Transactions page
│ │ └── ... # Other pages
│ ├── services/ # API and service functions
│ │ └── api.js # API service functions
│ ├── store/ # Redux store configuration
│ │ ├── index.js # Store configuration
│ │ └── slices/ # Redux slices
│ │ ├── dashboardSlice.js # Dashboard data management
│ │ ├── userSlice.js # User data management
│ │ └── settingsSlice.js # Settings management
│ ├── utils/ # Utility functions
│ ├── App.js # Main App component
│ ├── index.js # Application entry point
│ └── index.css # Global styles
├── package.json # Dependencies and scripts
└── README.md # Project documentation
The application follows a unidirectional data flow pattern:
- User Interaction: User interacts with a component (e.g., clicking on a tab)
- Action Dispatch: Component dispatches an action to Redux
- State Update: Redux reducers update the state
- Re-render: Components connected to that state re-render
The application uses React's performance features effectively:
-
Code Splitting Strategy:
- Primary splitting at route level (Dashboard, Settings, etc.)
- Secondary splitting for heavy components within each route
-
Loading State Management:
- Spinner component used consistently across the application
- Redux loading states for data-driven components
- React Suspense for component-level loading
-
Data Fetching Strategy:
- Centralized data fetching in Dashboard component
- Individual components dispatch their own fetch actions when needed
- Loading indicators tied to Redux loading states
The application uses a modular approach for API integration:
- API Services: The
services/api.jsfile contains functions for fetching data from different endpoints - Redux Thunks: Async thunks in Redux slices handle API calls and manage loading/error states
- Component Integration: Components dispatch thunks and select data from Redux store
Example of data flow for loading cards:
MyCards component mounts →
Dashboard dispatches fetchAllDashboardData →
Redux thunk calls fetchCardsData from API service →
API service fetches from '/api/cardsdata.json' →
Redux updates state with cards data and loading status →
MyCards component re-renders with new data
Components follow a hierarchy for better organization:
- Layout Components: Define the overall structure (Sidebar, Header)
- Page Components: Represent different routes and organize dashboard widgets
- Feature Components: Dashboard-specific components (MyCards, RecentTransactions)
- UI Components: Generic, reusable UI elements (Button, Card, Spinner)
The application uses Redux Toolkit for state management with these key slices:
- Dashboard Slice: Manages all dashboard-related data (cards, transactions, charts)
- User Slice: Handles user information and authentication state
- Settings Slice: Manages user preferences and application settings
Each slice implements:
- Redux reducers for updating state
- Async thunks for API calls
- Selectors for accessing state in components
The application uses Tailwind CSS for styling:
- Component-specific styles are applied using Tailwind classes
- Layout uses a responsive grid system
- Custom styles can be added through the
src/index.cssfile
- Fork the repository
- Create your feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add some amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License.