A decentralized project management platform built on Avalanche, designed to facilitate secure and transparent collaboration between clients and developers. The platform uses smart contracts to manage project milestones, payments, and deliverables.
- Frontend Framework: React 18 with TypeScript
- Styling: Tailwind CSS
- Blockchain: Avalanche (Fuji Testnet)
- Smart Contract Interaction: ethers.js
- Icons: Lucide React
- Development Environment: StackBlitz WebContainer Technology
src/
├── components/
│ └── Layout.tsx # Main application layout with navigation
├── contexts/
│ ├── ThemeContext.tsx # Dark/light mode management
│ └── WalletContext.tsx # Avalanche wallet integration
├── pages/
│ ├── CreateProject.tsx # Project creation form
│ ├── Dashboard.tsx # Main project overview
│ ├── Profile.tsx # User profile management
│ └── ProjectDetails.tsx # Individual project view
└── main.tsx # Application entry point
- Seamless connection to MetaMask
- Automatic network switching to Avalanche Fuji Testnet
- Real-time balance and network status updates
- Create and manage blockchain-based projects
- Define project milestones with specific deliverables
- Set milestone budgets in AVAX
- Track project progress and completion status
- Client role for project creation and funding
- Developer role for milestone completion and proof submission
- Dynamic role switching capability
- Full dark mode implementation
- System preference detection
- Persistent theme selection
This project is developed using StackBlitz's WebContainer technology, providing:
- In-browser development environment
- Real-time collaboration capabilities
- Instant preview updates
- Built-in terminal and file system
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewThe platform operates on the Avalanche Fuji Testnet with the following configurations:
- Network Name: Avalanche Fuji Testnet
- Chain ID: 0xA869
- RPC URL: https://api.avax-test.network/ext/bc/C/rpc
- Block Explorer: https://testnet.snowtrace.io/
- Milestone funding and release
- Project state management
- Automated payment distribution
- Transaction verification
- Secure wallet connection handling
- Role-based access control
- Transaction signing confirmation
- Network validation checks
- Responsive navigation with mobile support
- Interactive project cards
- Milestone progress tracking
- Transaction history viewer
- Profile management interface
- Custom Tailwind configuration
- Dark mode optimization
- Consistent color palette
- Responsive design patterns
- Clone the repository
- Install dependencies:
npm install
- Start the development server:
npm run dev
- Connect your MetaMask wallet
- Switch to Avalanche Fuji Testnet
The application is fully responsive with:
- Mobile-first approach
- Tablet optimization
- Desktop layouts
- Dynamic navigation patterns
- React Context API for global state
- Wallet context for blockchain interaction
- Theme context for appearance management
- Component-level state for UI interactions
This project leverages StackBlitz's WebContainer technology for development:
- Open the project in StackBlitz
- Connect to your GitHub repository
- Make changes in the browser-based IDE
- Preview changes in real-time
- Commit and push directly from StackBlitz
- No local setup required
- Instant dependency installation
- Real-time preview
- Collaborative features
- Built-in version control
Key dependencies include:
react: ^18.3.1react-router-dom: ^6.22.3ethers: ^6.11.1@avalabs/avalanchejs: ^3.17.0lucide-react: ^0.344.0tailwindcss: ^3.4.1
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.