Project Structure

The structure of the repository is designed to separate concerns and make the codebase more maintainable and scalable. Below is a detailed breakdown of each directory and its purpose:

Agora_frontend_dashboard/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── contexts/
│   ├── hooks/
│   ├── pages/
│   ├── services/
│   ├── utils/
│   ├── App.jsx
│   ├── index.jsx
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── vercel.json
├── vite.config.js

src/

This is the main directory where all the source code of the application resides.

• assets/: Contains static assets such as images, icons, and stylesheets that are used within the application.

• components/: Houses reusable React components for the navigation header, dashboard layout, and Markdown component.

• contexts/: Contains React context providers that manage and distribute state throughout the application. Context is used for global authentication management in the React app.

• hooks/: Custom React hooks are stored here. Hooks are functions that let you use state and other React features in functional components. Custom hooks are used to extract reusable logic from components.

• pages/: Each file in this directory corresponds to a route in the application. These are higher-level components for proposals, forum, and user management that assemble various other components to form a full page.

• routes/: Contains routing structure for the application.

• utils/: Utility functions and helpers that are used throughout the application.

• contracts/: Static ABI of the proposal voting smart contract is stored here.

• App.jsx: The root component of the application. It sets up the routing and layout for the application.

• index.jsx: The entry point for the React application. It renders the App component into the DOM.