{"id":21488868,"url":"https://github.com/batanoffs/mini-finance","last_synced_at":"2026-04-13T23:02:51.286Z","repository":{"id":216585606,"uuid":"737269476","full_name":"batanoffs/mini-finance","owner":"batanoffs","description":"Softuniada 2024 Programming Olympiad project submission. Finance web application with basic functionality to add friends, pay them and request money. Tracking history is also implemented.","archived":false,"fork":false,"pushed_at":"2024-10-25T08:06:36.000Z","size":74297,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-25T09:53:02.341Z","etag":null,"topics":["ant-design","css-modules","finance-application","react","react-context","react-router-dom","transactions","vite"],"latest_commit_sha":null,"homepage":"https://mini-finance.onrender.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/batanoffs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-30T12:20:17.000Z","updated_at":"2024-10-25T08:38:38.000Z","dependencies_parsed_at":"2024-11-02T14:34:25.446Z","dependency_job_id":null,"html_url":"https://github.com/batanoffs/mini-finance","commit_stats":null,"previous_names":["batanoffs/mini-finance-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/batanoffs%2Fmini-finance","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/batanoffs%2Fmini-finance/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/batanoffs%2Fmini-finance/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/batanoffs%2Fmini-finance/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/batanoffs","download_url":"https://codeload.github.com/batanoffs/mini-finance/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244020093,"owners_count":20384876,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","css-modules","finance-application","react","react-context","react-router-dom","transactions","vite"],"created_at":"2024-11-23T14:12:27.475Z","updated_at":"2026-04-13T23:02:51.235Z","avatar_url":"https://github.com/batanoffs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mini Finance Innovations\n\n[![License: MIT](https://img.shields.io/badge/Softuniada2024-TOP10-blu)](https://softuniada.softuni.bg/) \n[![License: MIT](https://img.shields.io/badge/Licence-MIT-teal)](https://opensource.org/licenses/MIT) \n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-purple)](https://github.com/prettier/prettier)\n[![styled with prettier](https://img.shields.io/badge/Finance-web_app-teal)]()\n\n#### Mini Finance Innovations is a finance web application project. The goal is to simulate online banking by generating online virtual cards for new users, enabling users to add friends via phone number, facilitating transactions between friends in the ecosystem, receiving notifications for events, and maintaining transaction history.\n\n\u003e [!NOTE]\n\u003e - Deployed at [https://mini-finance.onrender.com](https://mini-finance.onrender.com)\n\u003e - Backendless FREE-TIER requests are **LIMITED** and the server will shut down for a day when reached\n\u003e - New updates to database, services(introduced Backendless SDK), localization updated to english\n\n## Table of content\n- [Features](#features)\n- [Libraries and Services](#libraries-and-services)\n- [Usage](#usage)\n- [Installation](#installation)\n- [Project content](#project-content)\n- [Design and Architecture](#design-and-architecture)\n- [Future updates](#future-updates)\n- [Contributing](#contributing)\n- [License](#license)\n\n\n## Features\n- Authentication\n- Virtual card generation upon register (currently all mock cards have balance)\n- Top-up\n- Friends and favorites\n- Notifications\n- User-to-user transactions\n- Transaction history tracking with filters\n- Autocomplete\n- User profile management (picture, profile details etc.)\n- Subscription (not implemented)\n\n## Libraries and Services\nThe project utilizes the following libraries and services:\n- [Backendless](https://backendless.com/) as the backend service\n- [Exchange Rate API](https://www.exchangerate-api.com/) for real-time exchange rates\n- [React-router](https://reactrouter.com/en/main) library\n- [React credit card 2](https://www.npmjs.com/package/react-credit-cards-2) library\n- [Ant Design](https://ant.design/) library for a few components\n- [Font Awesome Icons](https://fontawesome.com/icons) library\n\n| Category         | Technologies / Libraries                                   |\n| ---------------- | ---------------------------------------------------------- |\n| Frontend         | `React`                                                    |\n| Server           | `Backendless`                                              |\n| UI               | `AntDesign`, `react-credit-cards-2`                        |\n| Forms            | `custom logic`                                             |\n| State management | `React.useContext`                                         |\n| API Request      | `fetch`                                                    |\n| Tools            | `Git`, `Vite`, `Prettier`, `Npm`, `disable-react-devtools` |\n\n## Usage\nHere are some examples of how to use this project:\n\n1. Register\n1. Topping up the account using a credit card\n1. Add friends\n1. Remove friends\n1. Making a transaction to another user in the ecosystem of \"Mini Finance Innovations\"\n1. Viewing transactions history\n1. Changing profile info and profile picture\n1. Interact with notifications\n\n## Installation\nTo get started with this project, follow these steps:\n\n1. Clone the repository\n    ```bash\n    git clone https://github.com/batanoffs/mini-finance.git\n    ```\n2. Navigate to the project directory: `cd your-project-directory`\n\n3. Install dependencies: \n    ```bash\n    npm install\n    ```\n4. Start the development server:\n    ```bash\n    npm start\n    ```\n5. Open your browser and go to [http://localhost:3000/](http://localhost:3000/) to view the app.\n6. Login with test credentials or register new account\n\n## Project content\n- ### Login Register\n    The user can log in to the app with an existing account or register a new one.\n    The registration is a multi-step process as shown below and clearly displays the user's current stage.\n    There is validation implemented for the user's input.\n\n    | Steps                                                                                                  | From left to right:                                                                                    |\n    | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------ |\n    | ![register step 1](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505345/register1_xwktpp.png) | ![register step 2](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505347/register2_glrjhu.png) |\n    | ![register step 3](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505348/register3_uep0et.png) | ![register step 4](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505348/register3_uep0et.png) |\n\n\n- ### About\n  | Web                                                                                              | Mobile |\n  | ------------------------------------------------------------------------------------------------ | ------ |\n  | ![About page](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505335/aboutapp_cu1qn5.png) |        |\n     \n\n- ### Dashboard\n    Provides a central interface for managing the account, navigation, including virtual\n    card, balance, last transactions, quick actions and buttons.\n\n    |                                                Web                                                 |                                                  Mobile                                                  |\n    | :------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------: |\n    | ![Dashboard web](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505353/preview_dcttk8.png) | ![Dashboard mobile](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505337/homemobile_hihl3d.png) |\n\n- ### User balance\n    The dashboard contains the information about the current balance of the user for quick financial overview as well virtual card details\n\n    ![User balance](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505335/balance-card_dmewos.png)\n\n- ### Notifications\n    Provides real-time notifications for friend requests and money transactions to inform\n    users in real-time. The notifications also display the time when the notification was\n    created and possible actions, when the user hovers over the notification with the mouse.\n\n    *Users can **request money** from other users in the ecosystem as long as they are in their list of friends.The form is invoked from a button located on the dashboard and allows automatic filling / **Autocomplete** of the field if the friend has been found.*\n\n    | Friend request                                                                                             | Accept Friend - success message                                                                                        |\n    | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |\n    | ![Friend request](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729506877/friend-request_sevm2j.png) | ![Accept message](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729506879/notification-friend-accept_gzoldh.png) |\n\n\n    | Money recieved                                                                                              | Money request                                                                                                 |\n    | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |\n    | ![Money recieved](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729507492/notifyMoneySent_jd0usp.png) | ![Money request](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729507494/notifyMoneyRequest_dkhqpv.png) |\n\n\n    | Empty notifications                                                                                              | Message reject                                                                                                |\n    | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |\n    | ![Empty notification](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505338/no-notifications_zgsvkn.png) | ![Message reject](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729507498/notifyMoneyReject_xjh7x0.png) |\n\n- ### User profile menu \n\n    The user profile menu contains the user's name and avatar and allows the user to navigate between pages.\n\n    |                                                   Web                                                    |                                                     Mobile                                                     |\n    | :------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------: |\n    | ![Profile web](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505340/profilemenu-web_wbdg0p.png) | ![Profile mobile](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505339/profilemenu-mobile_qaqegv.png) |\n\n- ### Profile settings\n    Users can change information about their account, including email, profile picture\n    and information about credit card, as well as manage their notifications.\n\n    ![Profile settings](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505353/settings-profile_xii4iw.png)\n\n- ### Quick actions\n    Provides a quick way to execute tasks such as sending money, adding friends,\n    requesting money, and adding friends to a category of favorite\n\n    |                                               Quick actions                                               |                                Add Friends and transaction buttons                                 |\n    | :-------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------: |\n    | ![Quick actions](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505341/quciksend-menu_to80ws.png) | ![Add Friends](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505335/addfriend_retjnm.png) |\n\n    |                                                Change                                                |                                                   Show buttons                                                    |                                                       Delete                                                        |\n    | :--------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------: |\n    | ![Change](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505342/quicksend-change_wulpfz.png) | ![Show buttons](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505343/quicksend-change-delete_ydn46c.png) | ![Delete](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505345/quicksend-change-delete-confirm_abbg1k.png) |\n\n- ### Last transactions\n    Users can view their transaction history, which shows the last 5 transactions\n\n- ### Autocomplete\n    ![Autocomplete](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729507103/autocomplete_ztva8d.png)\n\n- ### Wallet\n    Shows all movements in the account, as well as quick buttons for\n    sending money, loading money and searching for an amount\n    ![Wallet](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505352/wallet_gyu5st.png)\n\n- ### Profile overview\n    Here the user can view their data and perform actions towards their friends, as well as see who they are\n\n    |                                               Overview                                                |                                   Hover friends action buttons                                    |\n    | :---------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------: |\n    | ![Overview](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729507496/profileoverview_x1xtdq.png) | ![Hover](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729507267/friendsActions_zv0joq.png) |\n\n- ### Help center\n    Menu for help and frequently asked questions with search functionality (still not implemented)\n\n    ![Overview](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505336/FAQ_clao7s.png)\n\n## Design and Architecture\nServerless architecture, based on Backendless as a provider. \nUsed Exchange Rate API for live update rates\n\n- ### Reuseable Components\n    - buttons\n    - cards\n    - forms\n    - lists\n    - cards\n    - modals\n    - inputs\n    - utils\n\n- ### Context Providers\n    **AuthContext** provides data of authenticated user to welcomePage\n    component through useContext from React. Additionally exports useAuthContext()\n\n- ### Custom Hooks\n    Some of the hooks are reuseable others are not updated yet.\n\n    - **useAddFriend()** - *provides handlers and state managing for friends manipulation. Finally it returns:*\n      - number\n      - error\n      - showMessage\n      - onSubmit\n      - onChangeNumber\n      - onFocusClearErrorHandler\n\n    - **useExchangeRates()** - *manages the state and requests to the Exchange Rate API. Finally it returns the different rates.*\n\n    - **useMessage()** - *returns function message from Ant Design, which takes type and text*\n\n    - **useTransactions(type)** - *Accepts type of transaction. It fetches the transactions by type and returns them.*\n\n    - **useMakeTransactions(type, toggleModal, showModal)** - *Accepts type of transaction, toggleModal and showModal as props. It manages the state and requests to the transactions. Finally it returns the different rates.*\n      - friends - array of friends of the user\n      - values - updated form values\n      - setValues - a setter function\n      - setUserInputHandler - updates form values\n      - onFormSubmitHandler - form submit handler\n      - onClose - a function to close the modal\n\n    - **useForm(initialState, onLogin, onRegister)** - *takes initial state for form, and functions to be called on login and register. Inside it there's also useValidate hook which validates input from user. Finally it returns:*\n      - values - updated form values\n      - error - errors if there were any during validation\n      - changeHandler - updates form values and is used as onChange prop for input\n      - validateHandler - validates input from user\n      - onSubmitLogin - checks if request was successful\n      - resetFormHandler - clears input fields\n      - onSubmitRegister - checks if request was successful\n      - onFocusHandler - clears currently focused input field\n\n    - **useSessionStorage(key, initialValue)** - *takes key to store in sessionStorage and initial value. Finally it returns:*\n      - setSessionStorageState - function to set current state\n      - state - current state\n\n    - **useValidate(initialStatе)** - *takes initial state which comes from useForm. Finally it returns:*\n      - error - state of errors in the current moment\n      - errorHandler - function that validates errors and sets them in state\n      - clearErrorHandler - function that clears errors\n\n    - **useUploadImage()** - *provides handlers for drag and drop and file input. Returns*\n      - picture\n      - error\n      - handleDrop\n      - handleDragOver\n      - handleFileSelect\n\n    - **useVirtualCard()** - *returns virtual card number and balance for the current user*\n\n- ### Routers\n  - The router is located in `src/router.jsx` \n  - It is created with createBrowserRouter from `react-router-dom`\n  \n- ### Constants\n  - **baseURL** stores base URL for backendless and exchange rate api\n  - **defaultAuth** stores the default auth state\n  - **forms** holds regex validations and error messages for the different types \n  - **rates** stores initial state for the exchange rates\n  - **uploadSettings** stores max upload file size\n\n- ### Utils\n  - **assignNewCardId()** - *takes nothing. Generates random number from 0 – 100 and checks if there's already user with such id and if there is, generates new one and returns it*\n  - **formatDate(date)** - *takes date and returns formatted*\n  - **balanceFormat(balance)** - *takes balance and returns formatted*\n  - **errorHandler(error)** - takes the error and returns a custom object format\n  - **showLastCardDigits(number)** - takes bank card number and returns last four digits\n  - **sessionStorage(number)** - holds functions to manage the session storage data\n  - **showLastCardDigits(number)** - takes the card number digits and returns only the last 4 \n\n- ### Services\n  - **authService** for Authentication \n  - **cardGeneratorService** for Virtual card generation \n  - **exchangeRateService** for Exchange Rate\n  - **notificationService** for Notifications\n  - **transactionService** for Transactions\n  - **userDataService** for User Data\n\n- ### Database schema - tables and relations \n\n    ![Database schema](https://res.cloudinary.com/dzh01qrmx/image/upload/v1729505808/schema_zlcpod.png)\n\n## Future updates\n- [ ] oAuth \n- [ ] Change notification settings\n- [x] Change profile info \n- [ ] Age check on register\n- [x] Top up account\n- [ ] Language change\n- [ ] Dark theme\n- [ ] Chat bot\n- [ ] Help center search topic\n- [x] Update subscription plan\n- [x] Wallet transactions\n\n## Contributing\nThis project is maintained by [batanoffs](https://github.com/batanoffs) and tested by [Ivan-0101](https://github.com/Ivan-0101). Currently is not open to additional contributions.\n\nIt is inspired by the layout of [Tooplate 2135 Mini Finance Template](https://www.tooplate.com/view/2135-mini-finance).\nSome icons are used from [Julia G](https://icons8.com/illustrations/author/627444) at www.icons8.com\n\n## License\nThis project is licensed under MIT License - see the [LICENSE.txt](https://github.com/batanoffs/mini-finance/blob/main/LICENSE.txt) file for details.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbatanoffs%2Fmini-finance","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbatanoffs%2Fmini-finance","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbatanoffs%2Fmini-finance/lists"}