Skip to main content

​
Directory Overview

The Resume Builder follows a feature-based organization within the src/ directory: 
src/
├── components/        # React components
│   ├── Editor/       # Form components for editing resume data
│   ├── Preview/      # Preview rendering components
│   ├── ResumeRenderer/ # Template rendering engine
│   └── ui/           # Reusable UI primitives
├── data/             # Static data and fixtures
├── hooks/            # Custom React hooks
├── routes/           # TanStack Router route definitions
├── templates/        # Resume template configurations
├── types/            # TypeScript type definitions
├── router.tsx        # Router configuration
├── routeTree.gen.ts  # Generated route tree (auto-generated)
└── types.ts          # Core type definitions

​
Root Files

​
router.tsx

Router configuration and setup: 
// Creates router instance with generated route tree
export const getRouter = () => {
  const router = createRouter({
    routeTree,
    scrollRestoration: true,
    defaultPreloadStaleTime: 0,
  })
  return router
}

​
types.ts

Core type definitions for the application (100 lines):
  • ResumeData: Main data structure
  • PersonalInfo, Experience, Education, Skill, Project: Resume sections
  • CustomSection, CustomSectionItem: User-defined sections
  • SectionId: Valid section identifiers
  • ResumeTemplate: Template variant type
  • initialResumeData: Default empty resume state

​
routeTree.gen.ts

This file is automatically generated by @tanstack/router-plugin. Do not edit manually.
Generated at build time from files in the routes/ directory.

​
Components Directory

The components/ directory is organized by feature area.

​
Editor Components

components/Editor/ contains form components for editing resume sections: 
// Manages personal information fields:
// - Full name, email, phone
// - Website, LinkedIn, GitHub
// - Location, job title
File count: 6 form components

​
Preview Components

components/Preview/ renders the live resume preview:
  • Preview.tsx: Main preview container component
  • SectionRenderer.tsx: Renders individual resume sections
These components read from the useResume() context and display formatted output.

​
ResumeRenderer Components

components/ResumeRenderer/ contains the template rendering engine:

​
Core Renderers

  • UniversalRenderer.tsx: Template-agnostic rendering engine that applies template configurations
  • SectionRenderer.tsx: Routes to appropriate section component based on section type

​
Section Components

components/ResumeRenderer/sections/ contains specialized renderers:
  • HeaderSection.tsx: Personal information header
  • ExperienceSection.tsx: Work experience timeline
  • EducationSection.tsx: Educational background
  • SkillsSection.tsx: Skills list/grid
  • ProjectsSection.tsx: Project showcases
  • CustomSection.tsx: Custom user-defined sections
Each section component accepts data and applies template-specific styling.

​
UI Components

components/ui/ contains reusable UI primitives:
  • Button.tsx: Styled button component with icon support
  • Card.tsx: Container component with optional title
  • Input.tsx: Form input and textarea components
These components follow a consistent API and styling pattern.

​
Top-Level Components

Components in components/ root:
  • ExportButton.tsx: Exports resume data as JSON
  • ImportButton.tsx: Imports resume data from JSON file
  • SectionOrderEditor.tsx: Drag-and-drop section reordering (uses @dnd-kit)
  • TemplateSelector.tsx: Template switching UI
  • TemplateGenerator.tsx: Template creation utilities

​
Hooks Directory

hooks/ contains custom React hooks:

​
useResume.tsx

Lines: 337 The primary state management hook providing:
  • ResumeProvider: Context provider component
  • useResume(): Hook to access resume state and methods
  • CRUD operations for all resume sections
  • LocalStorage persistence
  • Template selection
Used throughout the application for state access: 
import { useResume } from '../hooks/useResume';

function MyComponent() {
  const { resumeData, updatePersonalInfo } = useResume();
  // ...
}

​
useCustomTemplates.tsx

Manages custom template creation and storage:
  • Template generation from user styles
  • Custom template persistence
  • Template validation

​
Routes Directory

routes/ contains file-based route definitions for TanStack Router:

​
__root.tsx

