sandeshsalavi/justly

Purpose and Runtime

This is a Vite-served React/TypeScript single-page application for a legal-services marketplace/workspace: advocate discovery and rankings, hiring, cases, chat, and authenticated user dashboards. Styling and reusable controls use Tailwind and shadcn-ui. The browser entry path is src/main.tsx, which mounts the application defined in src/App.tsx.

Application Composition and Navigation

src/App.tsx is the top-level composition boundary, expected to select page views and shared providers/layout. Page-level feature boundaries are under src/pages/, including public/discovery views (src/pages/Index.tsx, src/pages/Search.tsx, src/pages/Rankings.tsx) and workspace views (src/pages/Dashboard.tsx, src/pages/Cases.tsx, src/pages/Chat.tsx). Shared navigation is centered on src/components/layout/Navbar.tsx, with desktop/mobile/user-menu variants in src/components/layout/navbar/.

Authentication and Profile Gate

Authentication state is owned by the auth context/provider layer: src/contexts/auth/AuthProvider.tsx, src/contexts/auth/useAuthState.tsx, and src/contexts/auth/useAuthOperations.tsx. It exposes auth state and operations to the component tree, while profile-oriented utilities/types separate profile completion from credentials (src/contexts/auth/profileUtils.ts, src/contexts/auth/types.ts). Route/content access is guarded at the UI boundary by src/components/auth/AuthGuard.tsx and src/components/auth/AuthGuardWrapper.tsx; loading and profile setup are represented by src/components/auth/ProfileLoading.tsx and src/pages/ProfileSetup.tsx.

Domain Data Access

Feature hooks form the client-side data boundary for the marketplace/workspace. Advocate retrieval and profile lookup flow through src/hooks/use-advocates.tsx and src/hooks/use-advocate-profile.tsx; case and client-oriented data through src/hooks/use-case-listings.tsx and src/hooks/use-clients.tsx; chat behavior through src/hooks/use-chat.tsx. Pages and feature components consume these hooks rather than directly coupling to persistence, allowing UI features such as rankings and search to remain presentation-focused.

Persistence Integration

The only explicit backend integration in the tree is a MySQL client at src/integrations/mysql/client.ts; environment files (.env, .env.example) likely supply its runtime connection/configuration values. The backend/ directory exists but has no visible contents in this inventory, so no server API contract or deployment runtime can be established from the supplied tree. Treat browser-to-MySQL access and any intermediary backend as a critical boundary to verify before extending data operations.

Feature Modules and Dashboard

The authenticated dashboard is assembled from focused widgets: src/components/dashboard/DashboardOverviewCards.tsx, src/components/dashboard/ActiveCasesList.tsx, and src/components/dashboard/UpcomingEventsList.tsx, rendered by src/pages/Dashboard.tsx. Discovery/ranking presentation is similarly separated into src/pages/Rankings.tsx and src/components/rankings/AdvocateRankCard.tsx. This indicates a flow of hooks → page orchestration → feature cards/lists, with shared UI primitives below.

Presentation System and Delivery

Reusable visual primitives reside in src/components/ui/, with architectural shared elements such as src/components/ui/PageTransition.tsx, src/components/ui/AnimatedContainer.tsx, and src/components/ui/Logo.tsx; shadcn-derived controls are the common interaction layer. Global styles and design configuration are src/index.css, tailwind.config.ts, and components.json. Vite configuration is vite.config.ts; the documented development path is Node/npm with npm run dev, and the README identifies Lovable publishing or Netlify as deployment paths.