project screenshot 1
project screenshot 2
project screenshot 3

Crypto Soundbox

Streamline your crypto management with our DApp, delivering instant transaction alerts directly to your device. Fully integrated with MetaMask, stay updated with real-time auditory notifications.

Crypto Soundbox

Created At

HackFS 2024

Project Description

ayment Notification DApp: Elevate your cryptocurrency management experience with our decentralized application, designed to provide real-time transaction notifications directly to your device. Seamlessly integrated with MetaMask, our DApp allows users to register their Ethereum wallet addresses and receive instant auditory alerts whenever a transaction occurs. Whether you're receiving payments or simply monitoring your crypto flows, our DApp ensures you never miss a beat.

Key Features:

Instant Transaction Alerts: Get notified with customizable sounds the moment transactions hit your wallet. Access detailed logs of past transactions and insightful analytics on your financial activities. Security and Privacy First: Enhanced security measures protect your information and transaction details at all times. Designed for simplicity and efficiency, our DApp is the perfect tool for merchants, crypto enthusiasts, and anyone looking to stay on top of their blockchain transactions without the hassle.

How it's Made

Overview Our Payment Notification DApp is designed to provide a seamless and secure way for users to receive real-time notifications for transactions on their Ethereum wallet addresses. Leveraging the power of blockchain technology and modern web development frameworks, the DApp offers a highly responsive, intuitive user experience while ensuring data integrity and security.

Technologies Used Frontend: Built using Next.js, our frontend is hosted on Vercel, ensuring fast loading times and optimal performance thanks to Vercel's global CDN and edge functions. We integrated RainbowKit for wallet connection, which provides a user-friendly, polished interface for interacting with MetaMask and other wallet providers. Backend: Our backend, crafted with Node.js and Express, is deployed on Render for its straightforward scalability and reliability. We use MongoDB for database management, which allows us to handle data efficiently and with flexibility. Real-Time Communication: Socket.IO is used to establish a bi-directional, real-time communication channel between the client and server, enabling instant notification delivery upon transaction confirmation. Blockchain Interaction: Transactions are monitored using Alchemy as our primary Ethereum node provider, known for its robust infrastructure and reliable transaction tracking. Ethers.js facilitates our interaction with the Ethereum blockchain, managing wallet connections and transaction confirmations. Authentication: Security is bolstered using JSON Web Tokens (JWT), ensuring that all transactions and user interactions are authenticated and secure. Decentralized Storage: We incorporate Filecoin via Web3.Storage, provided by Fleek, to decentralize user data storage, enhancing security and data persistence. This approach not only secures user data but also aligns with our ethos of leveraging decentralized technologies. UI Components and Theming: Shadcn provides the UI framework for crafting a modern and responsive user interface, ensuring a cohesive and visually appealing design across the application. Integration and Workflow User Registration and Authentication: Users sign up via a MetaMask wallet using RainbowKit. Post-authentication, a JWT is issued for session management. Wallet Monitoring Setup: Users sign a transaction to verify ownership of their Ethereum address, which is then monitored using Alchemy's APIs. Notification System: When a new transaction is detected by Alchemy, a WebSocket event is triggered via Socket.IO, notifying the backend. Alerts and Storage: The backend processes the transaction, logs it in MongoDB, and sends a real-time alert to the user via the frontend. Transaction data is stored securely using Filecoin's decentralized storage solution. User Experience: Users receive notifications in the form of sound alerts and can review transaction histories and analytics through a comprehensive dashboard. Notable Implementations Decentralized Data Storage: Utilizing Filecoin and Fleek for storing transaction data ensures that our application is not only performant but also adheres to the principles of decentralization. Real-Time Alerts: The combination of Socket.IO for real-time web socket communication with Alchemy's reliable blockchain event handling enables our system to deliver instant notifications without delay. This project represents a fusion of cutting-edge web technologies and blockchain, creating a robust platform that enhances user engagement and security in cryptocurrency transactions. By leveraging partner technologies such as Alchemy for blockchain interactions and Filecoin for decentralized storage, we ensure that our application is not only functional but also future-proof and scalable.

background image mobile

Join the mailing list

Get the latest news and updates