Inspiration
The inspiration for this project came from the increasing problem of fake products being sold in the market. With the rise of e-commerce platforms, it’s often difficult for consumers to verify the authenticity of products. we wanted to create a solution that allows users to verify the genuineness of products quickly and efficiently using blockchain technology, which ensures the immutability and trustworthiness of product data.
What it does
This web app allows users to verify the authenticity of a product by entering a unique product ID. The product ID is checked against a decentralized smart contract deployed on the Ethereum blockchain. The app provides a response on whether the product is genuine or fake based on the information stored on the blockchain.
How we built it
The web app is built using:
- Frontend: React.js to create the user interface and handle interactions.
- Backend: Express.js server to facilitate communication between the frontend and the smart contract on the blockchain.
- Blockchain: Ethereum smart contract written in Solidity to store and validate product authenticity data.
- Web3: Ethers.js library to connect the frontend with the Ethereum blockchain via MetaMask.
- Smart Contract: The contract allows the verification of a product ID to ensure authenticity, stored and accessible through blockchain transactions. Steps taken to build:
- Frontend Development: Designed the user interface with React, using components to handle the user input and display status messages for product verification.
- Backend Development: Set up an Express.js backend to facilitate API calls and interact with the smart contract.
- Blockchain: Deployed a smart contract on Ethereum using Solidity, which allows verifying product IDs stored on the blockchain.
- Web3 Integration: Used Ethers.js to create a bridge between the frontend and Ethereum blockchain, enabling the dApp to fetch data from the blockchain and display it to users.
Challenges we ran into
Smart Contract Deployment: Deploying the smart contract on Ethereum was tricky, especially setting up gas fees and ensuring the contract was correctly deployed.
- Integrating Web3: Connecting the frontend with the blockchain was a challenge because of issues with MetaMask's account permissions and handling network errors.
- UI Design: Designing a clean and intuitive user interface while keeping the design responsive for all devices was difficult but ultimately rewarding.
- API Communication: Setting up the backend to interact with the smart contract and passing data between the frontend, backend, and Ethereum blockchain required careful handling of asynchronous operations.
Accomplishments that we're proud of
- Successfully deployed the smart contract on the Ethereum network and linked it with the frontend application.
- Created a fully functional decentralized application that can verify product authenticity in real-time using blockchain technology.
What we learned
- Blockchain Fundamentals: Gained a deeper understanding of smart contracts, Ethereum, and how decentralized applications work.
- Web3 Development: Learned how to integrate blockchain with frontend technologies, which was an entirely new experience.
- React and Ethers.js: Gained practical experience working with React.js and Ethers.js to build a decentralized app that interacts with the Ethereum blockchain.
- Problem Solving: Improved problem-solving skills while debugging issues related to the interaction between the frontend, backend, and the blockchain.
What's next for Decentralized Product Authenticity Checker Web App
- Enhancing UI/UX: Work on refining the user interface and making it more visually appealing and responsive across different devices.
- Smart Contract Improvements: Update the smart contract to handle additional features, such as multiple products, adding more detailed product metadata, and improving security.
- Integration with eCommerce Platforms: Integrate the product verification system with popular e-commerce platforms like Amazon, eBay, and Shopify for seamless authentication in the purchase process.
Log in or sign up for Devpost to join the conversation.