APP

Documentation

Developer Guide

Project Structure

The application follows a structured directory layout that adheres to Remix v2 conventions while organizing code for maintainability and scalability:

├── app/                       # Application code
│   ├── components/            # Reusable React components
│   │   ├── header.tsx         # Site navigation header
│   │   ├── footer.tsx         # Site footer
│   │   ├── JobCard.tsx        # Job listing card component
│   │   ├── JobAlert.tsx       # Job notification component
│   │   ├── LiveChat.tsx       # Real-time chat functionality
│   │   ├── MetricCard.tsx     # Dashboard analytics display
│   │   └── StripeCheckoutForm.tsx # Payment processing UI
│   ├── entry.client.tsx       # Client-side entry point
│   ├── entry.server.tsx       # Server-side rendering setup
│   ├── lib/                   # Core libraries and utilities
│   │   ├── repositories/      # Data access layer
│   │   ├── services/          # Business logic services
│   │   ├── validation/        # Input validation
│   │   ├── d1-sdk.tsx         # Cloudflare D1 database utilities
│   │   ├── jwt.tsx            # JWT token handling
│   │   └── kv-sdk.tsx         # Cloudflare KV storage utilities
│   ├── routes/                # Remix routes (pages)
│   ├── root.tsx               # Root layout component
│   ├── styles/                # CSS and styling
│   ├── tailwind.css           # Tailwind configuration
│   └── types/                 # TypeScript type definitions
├── db/                        # Database schema and migrations
├── email-worker/              # Cloudflare Worker for email processing
├── public/                    # Static assets
└── test/                      # Test files

Key Directories

app/components/

Contains reusable React components that are shared across multiple routes. These components are organized by functionality and follow a consistent naming convention.

app/lib/

Houses core utilities, services, and repositories that implement the business logic of the application:

  • repositories/: Implements the data access layer using the repository pattern
  • services/: Contains business logic services that orchestrate operations across repositories
  • validation/: Provides input validation utilities and schemas

app/routes/

Contains all the Remix routes that define the application's URL structure and page components. Routes follow Remix v2 naming conventions:

  • Nested routes use the dot notation (e.g., employers.dashboard.tsx)
  • Dynamic parameters use the $ prefix (e.g., job.$jobId.tsx)
  • Index routes use the _index suffix (e.g., docs._index.tsx)
  • Nested optional segments use underscores (e.g., admin.messaging.contact_.$id.tsx)

db/

Contains database schema definitions and migration scripts. The schema.sql file defines the complete database structure used by Cloudflare D1.

Routing Convention

In Remix v2, there is a specific convention for route file naming and URL structure for nested routes:

  1. File Naming Convention: Use underscores in file names to indicate nested routes. Example: admin.messaging.contact_.$id.tsx
  2. URL Structure: The URL does not include the underscore. Example: /admin/messaging/contact/{id}

This convention helps Remix properly handle deeply nested routes while maintaining clean URLs.