> For the complete documentation index, see [llms.txt](https://verifund.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://verifund.gitbook.io/docs/getting-started/frontend-application/setup-and-installation.md). # Setup & Installation This guide will walk you through setting up the Verifund frontend application on your local development environment. ### System Requirements #### Minimum Requirements * **Node.js**: v16.0.0 or later * **npm**: v8.0.0 or later (comes with Node.js) * **Git**: Latest version * **Browser**: Chrome, Firefox, Safari, or Edge (latest versions) #### Recommended Requirements * **Node.js**: v18.0.0 or later * **RAM**: 4GB or more * **Storage**: 2GB free space ### Installation Steps #### 1. Clone the Repository ```bash # Clone the main repository git clone https://github.com/Verifund-Team/verifund-client.git cd verifund-client # Check available branches git branch -a # Switch to development branch (if needed) git checkout develop ``` #### 2. Install Dependencies ```bash # Install all project dependencies npm install # Or using Yarn (if preferred) yarn install # Verify installation npm list --depth=0 ``` #### 3. Environment Configuration Create environment files for different deployment stages: **Development Environment (`.env.development`)** ```env # Application REACT_APP_NAME=Verifund REACT_APP_VERSION=1.0.0 REACT_APP_ENVIRONMENT=development # API Configuration REACT_APP_API_BASE_URL=http://localhost:3001/api REACT_APP_GUARDIAN_API_URL=http://localhost:5000 # Blockchain Configuration REACT_APP_CHAIN_ID=4202 REACT_APP_NETWORK_NAME=Lisk Sepolia Testnet REACT_APP_RPC_URL=https://rpc.seplia-api.lisk.com # Contract Addresses (Lisk Sepolia) REACT_APP_IDRX_ADDRESS=0x31c0C6e0F048d259Cd8597e1e3594F842555b235 REACT_APP_VERIFUND_SBT_ADDRESS=0x388878A2e2c404a2567c070a4C39D9A75EFFeb61 REACT_APP_CAMPAIGN_FACTORY_ADDRESS=0x5fc7BB8359fE43Ad330711708A573b9A502f0534 # IPFS Configuration REACT_APP_IPFS_GATEWAY=https://gateway.pinata.cloud/ipfs/ REACT_APP_PINATA_API_KEY=your_pinata_api_key REACT_APP_PINATA_SECRET_KEY=your_pinata_secret_key # Analytics (Optional) REACT_APP_GA_MEASUREMENT_ID=G-XXXXXXXXXX ``` **Production Environment (`.env.production`)** ```env # Application REACT_APP_NAME=Verifund REACT_APP_VERSION=1.0.0 REACT_APP_ENVIRONMENT=production # API Configuration REACT_APP_API_BASE_URL=https://api.verifund.com/api REACT_APP_GUARDIAN_API_URL=https://guardian.verifund.com # Blockchain Configuration REACT_APP_CHAIN_ID=1135 REACT_APP_NETWORK_NAME=Lisk Mainnet REACT_APP_RPC_URL=https://rpc.api.lisk.com # Contract Addresses (Lisk Mainnet) REACT_APP_IDRX_ADDRESS=0x18Bc5bcC660cf2B9cE3cd51a404aFe1a0cBD3C22 REACT_APP_VERIFUND_SBT_ADDRESS=0x[MAINNET_SBT_ADDRESS] REACT_APP_CAMPAIGN_FACTORY_ADDRESS=0x[MAINNET_FACTORY_ADDRESS] # IPFS Configuration REACT_APP_IPFS_GATEWAY=https://gateway.pinata.cloud/ipfs/ REACT_APP_PINATA_API_KEY=your_production_pinata_api_key REACT_APP_PINATA_SECRET_KEY=your_production_pinata_secret_key # Analytics REACT_APP_GA_MEASUREMENT_ID=G-PRODUCTION-ID ``` #### 4. Install Browser Extensions (Development) For development and testing, install these browser extensions: **MetaMask Wallet** 1. Install [MetaMask](https://metamask.io/) browser extension 2. Create or import wallet 3. Add Lisk Sepolia Testnet: * **Network Name**: Lisk Sepolia Testnet * **RPC URL**: * **Chain ID**: 4202 * **Currency Symbol**: ETH * **Block Explorer**: **React Developer Tools** * Install [React Developer Tools](https://react-devtools-tutorial.vercel.app/) * Install [Redux DevTools](https://extension.remotedev.io/) #### 5. Start Development Server ```bash # Start the development server npm start # The application will open at http://localhost:3000 # The server will automatically reload when you make changes ``` #### 6. Verify Installation After starting the development server, verify the installation: 1. **Check Frontend**: Navigate to `http://localhost:3000` 2. **Check Console**: Open browser developer tools (F12) and check for errors 3. **Test Wallet Connection**: Click "Connect Wallet" and ensure MetaMask connects 4. **Check Network**: Verify the app detects the correct network (Lisk Sepolia) ### Development Scripts ```bash # Start development server npm start # Run tests npm test # Run tests in watch mode npm run test:watch # Run test coverage npm run test:coverage # Build for production npm run build # Analyze bundle size npm run analyze # Lint code npm run lint # Fix linting issues npm run lint:fix # Format code with Prettier npm run format # Type checking (if using TypeScript) npm run type-check ``` ### Project Structure ``` verifund-frontend/ ├── public/ │ ├── index.html │ ├── manifest.json │ └── favicon.ico ├── src/ │ ├── components/ # Reusable UI components │ ├── pages/ # Page components │ ├── hooks/ # Custom React hooks │ ├── services/ # API and blockchain services │ ├── store/ # Redux store and slices │ ├── utils/ # Utility functions │ ├── styles/ # Global styles and themes │ ├── types/ # TypeScript type definitions │ ├── constants/ # Application constants │ └── App.js # Main application component ├── .env.development # Development environment variables ├── .env.production # Production environment variables ├── package.json # Project dependencies and scripts └── README.md # Project documentation ``` ### Troubleshooting #### Common Issues **1. Node Version Conflicts** ```bash # Check Node version node --version # Use Node Version Manager (if installed) nvm use 18 ``` **2. Port Already in Use** ```bash # Kill process on port 3000 npx kill-port 3000 # Or start on different port PORT=3001 npm start ``` **3. MetaMask Connection Issues** * Ensure MetaMask is unlocked * Check if correct network is selected * Clear browser cache and cookies * Disable other wallet extensions **4. CORS Issues** * Ensure backend API allows frontend origin * Check API endpoint URLs in environment variables **5. Build Failures** ```bash # Clear node modules and reinstall rm -rf node_modules package-lock.json npm install # Clear npm cache npm cache clean --force ``` #### Environment-Specific Issues **Development** * Hot reload not working: Restart development server * Changes not reflecting: Check if files are being watched correctly **Production** * Build optimization issues: Check webpack configuration * Environment variables not loading: Verify `.env.production` file ### Next Steps After successful installation, you can: 1. **Explore the Application**: Navigate through different pages and features 2. **Read the Code**: Familiarize yourself with the project structure 3. **Run Tests**: Execute the test suite to ensure everything works 4. **Make Changes**: Start developing new features or fixing bugs 5. **Deploy**: Build and deploy to your preferred hosting platform *** Continue to Architecture Overview for detailed application architecture information.