Lines: 70 Root route component defining:
  • HTML document structure
  • Meta tags and SEO
  • Stylesheet links
  • TanStack DevTools integration
  • Global layout wrapper
export const Route = createRootRoute({
  head: () => ({
    meta: [/* ... */],
    links: [/* ... */],
  }),
  component: RootDocument,
})

​
index.tsx

Lines: 238 Main application route (/) containing:
  • ResumeProvider wrapper
  • Split-view layout (Editor + Preview)
  • Responsive design with mobile modal
  • Print optimization
  • Export/Import buttons
This is the primary user interface for the entire application.

​
Templates Directory

templates/ contains JSON configuration files defining resume visual styles:

​
classic.json

{
  "id": "classic",
  "name": "Classic",
  "description": "A traditional, professional resume layout...",
  "theme": {
    "colors": { /* ... */ },
    "typography": { /* ... */ },
    "spacing": { /* ... */ }
  },
  "layout": { "type": "single-column" },
  "structure": { /* ... */ },
  "sectionVariants": { /* ... */ }
}

​
modern.json

Contemporary design with bold accents and modern typography.

​
minimal.json

Clean, minimalist style with ample whitespace.
You can add new templates by creating additional JSON files following this structure—no code changes required.

​
Data Directory

data/ contains static data and fixtures:
  • demo.punk-songs.ts: Demo/example data (possibly for testing or showcasing)

​
Types Directory

types/ contains additional TypeScript definitions:
  • template.ts: Template-specific type definitions and interfaces
Separated from the main types.ts for better organization.

​
File Naming Conventions

The codebase follows these naming patterns:

​
Components

  • PascalCase.tsx: React components (e.g., PersonalInfoForm.tsx)
  • One component per file
  • File name matches component name

​
Hooks

  • camelCase.tsx: Custom hooks prefixed with use (e.g., useResume.tsx)
  • Hook name matches file name

​
Routes

  • kebab-case.tsx or __special.tsx: Route files
  • __root.tsx: Special root route
  • index.tsx: Index route (/)

​
Types

  • kebab-case.ts: Type definition files (e.g., template.ts)
  • May contain multiple related types

​
Configuration

  • kebab-case.json: Configuration files (e.g., classic.json)
  • Lowercase with hyphens

​
Key Directories Explained

Contains all form components for editing resume data. Each component manages a specific section of the resume (personal info, experience, education, etc.) and uses the useResume() hook to update state.Pattern: Form components accept no props—they read and write directly to context.
The rendering engine that transforms resume data into formatted output. The UniversalRenderer applies template configurations, while section components handle the presentation of each data type.Pattern: Renderer components accept data as props and apply styling based on the selected template.
Template configuration files that define the visual appearance of resumes. Each template is a JSON file with theme, layout, and structure definitions.Pattern: Templates are data-driven—no code changes needed to add new templates.
File-based routing powered by TanStack Router. The __root.tsx defines the document shell, while index.tsx contains the main application.Pattern: File structure maps to URL routes (e.g., routes/about.tsx → /about).

​
Build Artifacts

These files are generated during build and should not be edited:
  • routeTree.gen.ts: Generated route tree
  • dist/: Production build output (not in src/)
  • .vinxi/: Build cache (not in src/)
Never commit generated files to version control. Add them to .gitignore.

​
Import Patterns

Common import patterns throughout the codebase: 
// Hooks
import { useResume } from '../hooks/useResume';

// Components
import { Button } from '../components/ui/Button';
import { Card } from '../components/ui/Card';

// Types
import { ResumeData, Experience } from '../types';
import { TemplateConfig } from '../types/template';

// Router
import { createFileRoute } from '@tanstack/react-router';

// External libraries
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
The project uses vite-tsconfig-paths so you can configure path aliases in tsconfig.json if desired (e.g., @/components instead of ../components).

​
Next Steps

Architecture

Understand the overall architecture

Tech Stack

Explore the technologies used

Build docs developers (and LLMs) love

Get started for freeTalk to us