The Giveth Analytics Dashboard is a web application that provides data visualization and analytics capabilities for the Giveth ecosystem. It helps track and analyze various metrics and data points related to Giveth's operations and impact.

• Interactive data visualizations using Highcharts
• Date-based filtering and analysis
• Responsive design with styled-components
• Integration with Giveth's UI design system
• Real-time data updates
• Web3 integration using Viem

• Development: https://staging.stats.giveth.io/
• Production: https://stats.giveth.io/

graph TD
    A[Client Browser] --> B[Next.js Frontend]
    B --> C[API Layer]
    C --> D[Data Sources]
    B --> E[Web3/Viem]

• Frontend Framework: Next.js 13
• UI Library: React 18
• Styling: Styled Components, Giveth UI Design System
• Charts: Highcharts
• Web3: Viem
• Language: TypeScript
• Development Tools: ESLint, Prettier

1. User interacts with the dashboard interface
2. Next.js handles client-side routing and data fetching
3. Data is processed and visualized using Highcharts
4. Web3 interactions are managed through Viem
5. UI updates are reflected using React's state management

• Node.js (v16 or higher recommended)
• Yarn package manager
• Git
• Web3 wallet (for blockchain interactions)

1. Clone the repository:

git clone [repository-url]
cd analytics-dashboard

2. Install dependencies:

yarn install

3. Set up environment variables: Create a .env.local file with necessary environment variables (if required)

• The project uses Next.js configuration in next.config.js
• Styling is configured with styled-components
• ESLint and Prettier are configured for code quality

Development mode:

yarn dev

Production build:

yarn build
yarn start

# Add testing commands once implemented

• Code Linting: yarn lint
• Fix Linting Issues: yarn lint:fix

• Development: Local development environment
• [Add staging/production environment details once available]

1. Ensure all dependencies are installed:

yarn install

2. Build the application:

yarn build

3. Start the production server:

yarn start

[Add CI/CD details once implemented]

1. Build Errors

   • Ensure all dependencies are installed
   • Check Node.js version compatibility
   • Verify environment variables are set correctly

2. Styling Issues

   • Check styled-components configuration
   • Verify UI Design System version compatibility

• Use browser developer tools for frontend debugging
• Check Next.js build output for deployment issues
• Enable React Developer Tools for component debugging

[Add contribution guidelines]

UNLICENSED

• Ramin Ramazanpour