A production-ready Web3 landing page and portfolio dashboard built with Next.js 16 (App Router), React 19, and TypeScript. Nexus Web3 lets users securely connect an Ethereum wallet, view real-time ETH and USDT balances on Mainnet, and explore a clean, responsive interface with strong UX, accessibility, and SEO. The app uses wagmi + viem for type-safe wallet integration, React Query for Web3 data caching, and is deployed on Vercel.
Project Overview
Nexus Web3 is a modern, portfolio-style Web3 application that focuses on a single, clear goal: connect an Ethereum wallet and show accurate, real-time balances for ETH and USDT on Mainnet. The project was built as a junior frontend Web3 assignment and then polished into a production-quality landing page with a hero section, dashboard, and supporting pages (Features, Security, About, Privacy, Terms). The interface is responsive, accessible, and optimized for SEO with structured data and Open Graph tags. Wallet connections, network state, and balance fetching are handled client-side using wagmi and viem, while deployment is handled via Vercel.
Core Technologies
Built with Next.js 16 (App Router) and React 19 for modern, server-aware React development, using TypeScript for end-to-end type safety. Styling is handled by Tailwind CSS v4 with custom design tokens, while next-themes enables light/dark/system theme switching. Wallet connection and balance fetching are implemented with wagmi and viem, including WalletConnect support and mainnet network checks. @tanstack/react-query powers Web3 data caching and refetch intervals, and the app is deployed on Vercel with optimized metadata, sitemap, and robots configuration for SEO.
Key Features
🗹Connect Wallet flow using wagmi with support for injected wallets and WalletConnect
🗹Real-time ETH and USDT balance display on Ethereum Mainnet with automatic refetching
🗹Wrong network detection with clear UI states and guided prompts to switch to Mainnet
🗹Dashboard layout showing ETH and USDT cards, last updated time, and placeholder actions (Receive, Send, Swap, Buy)
🗹Responsive navigation with active states, mobile slide-in menu, and theme toggle
🗹Supporting pages for Features, Security, About, Privacy, and Terms, written to match the product and explain trust model and data handling
🗹Accessibility-focused UX including skip-to-content link, focus-visible styles, and clear error states
🗹SEO optimization with structured data, Open Graph tags, sitemap, robots rules, and branded social previews
Copyright © 2026 Abiy H Getachew. All rights reserved.