Build and Deploy a Digital Identity App with Next.js, Tailwind CSS, TypeScript, and Solidity
Albert Mends Albert Mends
9.14K subscribers
12,086 views
477

 Published On Jul 21, 2024

Built with the latest Next.js, TypeScript & Solidity, IdentiFi is a decentralized application that helps people create their DID on the blockchain. The current digital identity landscape is often fragmented and insecure, making it challenging for users to manage and verify their identities across different platforms. IdentiFi was inspired by the potential of blockchain technology to create a unified, secure, and verifiable digital identity solution that empowers users to manage their identities seamlessly.

⭐ Shadcn: https://ui.shadcn.com/
⭐ Neon: https://console.neon.tech/
⭐ TailwindCSS: https://tailwindcss.com/
⭐ Pinata cloud: https://www.pinata.cloud/
⭐ Solidity: https://soliditylang.org/
⭐ Chainlist: https://chainlist.org/?search=btt&tes...
⭐ BTTC Testnet: https://testfaucet.bt.io/
⭐ Metamask: https://metamask.io/
⭐ Hardhat: https://hardhat.org/hardhat-runner/do...

📚 Materials/References:
GitHub Repo (give it a star ⭐): https://github.com/mendsalbert/identiFi
README (assets & code): https://github.com/mendsalbert/identiFi
Starter Code: https://github.com/mendsalbert/identi...
❤️ BuyMeACoffe : https://www.buymeacoffee.com/mendalbert

👋 Social Media:
  / mendsalbert  
  / mendsalbert_  
  / mends-albert  
https://t.me/albertmends

Subscribe or I turn your vs code into light mode
╔═╦╗╔╦╗╔═╦═╦╦╦╦╗╔═╗
║╚╣║║║╚╣╚╣╔╣╔╣║╚╣═╣
╠╗║╚╝║║╠╗║╚╣║║║║║═╣
╚═╩══╩═╩═╩═╩╝╚╩═╩═╝
Timestamps 
00:00:00 - Intro
00:00:42 - Demo
00:03:13 - Cloning Starter Files
00:04:25 - Installing npm packages
00:05:00 - Exploring Starter Files
00:06:29 - Creating Layout page
00:07:05 - Privy Authentication Setup
00:12:48 - Privy API Key
00:13:06 - Setting up chain for privy
00:14:32 - Chainlist: Selecting chain
00:16:04 - Installing MetaMask wallet
00:16:47 - Adding chain to MetaMask Wallet
00:17:58 - Setting up chain in Privy and completing Layout page
00:22:53 - Changing login priority in Privy Dashboard
00:23:51 - Landing page (Part 1)
00:25:16 - Fixing bugs (landing page + Layout page) and testing it out
00:26:05 - Installing hardhat
00:26:56 - Initialising hardhat (bug + fixes )
00:29:50 - Setting up hardhat.config.js file
00:36:45 - Writing smart contract (Structs)
00:47:32 - Writing smart contract (Mapping Variables)
00:50:03 - Writing smart contract (Modifier)
00:52:56 - Writing smart contract (Create & Edit UserInfo Function)
00:58:52 - Writing smart contract (getUserByUsername function)
01:03:09 - Completing Smart contract
01:07:15 - Test for smart contract
01:08:11 - Deployment Script
01:10:28 - Getting BTTC testnet tokens
01:11:53 - Deploying Smart contract
01:14:37 - Utils and lib directory (Writing queries to interact with the smart contract functions in the frontend)
01:36:15 - Landing page (Navbar)
02:12:48 - Landing page (Hero Section)
02:28:48 - Landing page (Section)
02:42:33 - Onboard page
02:58:50 - Setting up Pinata for Storing image on IPFS
03:01:42 - Submitting user identity to the chain function
03:03:09 - User Profile Display Component
03:13:17 - Form Field and Social media Input
03:15:40 - Finishing up & testing the onboard page
03:25:36 - Dashboard Page
03:37:45 - Verify Identity Page
03:44:50 - Deploying to Netlify

💼 Business Inquiries: [email protected]

👨🏽‍💻 Tools and Tech Stack
React JS, NextJs, TailwindCSS, Typescript, solidity , Hardhat, ethers, EVM, Tabler Icons, Javascript, chadcn

show more

Share/Embed