Skip to main content

​
Introduction

DevJobs is built with a modular component architecture that separates concerns and promotes reusability. All components are React functional components that follow modern best practices.

​
Component Categories

​
Layout Components

  • Header - Application header with navigation and branding
  • Footer - Application footer with copyright information

​
Job Display Components

  • JobCard - Individual job listing card with apply functionality
  • JobListings - Container component that renders a list of job cards

​
Search & Navigation

  • SearchFormSection - Complete search interface with filters
  • Pagination - Page navigation component for job listings

​
Utility Components

  • Loading - Skeleton loading states for job cards
  • Link - React Router wrapper for navigation
  • ErrorBoundary - Error handling wrapper component

​
Design Principles

​
Single Responsibility

Each component has a clear, focused purpose. For example, JobCard handles the display of a single job, while JobListings manages the collection.

​
Composition Over Configuration

Components are designed to work together. The JobListings component uses JobCard internally, promoting consistency.

​
Controlled Components

Interactive components like Pagination and SearchFormSection use callback props (onPageChange, onSearch) to communicate with parent components, keeping state management flexible.

​
Import Patterns

All components are exported from a central index file for clean imports: 
// Import specific components
import { Header, Footer, JobCard } from '@/components'

// Import from individual files (also supported)
import { Header } from '@/components/Header/Header.jsx'

​
File Structure

Components follow a consistent structure: 
components/
├── Header/
│   └── Header.jsx
├── JobCard/
│   ├── JobCard.jsx
│   └── jobCard.module.css
├── Pagination/
│   ├── Pagination.jsx
│   └── Pagination.module.css
└── index.js
Components with styling use CSS modules for scoped styles.

​
Available Components

Header

Application header with navigation and logo

Footer

Simple footer with copyright information

JobCard

Individual job listing card with apply button

JobListings

Container for rendering multiple job cards

Pagination

Page navigation for job listings

SearchFormSection

Search interface with filters

Loading

Skeleton loading states

Link

React Router navigation wrapper

ErrorBoundary

Error handling wrapper

​
Common Patterns

​
Using Job Data

Most components expect job objects with this structure: 
{
  id: "1",
  titulo: "Senior React Developer",
  empresa: "Tech Corp",
  ubicacion: "Remoto",
  descripcion: "We are looking for...",
  data: {
    modalidad: "remoto",
    nivel: "senior",
    technology: "react"
  }
}

​
Event Handling

Components use callback props for events: 
<Pagination 
  currentPage={1}
  totalPages={10}
  onPageChange={(page) => console.log(page)}
/>

<SearchFormSection
  onTextFilter={(text) => console.log(text)}
  onSearch={(filters) => console.log(filters)}
/>

​
Best Practices

  1. Import from index - Use the central @/components import path
  2. Pass required props - Check component documentation for required props
  3. Handle callbacks - Implement callback functions for interactive components
  4. Use ErrorBoundary - Wrap sections of your app to handle errors gracefully
  5. Show loading states - Use the Loading component while fetching data

​
Next Steps

JobCard Component

Learn how to display individual job listings

SearchFormSection

Implement job search functionality

Build docs developers (and LLMs) love

Get started for freeTalk to us