[Frontend]: Frontend Repository Restructuring and Enhancement #76
Description
Frontend Repository Restructuring and Enhancement
Issue Description
The PrediFi frontend repository requires comprehensive restructuring to meet modern frontend development standards and improve user experience. The current implementation has several structural and functional issues that need to be addressed.
Current Issues
Repository Structure
- Frontend repository does not follow standard frontend project organization
- Components, utilities, and services are not properly organized
- Inconsistent file naming and folder structure
Data Management
- No centralized state management system in place
- Inefficient client-side data handling across components
- Lack of proper data flow between different parts of the application
UI/UX Problems
- Dead links throughout the application
- Missing loading states when fetching data
- Static data displayed instead of dynamic on-chain data
- Non-functional buttons and interactive elements
- Poor user experience due to lack of feedback mechanisms
Specific Route Issues
- Pool Market route (
/dashboard/pool-market) currently displays static data - Toggle functionality not implemented or descriptive
- Missing pool creation and update event listeners
Tasks to Complete
Repository Restructuring
- Reorganize project structure to follow React/Next.js best practices
- Implement proper folder hierarchy for components, pages, hooks, utils, and services
- Standardize file naming conventions
- Fix all dead links across the application
State Management Implementation
- Choose and implement either Redux or React Context API for global state management
- Create efficient data flow patterns across the DApp
- Implement proper error handling and loading states
Route Optimization
- Review and restructure all current routes
- Ensure each route follows consistent patterns and standards
- Implement proper navigation and routing mechanisms
Pool Market Enhancement
- Replace static data with dynamic on-chain data using existing fetch functions
- Implement functional toggle button (rename for better UX)
- Add card/list view options for pool display
- Create event listeners for pool creation and updates
- Ensure real-time updates reflect in the UI
UI/UX Improvements
- Add loading states for all data fetching operations
- Implement proper error handling and user feedback
- Fix broken UI elements based on Figma design
- Ensure all buttons and interactive elements are functional
- Integrate on-chain data fetching for all relevant sections
Event Handling
- Implement event listeners for pool-related actions
- Create mechanisms to reflect real-time updates
- Ensure smooth user experience with proper feedback
Design Reference
Figma Design: https://www.figma.com/design/QMi4SBZnJ7HkXJxrW8pcNC/PredFI?node-id=0-1&p=f&t=2tilnQKpAla41HC0-0
Acceptance Criteria
- Repository follows standard frontend project structure
- Dead links are identified and fixed
- Loading states implemented for all data fetching operations
- Global state management system (Redux or Context API) implemented
- All routes properly restructured and functional
- Pool Market route displays dynamic on-chain data
- Toggle functionality implemented with descriptive naming
- Event listeners for pool operations working correctly
- UI matches Figma design specifications
- All buttons and interactive elements functional
- Real-time updates working properly
- Good user experience with proper feedback mechanisms
Priority
High - This restructuring is essential for the application's maintainability, scalability, and user experience.
Dependencies
- Access to existing pool fetching functions
- Figma design file for UI reference
- On-chain data integration requirements