Develop

[TheCoderSingh]

This pull request introduces several key features and improvements to the project, focusing on setting up state management, and UI components, and optimizing the code structure.

Key Changes:

• Redux Setup: Integrated Redux Toolkit for state management.
• Picker Component: Implemented a reusable picker component for UI interactions.
• Header Improvements: Fixed header shadow issues and created a features/matchHeader component.
• UI Enhancements:
  • Built a hardcoded homepage UI and adjusted header height.
  • Created a dedicated LinkBar and RoundedButton component for better reusability.
  • Designed the matches page UI.
  • Developed an initial version of the events UI.
  • Created temporary UI for profile and settings screens.
• Code Optimization & Cleanup:
  • Reorganized the codebase for better maintainability.
  • Standardized shadow styles and fixed casing/path issues.
  • Added colors to the Tailwind configuration.
• Assets & Icons:
  • Switched to a new icon set and added support for .svg files.
  • Removed unused assets (e.g., construction.png).
• Mock Data Integration:
  • Added mock user data and connected it to the frontend.
  • Organized mock data and introduced an interface for structured data handling.

[shadmanh123]

It would be a good idea to extract styles and inline functions outside the MatchHeader component to prevent unnecessary re-renders. This improves performance by ensuring that these objects are not recreated on every render.

[TheCoderSingh]

Do you mean extract color codes to a separate file? And what inline functions?

[shadmanh123]

I was tripping when I said inline functions 😅. However, the inline boxShadow object is still being recreated on every render, which could lead to unnecessary re-renders. It would be better to move this logic outside the component into a separate function (getBoxShadow) above the const MatchHeader to ensure better performance and maintainability.

[shadmanh123]

Ensure the store configuration and state types are properly defined. Also add reducers to the reducer object and define the state types for better type safety.

[shadmanh123]

Define types for component props, even if there are no props, use FC (Function Component) type for better type safety.

[shadmanh123]

It would be good to extract styles and inline functions outside the component to prevent unnecessary re-renders. This improves performance by ensuring that these objects are not recreated on every render.