Skip to main content

Rainfall-Learning Project Structure

This document provides a comprehensive overview of the Rainfall-Learning monorepo structure, explaining the purpose and contents of each directory and key files.

Root Directory Overview​

rainfall-learning/
├── .github/                  # GitHub-specific configurations
├── .husky/                   # Git hooks for code quality
├── .vscode/                  # VS Code workspace settings
├── documentation/            # Docusaurus documentation site
├── packages/                 # Monorepo packages
│   ├── backend/              # Node.js/Express API server
│   ├── frontend/             # React/Vite web application
│   └── shared/               # Shared code and types
├── Configuration Files       # Various config files
└── README.md                 # Project documentation

Detailed Directory Structure​

.github/ - GitHub Configuration​

This directory contains all GitHub-specific configurations that control how the repository interacts with GitHub's features.

.github/ISSUE_TEMPLATE/​

Contains markdown templates for different types of issues (bug reports, feature requests, etc.). These templates help maintain consistency when team members create issues and ensure all necessary information is provided upfront.

.github/workflows/​

Houses GitHub Actions workflow files (.yml) that define automated CI/CD pipelines. These workflows include:

  • Running tests on pull requests
  • Building and deploying applications (and this documentation)
  • Running code quality checks (linters)

.github/PULL_REQUEST_TEMPLATE.md​

A markdown template that appears when developers create pull requests. It includes checklists for code review requirements, testing confirmation, and documentation updates.

.husky/ - Git Hooks Management​

Husky enables Git hooks to run scripts before certain Git commands, ensuring code quality standards are met before code is committed or pushed.

.husky/pre-commit​

A shell script that executes before each commit. Runs:

  • Code formatting with Prettier
  • Linting with ESLint
  • Type checking with TypeScript

.vscode/ - Visual Studio Code Configuration​

Contains workspace-specific settings for VS Code, ensuring consistent development experience across the team

documentation/ - Docusaurus Documentation Site​

A complete Docusaurus application for project documentation, accessible to all developers. Includes:

  • Types (interfaces) all automatically complied from main on updates
  • API reference, automatically complied from main on updates
  • Architecture Decisions
  • Folder Structure

documentation/docs/​

Contains all markdown files for documentation pages. Organized by topic:

  • Architecture guides
  • API documentation
  • Team Documents

documentation/docusaurus.config.ts​

Main configuration file for Docusaurus, defining:

  • Site metadata (title, tagline, URL)
  • Theme configuration
  • Plugin settings
  • Navigation structure

documentation/sidebars.ts​

Defines the sidebar navigation structure, controlling how documentation pages are organized and displayed in the navigation menu.

documentation/src/​

Custom React components and pages for the documentation site:

  • src/components/ - Reusable React components for documentation (custom cards, diagrams, interactive examples)
  • src/css/ - Custom CSS modules for styling documentation pages beyond the default theme
  • src/pages/ - Custom pages like the landing page, powered by React rather than markdown

documentation/static/​

Static assets served directly without processing:

  • static/img/ - Images, diagrams, and screenshots used in documentation
  • static/.nojekyll - Prevents GitHub Pages from processing the site with Jekyll

packages/ - Monorepo Packages​

The core of the monorepo structure, containing all application code organized as separate packages.

packages/backend/ - API Server Package​

The Node.js/Express backend service handling all API requests and business logic.

packages/backend/prisma/​

Database configuration and schema:

  • schema.prisma - Defines database models, relationships, and configuration. This is the single source for the database structure.
packages/backend/src/​

Source code organized by responsibility:

  • app.ts - Express application setup including middleware configuration, error handling, and core application settings
  • index.ts - Application entry point that starts the server and initializes services
  • controllers/ - Request handlers that process HTTP requests and return responses. Each controller typically corresponds to a resource (users, posts, etc.)
  • routes/ - API endpoint definitions that map URLs to controller methods. Includes route validation and middleware
  • services/ - Business logic layer containing core application functionality, independent of HTTP concerns
  • scripts/ - Utility scripts for tasks like database seeding, migrations, or data processing
  • transformers/ - Data transformation logic for converting between database models, API responses, and external service formats
  • utils/ - Helper functions and utilities used throughout the backend (validation, formatting, common operations)
  • middleware/ - Contains middleware to check conditions like authentication and error handling
packages/backend/tests/​

Test files organized to mirror the src/ structure, containing unit tests, integration tests, and API tests.

packages/frontend/ - React Web Application​

The main user-facing web application built with React and Vite.

packages/frontend/src/​

React application source code:

  • App.tsx - Root React component that sets up routing, global providers, and application layout
  • App.css - Global styles and CSS variables used throughout the application
  • main.tsx - Application entry point that renders the React app and initializes client-side services
  • assets/ - Static assets like images, fonts, and icons that are processed by Vite
  • components/ - Reusable React components organized by feature or type (buttons, forms, layouts)
  • hooks/ - Custom React hooks for shared logic like API calls, form handling, or state management
  • pages/ - Page-level components that correspond to routes in the application
  • stores/ - State management using Zustand, containing global application state
  • theme/ - Theme configuration including color palettes, typography, and component styling
packages/frontend/public/​

Static files served directly without processing (favicon, manifest.json, robots.txt).

packages/frontend/vite.config.ts​

Vite configuration for development server, build optimization, and plugin settings.

packages/shared/ - Shared Code Package​

Code shared between frontend and backend to ensure consistency.

packages/shared/src/​

Shared source code:

  • constants/ - Shared constant values
  • types/ - TypeScript type definitions and interfaces used by both frontend and backend
  • utils/ - Utility functions that work in both Node.js and browser environments

Configuration Files (Root Level)​

Code Quality & Formatting​

  • .prettierrc - Prettier configuration defining code formatting rules (indentation, quotes, semicolons)
  • .prettierignore - Files and directories Prettier should ignore (generated files, vendor code)
  • eslint.config.ts - ESLint configuration for JavaScript/TypeScript linting rules and code quality standards

TypeScript Configuration​

  • tsconfig.json - Root TypeScript configuration with common compiler options inherited by all packages
  • tsconfig.eslint.json - TypeScript configuration specifically for ESLint to understand the project structure

Package Management​

  • package.json - Root package.json defining workspace configuration, shared dev dependencies, and monorepo scripts
  • package-lock.json - Locked dependency versions ensuring consistent installs across environments

Development Tools​

  • docker-compose.yml - Docker Compose configuration for running the entire application stack locally with services like database, etc.
  • vitest.config.ts - Vitest test runner configuration for unit and integration testing
  • typedoc.json - TypeDoc configuration for generating API documentation from TypeScript code

Documentation​

  • README.md - Main project documentation including setup instructions, architecture overview, and contribution guidelines