A React-based web application for the COIN100 (C100) cryptocurrency index fund built on the Polygon network.

• Node.js (v18 or higher)
• npm (v9 or higher)
• Git

git clone https://github.com/coin100-dao/coin100Web
cd coin100

npm install

Copy the example environment file and update it with your values:

cp .env.example .env

Required environment variables:

VITE_REACT_API_BASE_URL=
VITE_REACT_APP_DEBUG=false

Run the development server:

npm run dev

The application will be available at http://localhost:5173 (or another port if 5173 is in use).

1. Initialize Husky:

npm run prepare

2. Create .husky/pre-commit:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

3. Make the pre-commit hook executable:

chmod +x .husky/pre-commit

{
  "scripts": {
    "prepare": "husky",
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,scss}\"",
    "lint:css": "stylelint \"src/**/*.{css,scss}\" --fix",
    "lint:js": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --fix",
    "lint": "npm run lint:css && npm run lint:js",
    "build": "tsc --project tsconfig.app.json && vite build",
    "dev": "vite --host 0.0.0.0",
    "preview": "npm run dev && code --new-window --enable-preview"
  }
}

coin100/
├── src/
│   ├── assets/           # Static assets
│   ├── components/       # Reusable components
│   │   └── footer/      # Footer component
│   ├── data/            # Contract ABIs and static data
│   ├── pages/           # Page components
│   │   ├── About.tsx
│   │   └── Dashboard.tsx
│   ├── services/        # API services
│   │   └── api.ts
│   ├── store/           # Redux store
│   │   └── hooks.ts
│   └── vite-env.d.ts    # TypeScript declarations
├── .env.example
├── .eslintrc.js
├── .prettierrc
├── .stylelintrc.js
├── .github/
│   └── workflows/       # GitHub Actions
│       └── master.yml
└── package.json

Create .github/workflows/master.yml:

name: CI/CD Pipeline

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '18'
        
    - name: Install dependencies
      run: npm ci
      
    - name: Run linters
      run: |
        npm run lint:js
        npm run lint:css
        
    - name: Build
      run: npm run build

1. Code Style

   • Use TypeScript for all new files
   • Follow ESLint and Prettier configurations
   • Use functional components with hooks
   • Implement proper error handling

2. Component Structure

   • Keep components small and focused
   • Use proper TypeScript interfaces
   • Implement proper prop validation
   • Follow Material-UI best practices

3. State Management

   • Use Redux for global state
   • Use local state for component-specific state
   • Implement proper error handling in reducers

4. Testing

   • Write unit tests for utilities
   • Write integration tests for components
   • Test error scenarios
   • Maintain good test coverage

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

• Email: [email protected]
• Discord: Join Our Discord
• Reddit: r/Coin100
• X: @Coin100token
• Telegram: @Coin100token
• Github: coin100-dao