AI-Powered Personal Finance Assistant

A modern, responsive financial dashboard built with React and Tailwind CSS, featuring dark mode support and real-time data visualization.

🌟 Features

• 🔐 Secure authentication system with login/signup flows
• 🌓 Dark mode support with system preference detection
• 📊 Interactive charts using Recharts
• 💳 Credit card management interface
• 📱 Fully responsive designs
• 📈 Financial analytics and reporting
• 🎨 Modern UI with Tailwind CSS
• 🔍 Search functionality
• 📱 Mobile-friendly layout

🚀 Tech Stack

• React
• Tailwind CSS
• Recharts for data visualization
• Lucide React for icons
• React Hooks for state management

📋 Prerequisites

Before you begin, ensure you have installed:

• Node.js (v14.0.0 or higher)
• npm (v6.0.0 or higher)

🛠️ Installation

1. Clone the repository

git clone https://github.com/yourusername/mymoney-dashboard.git

2. Navigate to the project directory

cd mymoney-dashboard

3. Install dependencies

npm install

4. Start the development server

npm run dev

The application will be available at http://localhost:3000

🏗️ Project Structure

src/
├── components/         # Reusable components
│   ├── Dashboard/     # Dashboard-specific components
│   ├── Auth/          # Authentication components
│   └── UI/            # Common UI components
├── hooks/             # Custom React hooks
├── styles/            # CSS and Tailwind configurations
└── utils/             # Utility functions

🔧 Configuration

Environment Variables

Create a .env file in the root directory:

REACT_APP_API_URL=your_api_url

Tailwind Configuration

The project uses a custom Tailwind configuration. Modify tailwind.config.js to update theme settings.

🧪 Running Tests

npm test

📚 Documentation

Component Usage

Dashboard Component

import { Dashboard } from './components/Dashboard';

// Basic usage
<Dashboard />

// With custom theme
<Dashboard isDarkMode={true} />

Authentication Forms

import { LoginForm, SignupForm } from './components/Auth';

// Login form
<LoginForm onLogin={handleLogin} />

// Signup form
<SignupForm onSignup={handleSignup} />

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Coding Standards

• Use functional components with hooks
• Follow the existing file structure
• Include proper TypeScript types (if converting to TypeScript)
• Add comments for complex logic
• Ensure responsive design
• Test across different browsers

📜 License

This project is licensed under the MIT License - see the LICENSE.md file for details

🙏 Acknowledgments

• Recharts for the charting library
• Lucide React for the icon set
• Tailwind CSS for the utility-first CSS framework

🐛 Known Issues

• Chart responsiveness on very small screens
• Dark mode flash on initial load
• Performance optimization needed for large datasets

🔮 Future Improvements

• Add TypeScript support
• Implement real-time data updates
• Add more chart types
• Improve accessibility
• Add end-to-end tests
• Implement proper error boundaries
• Add proper form validation
• Implement proper state management (Redux/Context)
• Add proper API integration
• Implement proper routing

📞 Support

For support, email dewanshshekharsingh@gmail.com or open an issue in the repository.

🔄 Version History

• 0.1.0
  • Initial Release
  • Basic dashboard functionality
  • Authentication system
  • Dark mode support