prototype of a fund transfer app built with Flutter.

I wanted to make this app with flutter because I was interested in flutter developer roles. I figured out this payment interface is a fundamental and common fragment of almost every app, since almost every app requires some sort of payment/transaction interface to be present, be it a video streaming service like Netflix or Disney+ during signing up for subscription or a social networking platform like facebook or Instagram where an user needs to add their card details for promoting their content to reach more users. I wanted to build something that would cover demonstration of a wide range of skills required for an app developer, like - knowledge of architectural components & design patterns, state management/nested state management with provider, fetching data from servers to demonstrate proficiency with restful API to connect applications to back-end services, building a real time interface, using the Camera API, writing data to local files, custom navigation stack, complex animations, seamlessly incorporating third party packages, pixel-perfect implementation of UI designs (differs only because some improvisations I made), debugging, analysis skills & performance tuning.

FEATURES

1. Fund Transfer - mock simulation only, a transaction request is made to the server, the server is programmed to respond with 66.666% probability of successfully executing the transaction so as to simulate real world experirence (in the future this probability can increased to 75% or more).

2. Credit Card Validator and Storage - credit card details will be stored locally and not shared with the server, the validator is programmed to recognize cards belonging to American Express, VISA, MasterCard, Discover.
3. Real-Time username availability checker - part of sign up process.

NOTE: Since this is a prototype users cannot send or receive real money, or create real accounts, users need to login/register with test data provided here ➡️ https://github.com/brownboycodes/HADWIN/blob/master/docs/HADWIN_WIKI.md. Transaction and credit card data will be saved on the users device itself and not shared with the server.

Some custom system utilities built by me :-

1. custom tab navigation stack
2. custom keypad and input field for fund transfer screen
3. custom card flow widget
4. custom transaction receipt generator
5. error alerts
6. search and sort systems for filtering past transactions, contacts and business organiztions
7. local client-side databases

Sample user data for testing the app

NAME	USERNAME	EMAIL ID	PASSWORD	BANK ACCOUNT NUMBER
Mary Kertzmann	mary.kertzmann	[email protected]	deer	99293629
Rusty Abshire	rusty.abshire	[email protected]	parrot	19285107 21664761
Dante Vandervort	dante.vandervort	[email protected]	tiger	67767567 04295132
Damion Jerde	damion.jerde	[email protected]	chicken	64045463 42203582
Bruce Wayne	the.batman	[email protected]	aSymbol	47911045 19826115
Tony Stark	iamironman	[email protected]	LoveU3000	39753176 61428607
Van Wilder	freeguy	[email protected]	FirstDatesAreInterviews	40429859 53421343
Van Helsing	logan	[email protected]	ryansUglySweater	23926044 20166891
Steve Harrington	king_steve	[email protected]	ussButterscotch	72389857 91515917
Meilin Lee	red.panda	[email protected]	4town	50881774 11045853
Diana Prince	wonderwoman	[email protected]	Hippolyta	30646421 39108502
Selina Kyle	catwoman	[email protected]	notTrustworthy	27772507 36995137
Natasha Romanoff	blackwidow	[email protected]	daughterOfIvan	36841177 10783270
Jane Hopper	el	[email protected]	eggo	76131209 59840666

anything else   🙈

---

WORKFLOW

The flowchart below provides a brief overview of the activities that take place when the app is launched

Post successful user authentication an authorized session would last upto 2 hours. The login process is quite sophisticated on its own and it might get too overwhelming trying to understand it from reading the code, the flowchart below provides an overview of activities that take place during the login process, perhaps it will clear up the doubts behind the logic

Users are requested to rest assured as no personal data is being saved on the server and if they are still concerned about their privacy users are allowed to test the app with the mock data only.

FruitCastle (source code 💡) is a server created using Python and Flask, which hosts the data being used to create simulation for authorizing access to the features to the app and making transactions.

checkout the working demo for android devices :

HADWIN is yet to be released for iOS devices, anyone releasing an iOS app with the name or user interface same-as/similar-to HADWIN will be met with legal action.

---

SAMPLE UI 📺

---

QUICK START ⚡

1. Ensure you have flutter installed on your system (if not click here).

2. Fork the repository

3. clone the repository to your local machine

   git clone https://github.com/YOUR_GITHUB_USERNAME/HADWIN.git

4. open the cloned repository

   cd HADWIN

5. run the following command to install all required dependencies

   flutter pub get

6. create and switch to a new branch

   git checkout -b dev_your_github_username

7. now open your local copy of the repo in a coding terminal of your choice and explore 😊🎉

---

TASKS TO DO 📃

The tasks have been laid out in the format task_type (SCOPE): the_task and these tasks have been sorted in terms of their difficulty. Some tasks may accompany some conditions which have to be met before attempting, read and understand them carefully since a small unrectified mistake can wreck this project completely. Check the contributing guidelines first.

Tasks ⤵

1. feature (UIUX): in the Login process, an alert box with an error message received from the server pops up every time a user enters the wrong credentials, create a counter that would track the number of times the user enters an username or email ID that does not belong to any account on the server, if the counter hits 3 times in a row then show an option to take the user to the sign up screen in the alert box that would appear. Maintain the existing UI and experience while doing so. 🚸✨

