π Decentralized Real Estate Platform | Modern Web3 frontend for blockchain-powered property transactions
PropChain Frontend is a cutting-edge React/Next.js application that provides a seamless user interface for interacting with tokenized real estate assets on the blockchain. Our platform offers an intuitive way to browse, invest in, and manage property NFTs through a beautiful, responsive web interface.
Built with modern web technologies and Web3 integration, this frontend serves as the user-facing layer for decentralized real estate transactions, enabling users to connect their wallets, explore property listings, and execute smart contract interactions with ease.
- π Property Discovery: Browse and search tokenized real estate properties with advanced filtering
- π° Wallet Integration: Connect MetaMask, WalletConnect, and other Web3 wallets seamlessly
- π Smart Contract Interaction: Execute property purchases, transfers, and management through intuitive UI
- π Real-Time Data: Live property valuations, market trends, and portfolio analytics
- π Web3 Authentication: Secure wallet-based authentication with multi-network support
- οΏ½ Responsive Design: Mobile-first design that works perfectly on all devices
- π Multi-Chain Support: Switch between Ethereum, Polygon, and BSC networks
- π Portfolio Dashboard: Track your real estate NFT investments and performance
- π Advanced Search: Filter by location, price range, property type, and ROI metrics
- οΏ½οΈ Security First: Hardware wallet support and transaction verification
- β‘ Lightning Fast: Optimized performance with Next.js 15 and React 19
This frontend is designed for:
- Real Estate Investors looking to diversify into blockchain property assets
- Crypto Enthusiasts seeking tangible real-world asset investments
- Property Developers wanting to tokenize their real estate projects
- Real Estate Agents adapting to the digital property marketplace
- DeFi Users exploring real estate as an alternative asset class
Ensure you have the following installed:
- Node.js v18+ (LTS recommended)
- npm, yarn, or pnpm package manager
- Git version control
- Web3 Wallet (MetaMask, Trust Wallet, etc.)
# 1. Clone the repository
git clone https://github.com/MettaChain/PropChain-FrontEnd.git
cd PropChain-FrontEnd
# 2. Install dependencies
npm install
# or
yarn install
# or
pnpm install
# 3. Set up environment variables
cp .env.example .env
# Edit .env with your configuration
# 4. Start development server
npm run dev
# or
yarn dev
# or
pnpm devThe application will be available at http://localhost:3000.
npm run dev # Start development server with hot reload
npm run lint # Run ESLint for code quality checks
npm run type-check # Run TypeScript type checkingnpm run build # Build optimized production bundle
npm run start # Start production server
npm run analyze # Analyze bundle size with webpack-bundle-analyzernpm test # Run unit tests
npm run test:watch # Run tests in watch mode
npm run test:coverage # Generate coverage report
npm run test:e2e # Run end-to-end tests- Ethereum (Mainnet, Sepolia Testnet)
- Polygon (Mainnet, Mumbai Testnet)
- Binance Smart Chain (Mainnet, Testnet)
- Local Development (Hardhat Network)
# API Configuration
NEXT_PUBLIC_API_URL=http://localhost:3001
NEXT_PUBLIC_WS_URL=ws://localhost:3001
# Blockchain
NEXT_PUBLIC_BLOCKCHAIN_NETWORK=sepolia
NEXT_PUBLIC_RPC_URL=https://sepolia.infura.io/v3/YOUR_PROJECT_ID
NEXT_PUBLIC_CHAIN_ID=11155111
# Features
NEXT_PUBLIC_ENABLE_ANALYTICS=true
NEXT_PUBLIC_ENABLE_TESTNET=true
# Third-party Services
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=your_ga_id
NEXT_PUBLIC_SENTRY_DSN=your_sentry_dsn- π Component Library - Reusable UI components and usage examples
- π Web3 Integration - Wallet connection and blockchain interaction guides
- π Deployment Guide - Production deployment best practices
- ποΈ Architecture - Frontend architecture and state management
PropChain-FrontEnd/
βββ π src/
β βββ π app/ # Next.js 15 App Router pages and layouts
β βββ π components/ # Reusable React components
β βββ π hooks/ # Custom React hooks
β βββ π lib/ # Utility functions and configurations
β βββ π store/ # State management (Zustand/Redux)
β βββ π types/ # TypeScript type definitions
β βββ π styles/ # Global styles and Tailwind CSS
βββ π public/ # Static assets (images, icons)
βββ π docs/ # Project documentation
βββ π tests/ # Unit, integration, and E2E tests
βββ π .github/ # CI/CD workflows and issue templates
βββ π scripts/ # Build and deployment scripts
- π€ Contributing Guide - How to contribute effectively
- π Code of Conduct - Community guidelines and standards
- π Issue Templates - Standardized issue reporting
- π‘ Feature Requests - Feature proposal template
- π Backend API - Server-side NestJS application
- π¨ Design System - UI/UX guidelines and design tokens
- π Performance Metrics - Optimization guides and benchmarks
- π Tutorials - Step-by-step development tutorials
- βοΈ Framework: Next.js 15 with App Router - Modern React framework
- π¨ UI Library: React 19 - Latest React with concurrent features
- π Styling: Tailwind CSS 4 - Utility-first CSS framework
- οΏ½ Components: Headless UI + custom components - Accessible UI primitives
- π State: Zustand - Lightweight state management
- π Data Fetching: TanStack Query (React Query) - Server state management
- π Web3: ethers.js + wagmi - Modern Ethereum React hooks
- π Forms: React Hook Form + Zod - Type-safe form handling
- οΏ½ Language: TypeScript 5 - Type-safe JavaScript
- π§ͺ Testing: Jest + Testing Library + Playwright - Comprehensive testing
- οΏ½ Bundling: Next.js built-in webpack - Optimized bundling
- π§ Linting: ESLint + Prettier - Code quality and formatting
- π³ Containerization: Docker - Consistent development environment
- π¨ Design: Tailwind CSS + custom design system - Consistent styling
- οΏ½ Analytics: Google Analytics + Vercel Analytics - User insights
- οΏ½ SEO: Next.js SEO optimizations - Search engine friendly
- β‘ Performance: Next.js optimizations + lazy loading - Fast loading
This project is licensed under the MIT License - see the LICENSE file for complete details.
- π Report Issues: GitHub Issues
- π§ Email Support: frontend@propchain.io
- π Documentation: docs.propchain.io
We welcome contributions! Please read our Contributing Guide to get started.
Quick contribution steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
β Star this repository if it helped you!
Made with β€οΈ by the PropChain Team