🌟 We are Open Source! Check out our repository on GitHub

Solid.js Project Structure

A scalable and maintainable folder structure for Solid.js applications

File Structure

  • src
    • index.tsx
    • App.tsx
    • components
      • ui
        • Button.tsx
        • Input.tsx
        • Modal.tsx
      • layout
        • Header.tsx
        • Footer.tsx
        • Sidebar.tsx
      • features
        • AuthForm.tsx
        • UserProfile.tsx
    • pages
      • Home.tsx
      • About.tsx
      • Dashboard.tsx
      • Settings.tsx
    • stores
      • counter.ts
      • user.ts
      • theme.ts
      • settings.ts
    • assets
      • styles
        • index.css
        • variables.css
        • components.css
      • images
        • logo.svg
    • utils
      • api.ts
      • helpers.ts
      • validation.ts
      • formatting.ts
    • types
      • api.ts
      • user.ts
      • common.ts
    • hooks
      • useAuth.ts
      • useFetch.ts
      • useLocalStorage.ts
  • tests
    • components
    • utils
    • setup.ts
  • index.html
  • vite.config.ts
  • package.json
  • tsconfig.json
  • .env
  • .gitignore
  • README.md

Directory Structure Explanation

src/components/ui/

Contains base UI components that form the foundation of the application's design system.

components/ui/Button.tsx

A reusable button component with various styles and states for consistent UI.

components/ui/Input.tsx

A form input component with validation and styling capabilities.

components/ui/Modal.tsx

A modal component for displaying overlay content and dialogs.

src/components/layout/

Contains layout components that define the structure and arrangement of pages.

src/components/features/

Contains complex components that implement specific business logic and features.

src/pages/

Contains all page components representing different views in the application.

pages/Dashboard.tsx

A dashboard page component typically showing user-specific data and analytics.

pages/Settings.tsx

A settings page component for user preferences and application configuration.

src/stores/

Contains Solid.js stores for managing global application state using reactive primitives.

stores/theme.ts

A store for managing theme preferences and dark/light mode switching.

stores/settings.ts

A store for managing application-wide settings and user preferences.

src/assets/styles/

Organized CSS files for different aspects of the application styling.

assets/styles/components.css

CSS styles specific to components, following a modular approach to styling.

src/types/

Contains TypeScript type definitions and interfaces used throughout the application.

types/api.ts

Type definitions for API requests, responses, and related data structures.

types/user.ts

Type definitions for user-related data structures and interfaces.

types/common.ts

Common type definitions used across multiple parts of the application.

src/hooks/

Contains custom hooks (composable functions) that encapsulate reusable logic.

hooks/useAuth.ts

A custom hook for handling authentication logic and state management.

hooks/useFetch.ts

A custom hook for making HTTP requests with loading and error states.

hooks/useLocalStorage.ts

A custom hook for managing localStorage with reactive updates.

src/utils/validation.ts

Utility functions for form validation and data validation throughout the application.

src/utils/formatting.ts

Utility functions for formatting dates, numbers, and other display values.

tests/

Contains test files for components, utilities, and other application logic.

tests/setup.ts

Test setup configuration for testing framework initialization and global test utilities.

.env

Environment variables file for storing configuration values and API keys.