2. fix (UIUX): debug the Sign Up process, hopefully it can contain some flaws or maybe it can be simplified further while maintaining the existing UI and experience (hint: check the UI/UX of the sign up screen and its components for errors if any). 🚸🐛🩹

3. refactor : use StreamBuilder in ChooseUsernameScreen

4. build (DEPENDENCIES): upgrade to the latest version of the flutter SDK without failing the build and crashing the app 👷‍♂️🏗⬆💥

5. build (DEPENDENCIES): if the flutter SDK version of the project is the latest available upgrade the dependencies of the project to the latest available version without failing the build and crashing the app 👷‍♂️⬆💥

6. build (DEPENDENCIES): if the flutter SDK version of the project is the latest available and the package qr_code_scanner has been discontinued, replace qr_code_scanner with mobile_scanner and implement it without crashing the app. ➖📦➕

7. feature (LOCALIZATION): make HADWIN available in other languages (japanese, hindi, bengali, mandarin, spanish, french, german etc.) 🌐

8. test : write some meaningful tests maybe? 🧪🤔

   

   just don't break anything... please

---

DEPENDENCIES 📦

HADWIN uses the following dependencies:

1. provider (📌6.0.2): A wrapper around InheritedWidget to make them easier to use and more reusable. ⚡
2. fluentui_system_icons (📌1.1.153): Fluent UI System Icons are a collection of familiar, friendly and modern icons from Microsoft. 🎨
3. http (📌0.13.4): A composable, multi-platform, Future-based API for HTTP requests. ⚡
4. fade_shimmer (📌2.0.1): A fade shimmer library to implement loading like lastest facebook loading effect. 🎨

1. scrollable_positioned_list (📌0.2.3): A list with helper methods to programmatically scroll to an item. ⚡
2. google_fonts (📌2.3.1): A Flutter package to use fonts from fonts.google.com. 🎨
3. lottie (📌1.2.2): Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player. 🎨
4. socket_io_client (📌1.0.2): Dartlang port of socket.io-client for web, flutter, dartvm to use. ⚡✨
5. grouped_list (📌4.2.0): A Flutter ListView where the list items can be grouped into sections. ⚡
6. concentric_transition (📌1.0.1): Concentric Transition effect. Useful for onboarding, page transitions etc. 🎨
7. dotted_line (📌3.1.0): This package allows you to draw dotted lines with Flutter. You can draw a beautiful dotted line. 🎨

1. url_launcher (📌6.0.20): Flutter plugin for launching a URL. Supports web, phone, SMS, and email schemes. ✨
2. google_nav_bar (📌5.0.6): A modern google style nav bar which could be use as a bottom navigation bar or tabbar, the design strictly follows the cuberto UI/UX on dribbble. 🎨⚡✨
3. path_provider (📌2.0.9): Flutter plugin for getting commonly used locations on host platform file systems, such as the temp and app data directories. ⚡
4. markdown_widget (📌1.2.8): A new markdown package. It supports TOC function, HTML video and img tag，and it works well on both the web and mobile. 🎨✨
5. flutter_launcher_icons (📌0.9.2): A package which simplifies the task of updating your Flutter app's launcher icon. 🎨
6. flutter_native_splash (📌2.0.1+1): Customize Flutter's default white native splash screen with background color and splash image. Supports dark mode, full screen, and more. 🎨

emojis indicate the scope where the dependency affects in the app (check the table below)

emoji	scope
🎨	UI
⚡	performance
✨	feature

---

CREDITS 🌟

⭐ PayPal App Redesign Concept by Vadim Demenko , follow Vadim on  

⭐Credit card - Checkout flow (AMEX) by Ramakrishna Venkatesan, follow Ramakrishna on  

⭐ Auto Location Switching & Transaction Receipt by Nimasha Perera, follow Nimasha on  

⭐ Work From Home Setup (Night) by Mohamed Chahin, follow Mohamed on  

⭐ Online shopping at the best prices. by Yuliia Osadcha, follow Yulia on  

---

SUPPORT HADWIN ❤

Add a star

Fork the repository

share on twitter  

share on facebook  

share on LinkedIn  

---

CONTRIBUTORS

---

⚠ IMPORTANT ⚠

HADWIN has been created purely out of my own interest in building a sophisticated fund transfer platform for adding value to my portfolio. Again it is being reminded that users cannot transfer/receive real money through this app (as of now), users are warned and forbidden from using real credit/debit card numbers or bank account numbers. Users may and if possible should only test this application with mock data provided from my personal API hosting server (FruitCastle (source code 💡). Account numbers and User details are fictitious, they have been generated randomly out of imagination, any resemblance of mock data with real people or account numbers is matter of sheer coincidence. The creator of this project not be/ cannot be held responsible for loss of any kind.

---

Anyone attempting to infringe/plagarize my code to replicate this project or reproducing this project with exactly same code and claiming it as their own is being requested to play fair, try building this project on your own, it will help in better assessment of your app development skills and also properly attribute/give credit to the people and resources from which inspiration has been drawn from.

---