https://devv.ai/
HTTP3 is a revolutionary decentralized web hosting platform that leverages blockchain technology to provide permanent, censorship-resistant website hosting. It combines the power of IPFS (InterPlanetary File System) with smart contracts to create a robust, decentralized infrastructure for the web.
🎓 What You'll Learn:
Next.js 14 fundamentals and best practices
Full stack development with Next.js
Integrating AI (Google's Gemini AI) into your Next.js app
TypeScript implementation in Next.js
Responsive design using Tailwind CSS
Authentication with Privy
Database integration using Drizzle ORM
Deployment of Next.js projects
📚 Project Highlights:
AI-assisted waste verification
User reward system for eco-friendly actions
Real-time waste collection task management
Interactive leaderboard for community engagement
👨💻 Step-by-Step Guide:
Setting up a Next.js 14 project
Creating a responsive layout with Tailwind CSS
Implementing Privy authentication
Database design and integration with Drizzle ORM
Building interactive UI components
Deploying your Next.js application
⭐ Key Technologies:
Next.js 14: https://nextjs.org/
Drizzle ORM: https://orm.drizzle.team/
TailwindCSS: https://tailwindcss.com/
Google Gemini AI: https://ai.google.dev/
Web3Auth: https://web3auth.io/
Neon Database: https://neon.tech/
Web3Storgage: https://old.web3.storage/products/web...
📚 Materials/References:
DevvAI - https://devv.ai/
Deployed Website URL: https://htt3.netlify.app/dashboard
GitHub Repo (give it a star ⭐): https://github.com/mendsalbert/http3/
README (assets & code): https://github.com/mendsalbert/http3/
GoogleAIStudio: https://aistudio.google.com/app/apikey
BTTC Testnet Tokens: https://testfaucet.bt.io/#/
Chainlist: https://chainlist.org/?search=bttc&te...
Hardhat Config: https://hardhat.org/hardhat-runner/do...
Drizzle ORM: https://orm.drizzle.team/docs/get-sta...
PrivyAuthentication:https://docs.privy.io/guide/react/qui...
Web3Storage: https://web3.storage/docs/how-to/crea...
Drawio Diagram Documents:https://app.eraser.io/workspace/egQE4...
Metamask Chrome Extension: https://chromewebstore.google.com/det...
👋 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:47 - demo
00:03:59 - Devv.ai
00:05:00 - IPFS & static webhosting architecture
00:11:50 - setup & home page
00:30:47 - navbar + clerk authentication
00:42:13 - database setup
00:47:33 - navbar cont'd
01:16:25 - smart contract
01:43:18 - dashboard
02:52:16 - hosting website + conclusion
💼 Business inquiries: albert.k.mends@gmail.com
👨🏽💻 Tools and Tech Stack
React JS, Next.js, TailwindCSS, Typescript, Preline, OpenAI API, Tabler Icon, JavaScript, Gemini AI, Drizzle ORM, Shadcn, Neon Console, Nextjs14, hardhat, web3, blockchain
Whether you're new to React.js , NextJs or looking to enhance your skills, this tutorial covers everything from basic setup to advanced features. Learn how to leverage the power of React.js for building scalable, performant web applications.
Subscribe for more React.js tutorials, web development tips, and full stack development guidance!
#ReactJS #WebDevelopment #AIinHealthcare #FullStackDevelopment #TypeScript #TailwindCSS #JavaScript #CodingTutorial #nextjs #gemini #openai #ai
