FinFlow

The app will help users track loan disbursements, payments to builders, and interest accruals. Additionally, it will remind users weekly or monthly to update their financial records. The app can also visualize trends, outstanding balances, and interest growth while offering insights to optimize payments.

Link :

• Vercel

Authors

• Yash Raghuvanshi

Features

• Data Management: "Allows users to input and manage loan disbursement, payment, and interest accrual data through an intuitive interface."
• Reminders: "Sends weekly or monthly notifications to users, prompting them to update their financial records, ensuring data accuracy."
• Visualization: "Generates interactive charts and graphs to visualize trends in loan balances, payment history, and interest growth."
• Insights and Reports: "Provides detailed reports and analytical insights, enabling users to optimize payment strategies and financial planning."

Technologies Used

Setup

1. Clone the repository:

   git clone https://github.com/Yashraghuvans/FinFlow.git
   cd FinFlow

2. Install dependencies:

   Using npm:

   npm install

   Using pnpm:

   pnpm install

Run Locally

1. Start the development server:

   Using npm:

   npm run dev

   Using pnpm:

   pnpm dev

2. Open your browser:

   Navigate to http://localhost:3000 to view the application.

Visual Studio Code

You would need to have the latest version of VS Code and VS Code Chrome Debugger Extension installed.

Then add the block below to your launch.json file and put it inside the .vscode folder in your app’s root directory.

{
  "version": "0.2.0",
  "configurations": [{
    "name": "Chrome",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceRoot}/src",
    "sourceMapPathOverrides": {
      "webpack:///src/*": "${webRoot}/*"
    }
  }]
}

Note: the URL may be different if you've made adjustments via the HOST or PORT environment variables.

Start your app by running npm start, and start debugging in VS Code by pressing F5 or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor.

Having problems with VS Code Debugging? Please see their troubleshooting guide.

Supported Browsers

By default, the generated project usee the latest version of React.

You can refer to the React documentation for more information about supported browsers.

Install TailwindCSS (v4.0)

1. Go to https://tailwindcss.com/
2. Get started
3. Under framework guides, select Next.js
4. Follow the steps mentioned there to start using TailwindCSS

Recommendations

1. You may use the extension Draw.io Integration on VScode to view the .drawio file.
2. Prettier formatter recommended for code formatting.
3. Use Tailwind CSS IntelliSense extension for Tailwind suggestions while coding.
4. The project is using the latest versions of all the libraries mentioned above.
5. Create and/or assign an issue to yourself before working on any feature.

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/your-feature).
3. Make your changes.
4. Commit your changes (git commit -am 'Add some feature').
5. Push to the branch (git push origin feature/your-feature).
6. Open a pull request.

License

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