feat: setup environment variables configuration

.env.example

@@ -0,0 +1,10 @@
+# API Configuration
+VITE_API_BASE_URL=https://api.stellaraid.example.com
+
+# Stellar Network Configuration
+# Options: testnet, mainnet
+VITE_STELLAR_NETWORK=testnet
+
+# Smart Contract IDs
+VITE_CAMPAIGN_CONTRACT_ID=
+VITE_DONATION_CONTRACT_ID=

eslint.config.js

@@ -2,17 +2,11 @@ import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
-import { defineConfig, globalIgnores } from 'eslint/config'
 
-export default defineConfig([
-  globalIgnores(['dist']),
+export default [
+  { ignores: ['dist'] },
   {
     files: ['**/*.{js,jsx}'],
-    extends: [
-      js.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-    ],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
@@ -22,8 +16,18 @@ export default defineConfig([
         sourceType: 'module',
       },
     },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
     rules: {
+      ...js.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
       'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
     },
   },
-])
+]

src/config/README.md

@@ -0,0 +1,28 @@
+# Environment Configuration
+
+This directory contains environment variable configuration for the application.
+
+## Usage
+
+Import the environment variables in your components:
+
+```javascript
+import ENV_VARS from '@/config/env';
+
+// Use the variables
+const apiUrl = ENV_VARS.API_BASE_URL;
+const network = ENV_VARS.STELLAR_NETWORK;
+```
+
+## Setup
+
+1. Copy `.env.example` to `.env.local`
+2. Fill in your actual values in `.env.local`
+3. The app will validate required variables on startup
+
+## Available Variables
+
+- `API_BASE_URL` - Base URL for API requests
+- `STELLAR_NETWORK` - Stellar network (testnet/mainnet)
+- `CAMPAIGN_CONTRACT_ID` - Campaign smart contract ID
+- `DONATION_CONTRACT_ID` - Donation smart contract ID

src/config/env.js

@@ -0,0 +1,43 @@
+/**
+ * Environment configuration with validation and fallback defaults
+ */
+
+const ENV_VARS = {
+  API_BASE_URL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000',
+  STELLAR_NETWORK: import.meta.env.VITE_STELLAR_NETWORK || 'testnet',
+  CAMPAIGN_CONTRACT_ID: import.meta.env.VITE_CAMPAIGN_CONTRACT_ID || '',
+  DONATION_CONTRACT_ID: import.meta.env.VITE_DONATION_CONTRACT_ID || '',
+};
+
+// Required environment variables
+const REQUIRED_VARS = [
+  'VITE_API_BASE_URL',
+  'VITE_STELLAR_NETWORK',
+  'VITE_CAMPAIGN_CONTRACT_ID',
+  'VITE_DONATION_CONTRACT_ID',
+];
+
+/**
+ * Validates required environment variables and logs warnings for missing ones
+ */
+export function validateEnv() {
+  const missing = [];
+
+  REQUIRED_VARS.forEach((varName) => {
+    if (!import.meta.env[varName]) {
+      missing.push(varName);
+    }
+  });
+
+  if (missing.length > 0) {
+    console.warn(
+      '⚠️  Missing required environment variables:\n' +
+      missing.map(v => `   - ${v}`).join('\n') +
+      '\n\nPlease check your .env.local file and ensure all required variables are set.'
+    );
+  }
+
+  return missing.length === 0;
+}
+
+export default ENV_VARS;

src/main.jsx

@@ -4,6 +4,10 @@ import './index.css'
 import App from './App.jsx'
 import { Provider } from 'react-redux'
 import { store } from './store'
+import { validateEnv } from './config/env'
+
+// Validate environment variables on startup
+validateEnv()
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>