Hello everyone! 👋
Stoked to present to you, my submission for Auth0 x Hashnode Hackathon! ⚡
Introduction
Introducing PAViC, a simple, easy-to-use and a hassle-free app for making fast and secure payments using your mobile phone, powered by blockchain. It uses its own cryptocurrency called Vitcoin (named after my alma mater VIT, Pune.😉🏫). Based on a completely decentralized platform, PAViC stores all your personal and sensitive financial data in a distributed fashion with strict access controls. The app makes sure that it's only you who has the right to access to your sensitive data and nobody else. There is no central entity in control, hence, gone are the days of abuse of your personal information. Read on to find out more!
TL; DR
Things you can do on PAViC:
App Walkthrough
One click signup powered by Auth0⚡. Create free account!
Get a reward on signup! 💰
Make hassle free payments. 💸
Mine transactions and earn rewards! ✨
- View your transaction history. 📃
What's more?
- Powered by Blockchain Tech!
- 100% secure, with privacy at its core! 💯
- Built for the community, powered by the community! No single person in-charge!
What are the objectives of the app?
- Build a decentralized cryptocurrency network and maintain a distributed database on mobile devices.
A decentralized mobile network illustrated.
The first objective is to build a network of mobile devices which will be able to communicate with each other in a decentralized fashion. The transactions (ledger) and blockchain data would be distributed and stored with every mobile device in a decentralized manner. The transactions data contain the amount and the parties involved in that transaction, and every transaction is associated with a specific block on the blockchain.
- Enable payment transactions and implement a reward system. 💰
Through this decentralized channel, any mobile device would be able to make a payment to another mobile device on the network. We need to verify these transactions to maintain the integrity in the network. As there is no central third party involved to verify (mediate) any transaction, this job of verification is performed by any mobile device on the network itself. For this job, that user is rewarded with a sum.
How PAViC Works? 💡
PAViC system is based on a network of mobile devices. These mobile devices have the ability to communicate with one another. Every time a user wants to make a payment, he/she has to enter the details in the app such as the name of the recipient and the amount, and this transaction data gets broadcasted to all other mobile devices on the network, since, this is a decentralized financial system. But the other mobile devices would not be able to see the information contained in this broadcast, hence, privacy is preserved!
A transaction getting broadcasted.
Every mobile device stores the transaction data in a 'pending transaction' buffer. Mind you, the payment is not complete at this point. The money has not exchanged hands yet. The transaction in this buffer has to be verified (mined). This verification task can be done by any user on the network, even the person who's made the payment in the first place! This can be accomplished by simply tapping a button in the app, which runs a verification algorithm behind the scenes. After the verification is done, the transaction gets completed, the money exchanges hands and the user responsible for verifying pending transactions gets a reward!
How I built this app? 👨🏻🔧
This is my first app! My first time ever building an end-to-end product! The journey was full of challenges, setbacks, drowning in docs and rewarding experiences at the end! Here's a brief summary of my journey...
Planning Phase 📝
As I had figured out the main objectives, I needed to plan a way to implement them into the app. I divided the whole development procedure into phases. Firstly, I worked on system design and then proceeded onto the implementation phase. Trello was my best friend through this whole procedure, it helped me keep a track of everything and stay organized.
Design Phase 👨🏻🏫
Database Design
There are 4 main entities in put system, viz., users, transactions, pending transaction and blocks. I made a table for each of the entity. I chose to go with a SQL database for this one. This is the schema design of the database:
UI Design
The design part of the app was the toughest for me to figure out as I lack the knack for coming up up good design ideas. I looked for inspiration and templates all over the internet, especially on dribbble. I wanted the design to be very minimal, intuitive and dead easy to use and figure out. This process also consists of trying to come up with a color scheme. The proven way was to go for Tailwind CSS color palette. How can you go wrong, eh?😉 I went with the blue palette for mainly one reason. My app comes under finance category and the color blue signifies freedom, confidence and trust. These characteristics go perfectly together with what a cryptocurrency is supposed to be. So everything just fell in place together perfectly!
I used Excalidraw to create wireframes of the screens in the app. The main app consists of 3 screens:
Implementation 🛠️
Tech Stack 💻
- React Native - Framework for mobile app development 📱🛠
- Auth0 - One stop for all your User Authentication needs! 🛡️🔐
- SQLite3 - The deployed and trusted local database for mobile ⚡
- Socket.io & Node.js - For communication between mobile devices
Authentication 🛡️
Auth0 provides user authentication API with docs and guides that's dead easy to follow and implement. For someone like me, who's not familiar with the ins and outs of configuring their own custom authentication flow greatly appreciates this. 😉
It provides a great feature called Universal Login, which comes with its own login infrastructure and a whole set of features. Hence, I did not need to create my own login page in the app. So every time a user wants to sign-in, he/she is directed to Auth0's secure login page. It has a clean and customizable UI, in which I configured my own logo. Auth0 made integrating social login providers such as Google superbly easy. There's a whole host of features that I have yet to tinker with such as Multi-factor Authentication and Passwordless Connections. Definitely in the future some time...
Communication 🌐
The channel through which the mobile devices communicate and share data is created using socket.io.
Challenges that I faced 🥶
I worked with JavaScript and React Native for the first time. Almost everything seemed challenging, and the initial period of development was full of rookie mistakes. Here's a highlight of a few of them:
- I'm not awfully fluent when it comes to writing SQL queries. I ended up making a good deal of mistakes at the beginning and, in turn, created so many bugs. So I had to go back to the docs again to rectify these mistakes. 😛
- Configuring the event listeners in the socket.io was a little tough for me in the beginning. But with their docs and stackoverflow to the rescue, I had it figured out in no time.
- Certain features such as calculating a user's balance or verifying transactions are asynchronous. Hence, I had to wrap my head around the concepts of Promises and async/await to get them working correctly.
What's next? ✨
- Phone book like interface for quickly selecting contacts while making payments.
- QR Code Scanning for quick transactions.
- Support for other cryptocurrencies.
- A web-app for browser for accessing your account. (Will offer me a chance to work with React.js as well😉)
Useful Links 🔗
GitHub Repositories
App Store Download Links ✨✨
Winding up...
Thanks a ton for making it till here. 🙌🏻 I would absolutely love to hear what you think about PAViC, so let me know down in the comment section and while you are at it, also drop a like. 😉