How sahrior/cvision-ai works
1. Overall shape
- This is a React Router full-stack app using the React Router SSR template.
- The architecture is route-driven: each page lives in app/routes/*, with shared layout and shell code in app/root.tsx.
- The repo is TypeScript-first and built with Vite; the README indicates the build produces separate client and server outputs.
2. Product/domain focus
- The file names strongly suggest a resume upload + ATS scoring/analysis workflow.
- The main user journey appears to be: authenticate, upload a resume, view an analyzed resume report, and optionally wipe/reset stored data.
3. Route layer as the primary boundary
- app/routes/home.tsx, Upload.tsx, resume.tsx, auth.tsx, and wipe.tsx are the main application entry points.
- In React Router terms, these route modules are where data loading, mutations, and page-specific composition likely happen.
- app/routes.ts defines the route structure and navigation boundaries.
4. Shared UI composition
- The app/components folder contains the reusable presentation pieces for the resume-analysis UI:
- FileUploader for selecting/submitting resume files
- ResumeCard, Summary, Details for report display
- ATS, ScoreBadge, ScoreCircle, ScoreGauge for scoring visualization
- Accordion for expandable sections
- Navbar for top-level navigation
- These are mostly view components, keeping the page routes thin and focused on orchestration.
5. Processing and file transformation
- app/lib/pdf2img.ts is an important processing boundary: it suggests uploaded PDF resumes are converted to images, likely for previewing or analysis.
- This implies the app handles both raw document input and a derived visual representation before rendering the report.
6. External service integration
- app/lib/puter.ts plus types/puter.d.ts indicate a dedicated integration layer for Puter.
- That makes Puter a likely external dependency for storage, auth, or backend-like capabilities.
- Architecturally, this is the main seam between the app’s UI/routes and an external persistence/auth service.
7. Cross-cutting utilities and domain constants
- app/lib/utils.ts, constants/index.ts, and types/index.d.ts centralize shared logic, constants, and domain typings.
- This keeps route modules and components from duplicating formatting, scoring thresholds, labels, or data shapes.
8. Authentication and reset flows
- The presence of auth.tsx and wipe.tsx suggests the app supports session establishment and a full data reset path.
- These are likely side-effect-heavy routes/mutations rather than purely presentational screens.
9. Static assets and branding
- public/icons and public/images hold static assets used by the UI.
- app/app.css provides app-wide styling, with the README noting TailwindCSS is configured in the template.
10. Runtime and deployment boundary
- The project is designed to run both locally with HMR via Vite and in production as a Node-based SSR app.
- The Dockerfile and .dockerignore show first-class container deployment support, matching the README’s Docker deployment path.
11. How the data likely flows
- User interaction starts in a route page, usually via FileUploader.
- The uploaded resume is processed through route-level logic and pdf2img as needed.
- App state/report data is then rendered by the scoring and summary components.
- Persistent state or user/session data likely goes through the Puter integration layer.
- wipe provides the cleanup path to clear that stored state.
12. Architecture summary for diagramming
- Draw this as a route-centric SSR React app with:
- a route/layout layer
- a reusable component layer
- a small processing/util layer
- an external Puter integration boundary
- static assets and deployment/runtime packaging around it
- The dominant domain flow is resume upload → processing/scoring → report display → optional reset.
Main entry points: resume.tsx Resume report · routes.ts Route map · Upload.tsx Upload · root.tsx Root shell
Components 24
App Shell
React Router SSR application, routes, and shared UI composition.
- Root shell · Application-wide shell and providers for the React Router app.
app/root.tsx - Route map · Defines the app's route structure and navigation boundaries.
app/routes.ts - Navbar · Top-level navigation and shared page chrome.
app/components/Navbar.tsx
Resume Workflow
User-facing resume upload, scoring, report, authentication, and reset flows.
- Home · Landing or primary entry route for the app.
app/routes/home.tsx - Upload · Resume submission and upload orchestration route.
app/routes/Upload.tsx - Resume report · Resume analysis report view and page-level composition.
app/routes/resume.tsx - Auth · Authentication and session establishment flow.
app/routes/auth.tsx - Wipe · Reset or cleanup flow for stored application data.
app/routes/wipe.tsx - File uploader · File selection and submission UI for resume uploads.
app/components/FileUploader.tsx - Report card · Primary resume report container used to present analysis results.
app/components/ResumeCard.tsx - Summary · High-level summary content for the analyzed resume.
app/components/Summary.tsx - Details · Expanded detail sections for the resume analysis.
app/components/Details.tsx - ATS score · ATS-oriented scoring and evaluation display.
app/components/ATS.tsx - Score widgets · ScoreBadge, ScoreCircle, and ScoreGauge for score presentation.
app/components/ScoreBadge.tsx - Accordion · Expandable section control used by report views.
app/components/Accordion.tsx
Shared Logic
Processing, integration, utilities, constants, and shared types.
- PDF to image · Transforms uploaded PDF resumes into images for preview or analysis.
app/lib/pdf2img.ts - Puter bridge · External service integration for storage, auth, or backend-like capabilities.
app/lib/puter.ts - Utilities · Common helper functions used across routes and components.
app/lib/utils.ts - Constants · Shared domain constants and thresholds.
constants/index.ts - Types · Shared TypeScript declarations for app and service data shapes.
types/index.d.ts - Puter types · Type declarations for the Puter integration.
types/puter.d.ts
Runtime & Assets
Build, deployment, and static asset boundaries.
- App styles · Global styling for the application shell and UI.
app/app.css - Static assets · Icons and images used by the user interface.
public - Build setup · Vite, React Router config, TypeScript config, and container packaging for SSR deployment.
vite.config.ts
Connections 28
- Route map → Root shell: mounts · Route structure is composed beneath the root shell.
- Root shell → Navbar: renders · The shell provides shared navigation chrome.
- Route map → Home: includes · Primary app route.
- Route map → Upload: includes · Upload flow route.
- Route map → Resume report: includes · Report route.
- Route map → Auth: includes · Authentication route.
- Route map → Wipe: includes · Reset route.
- Upload → File uploader: uses · Upload page centers on file submission UI.
- Upload → PDF to image: processes · Uploaded PDFs are transformed for downstream use.
- Upload → Puter bridge: persists · Upload flow likely stores or hands off resume data through Puter.
- Resume report → Report card: renders · Report route composes the main result container.
- Resume report → Summary: renders · Shows high-level analysis summary.
- Resume report → Details: renders · Shows expanded analysis details.
- Resume report → ATS score: shows · Displays ATS-style evaluation.
- Resume report → Score widgets: visualizes · Uses score widgets to communicate scoring.
- Resume report → Accordion: expands · Report sections can be expanded or collapsed.
- Auth → Puter bridge: authenticates · Authentication is likely delegated through the external service boundary.
- Wipe → Puter bridge: clears · Reset flow removes stored state or session data.
- Upload → Utilities: shares · Route logic reuses shared helper functions.
- Resume report → Utilities: shares · Report rendering relies on shared helpers.
- Resume report → Constants: uses · Scoring and labels depend on shared constants.
- Upload → Types: types · Upload flow uses shared domain types.
- Resume report → Types: types · Report data is shaped by shared types.
- Puter bridge → Puter types: typed by · Service integration has dedicated declarations.
- Root shell → App styles: loads · Global styles apply at the app shell level.
- Root shell → Static assets: references · UI shell can consume static assets.
- Build setup → Root shell: builds · Tooling compiles the SSR app entry.
- Build setup → Route map: builds · Tooling includes route-based app structure.