brownboycodes/HADWIN
a prototype of a fund transfer platform built with flutter
go to github downloadI 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
- 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).
- 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.
- 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 :-
- custom tab navigation stack
- custom keypad and input field for fund transfer screen
- custom card flow widget
- custom transaction receipt generator
- error alerts
- search and sort systems for filtering past transactions, contacts and business organiztions
- 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 |
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 :
![FruitCastle banner](./media/promotional/3d-screenhot-tray.png)
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 ⚡
-
Ensure you have flutter installed on your system (if not click here).
-
Fork the repository
-
clone the repository to your local machine
git clone https://github.com/YOUR_GITHUB_USERNAME/HADWIN.git
-
open the cloned repository
cd HADWIN
-
run the following command to install all required dependencies
flutter pub get
-
create and switch to a new branch
git checkout -b dev_your_github_username
-
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 ⤵
-
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. 🚸✨
-
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). 🚸🐛🩹
-
refactor : use StreamBuilder in ChooseUsernameScreen
-
build (DEPENDENCIES): upgrade to the latest version of the flutter SDK without failing the build and crashing the app 👷♂️🏗⬆💥
-
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 👷♂️⬆💥
-
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. ➖📦➕
-
feature (LOCALIZATION): make HADWIN available in other languages (japanese, hindi, bengali, mandarin, spanish, french, german etc.) 🌐
-
test : write some meaningful tests maybe? 🧪🤔
just don’t break anything… please
DEPENDENCIES 📦
HADWIN uses the following dependencies:
- provider (📌6.0.2): A wrapper around InheritedWidget to make them easier to use and more reusable. ⚡
- fluentui_system_icons (📌1.1.153): Fluent UI System Icons are a collection of familiar, friendly and modern icons from Microsoft. 🎨
- http (📌0.13.4): A composable, multi-platform, Future-based API for HTTP requests. ⚡
- fade_shimmer (📌2.0.1): A fade shimmer library to implement loading like lastest facebook loading effect. 🎨
- scrollable_positioned_list (📌0.2.3): A list with helper methods to programmatically scroll to an item. ⚡
- google_fonts (📌2.3.1): A Flutter package to use fonts from fonts.google.com. 🎨
- lottie (📌1.2.2): Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player. 🎨
- socket_io_client (📌1.0.2): Dartlang port of socket.io-client for web, flutter, dartvm to use. ⚡✨
- grouped_list (📌4.2.0): A Flutter ListView where the list items can be grouped into sections. ⚡
- concentric_transition (📌1.0.1): Concentric Transition effect. Useful for onboarding, page transitions etc. 🎨
- dotted_line (📌3.1.0): This package allows you to draw dotted lines with Flutter. You can draw a beautiful dotted line. 🎨
- url_launcher (📌6.0.20): Flutter plugin for launching a URL. Supports web, phone, SMS, and email schemes. ✨
- 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. 🎨⚡✨
- 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. ⚡
- 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. 🎨✨
- flutter_launcher_icons (📌0.9.2): A package which simplifies the task of updating your Flutter app’s launcher icon. 🎨
- 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
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.
![](/images/banner-woo.jpg)
excellent projects related to brownboycodes/HADWIN recommend downloading
AppFlowy
47859
AppFlowy is an open-source alternative to Notion. You are in charge of your data and customizations. Built with Flutter and Rust.
localsend
33797
An open-source cross-platform alternative to AirDrop
spotube
23772
🎧 Open source Spotify client that doesn't require Premium nor uses Electron! Available for both desktop & mobile!
revanced-manager
15035
💊 Application to use ReVanced on Android
gsy_github_app_flutter
14559
Flutter 超完整的开源项目,功能丰富,适合学习和日常使用。GSYGithubApp系列的优势:我们目前已经拥有Flutter、Weex、ReactNative、kotlin 四个版本。 功能齐全,项目框架内技术涉及面广,完成度高,持续维护,配套文章,适合全面学习,对比参考。跨平台的开源Github客户端App,更好的体验,更丰富的功能,旨在更好的日常管理和维护个人Github,提供更好更方便的驾车体验Σ( ̄。 ̄ノ)ノ。同款Weex版本 : https://github.com/CarGuo/GSYGithubAppWeex 、同款React Native版本 : https://github.com/CarGuo/GSYGithubApp 、原生 kotlin 版本 https://github.com/CarGuo/GSYGithubAppKotlin
dio
12249
A powerful HTTP client for Dart and Flutter, which supports global settings, Interceptors, FormData, aborting and canceling a request, files uploading and downloading, requests timeout, custom adapters, etc.
gopeed
11832
A modern download manager that supports all platforms. Built with Golang and Flutter.
bloc
11441
A predictable state management library that helps implement the BLoC design pattern
getx
9899
Open screens/snackbars/dialogs/bottomSheets without context, manage states and inject dependencies easily with Get.
flame
8846
A Flutter based game engine.
flutter_deer
7595
🦌 Flutter 练习项目(包括集成测试、可访问性测试)。内含完整UI设计图,更贴近真实项目的练习。Flutter practice project (including integration testing and accessibility testing). Contains complete UI design drawings for a more realistic practice project.
fish-redux
7343
An assembled flutter application framework.
ente
6686
Fully open source, End to End Encrypted alternative to Google Photos and Apple Photos
fl_chart
6451
FL Chart is a highly customizable Flutter chart library that supports Line Chart, Bar Chart, Pie Chart, Scatter Chart, and Radar Chart.
pixez-flutter
6360
一个支持免代理直连及查看动图的第三方Pixiv flutter客户端
Flutter-Responsive-Admin-Panel-or-Dashboard
6355
Responsive Admin Panel or Dashboard using Flutter
aidea
6021
AIdea 是一款支持 GPT 以及国产大语言模型通义千问、文心一言等,支持 Stable Diffusion 文生图、图生图、 SDXL1.0、超分辨率、图片上色的全能型 APP。
riverpod
5828
A reactive caching and data-binding framework. Riverpod makes working with asynchronous code a breeze.
pikapika
5463
美观易用且无广告的漫画和游戏客户端,同时支持MacOS,Windows,Android,iOS。
provider
5029
InheritedWidgets, but simple