Skip to content

a prototype of a fund transfer platform built with flutter

License

Notifications You must be signed in to change notification settings

brownboycodes/HADWIN

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

46 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

HADWIN logo with name

prototype of a fund transfer app built with Flutter.


HADWIN walkthrough as gif

made with flutter Dart forthebadge built for ios Open Source Love svg1 powered by coffee

total line count repository size GitHub commits last commit pull requests closed issues open GPLv3 license


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).
  1. 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.
  2. 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 mary.kertzmann@notillegal.org deer 99293629
Rusty Abshire rusty.abshire rusty.abshire@unfailedstartup.io parrot 19285107
21664761
Dante Vandervort dante.vandervort dante.vandervort@junkstuff.net tiger 67767567
04295132
Damion Jerde damion.jerde damion.jerde@costlyhotel.com chicken 64045463
42203582
Bruce Wayne the.batman dark.knight@wayneenterprises.com aSymbol 47911045
19826115
Tony Stark iamironman tonystank@starkindustries.com LoveU3000 39753176
61428607
Van Wilder freeguy deadpool@mcu.finally FirstDatesAreInterviews 40429859
53421343
Van Helsing logan wolverine@xmen.marvel ryansUglySweater 23926044
20166891
Steve Harrington king_steve king_steve@hawkins.high ussButterscotch 72389857
91515917
Meilin Lee red.panda mei@turning.red 4town 50881774
11045853
Diana Prince wonderwoman queen@amazon.race Hippolyta 30646421
39108502
Selina Kyle catwoman jewelthief@gotham.city notTrustworthy 27772507
36995137
Natasha Romanoff blackwidow natalierushman@starkindustries.com daughterOfIvan 36841177
10783270
Jane Hopper el eleven@hawkins.laboratory eggo 76131209
59840666


anything else Β  not a bug not an issue πŸ™ˆ


WORKFLOW

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


FruitCastle banner


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

FruitCastle banner


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 banner

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 :

FruitCastle banner

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   Dribbble Behance Instagram Twitter LinkedIn

⭐Credit card - Checkout flow (AMEX) by Ramakrishna Venkatesan, follow Ramakrishna on   Dribbble Behance Twitter LinkedIn Instagram Facebook

⭐ Auto Location Switching & Transaction Receipt by Nimasha Perera, follow Nimasha on   Behance Dribbble Twitter LinkedIn Medium

⭐ Work From Home Setup (Night) by Mohamed Chahin, follow Mohamed on   Behance Dribbble Twitter LinkedIn Facebook

⭐ Online shopping at the best prices. by Yuliia Osadcha, follow Yulia on   Behance Dribbble Twitter Instagram




SUPPORT HADWIN ❀


Add a star

Fork the repository

share on twitter Β  Twitter URL

share on facebook Β  share on facebook

share on LinkedIn Β  share on LinkedIn




CONTRIBUTORS

GitHub Contributors Image



⚠ 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.



Github Badge Twitter Badge LinkedIn Badge Instagram Facebook Badge Reddit Badge