graph LR
Frontend_Presentation_Layer["Frontend Presentation Layer"]
Client_Side_Data_Management["Client-Side Data Management"]
Backend_API["Backend API"]
Data_Persistence_Auth["Data Persistence & Auth"]
Frontend_Presentation_Layer -- "uses" --> Client_Side_Data_Management
Client_Side_Data_Management -- "calls" --> Backend_API
Client_Side_Data_Management -- "interacts with" --> Data_Persistence_Auth
Backend_API -- "uses" --> Data_Persistence_Auth
click Data_Persistence_Auth href "https://github.com/CodeBoarding/GeneratedOnBoardings/blob/main/snd-textmod/Data_Persistence_Auth.md" "Details"
One paragraph explaining the functionality which is represented by this graph. What the main flow is and what is its purpose.
This component is responsible for rendering the entire user interface and handling all user interactions. It is built with Next.js and React and includes all pages, UI components (like ModForm and TextmodCard), and the main application shell. It manages client-side routing and visual state.
Related Classes/Methods:
src/pages/index.tsxsrc/pages/_app.tsxsrc/components/ModForm.tsxsrc/components/TextmodCard.tsxsrc/components/ui/
A logical layer that orchestrates all client-side data operations. Implemented as a collection of custom React hooks (e.g., useTextmodsQuery, useUser), it uses TanStack Query to manage asynchronous state, caching, and data fetching, providing a reactive and efficient connection between the UI and backend services.
Related Classes/Methods:
src/hooks/useTextmodsQuery.tssrc/hooks/useTextmodSearch.tssrc/hooks/useUser.ts
A set of serverless functions deployed as Next.js API routes. This component serves as a secure, lightweight backend proxy that handles requests requiring server-side logic or protected credentials, such as fetching aggregated content lists (top, latest) before querying the database.
Related Classes/Methods:
src/pages/api/mods/latest.tssrc/pages/api/mods/top.ts
Data Persistence & Auth [Expand]
The core Backend-as-a-Service (BaaS) provided by Supabase. This component is responsible for all persistent data storage (user-generated mods) and handles user authentication and session management. All interactions with this service are centralized through a dedicated client module.
Related Classes/Methods:
src/lib/supabaseClient.ts