Structure of Technologies - jonasyr/gitray GitHub Wiki

   ██████╗ ██╗████████╗██████╗  █████╗ ██╗   ██╗
  ██╔════╝ ██║╚══██╔══╝██╔══██╗██╔══██╗╚██╗ ██╔╝
  ██║  ███╗██║   ██║   ██████╔╝███████║ ╚████╔╝ 
  ██║   ██║██║   ██║   ██╔══██╗██╔══██║  ╚██╔╝  
  ╚██████╔╝██║   ██║   ██║  ██║██║  ██║   ██║   
   ╚═════╝ ╚═╝   ╚═╝   ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝   
    Official Wiki of the GitRay Repository!

---

Table of Contents

• Description
• Structure
  • Frontend Technologies
  • Backend Technologies
  • Unit Testing Technologies
    • Primary Testing Framework
    • Frontend Testing Stack
    • Backend Testing Stack
    • Additional Testing Tools
    • Code Coverage
    • Performance Testing
  • Package Manager
  • Other Tools and Libraries
• Explanation

Description

This is the structure of the frontend and backend technologies, as well as the used package manager and other tools and libraries.

Structure

Frontend Technologies

• React (v19)
  • Component‑based UI library.
  • Chosen for its ecosystem, TypeScript support and seamless HMR via Vite.
• Vite (v6)
  • Next‑gen build tool with native ES module support and ultra‑fast cold starts.
• TypeScript (~5.7)
  • Static typing for early error detection, better refactoring and IDE integration.
• Tailwind CSS (v4)
  • Utility‑first CSS framework for rapid, consistent styling without leaving markup.
• ESLint + Prettier
  • Enforces code quality and consistent formatting across the team.

Backend Technologies

• Node.js + Express (v5)
  • Minimal, flexible HTTP server framework.
  • Chosen for low boilerplate and rich middleware ecosystem.
• TypeScript
  • Ensures type safety end‑to‑end, aligning with front‑end stack.
• simple‑git
  • Programmatic Git operations with familiar API.
• dotenv
  • Manages environment variables securely.
• cors
  • Enables cross‑origin API access.

Unit Testing Technologies

Primary Testing Framework

• Vitest 3.2.3
• Configuration
  • Multi-project setup with separate configurations for frontend and backend.

Frontend Testing Stack

• Test Runner
  • Vitest with React support
• Testing Environment
  • jsdom for DOM simulation
• React Testing
  • @testing-library/react (v14.3.1) - Component testing utilities
  • @testing-library/user-event (v14.6.1) - User interaction simulation
  • @testing-library/jest-dom (v6.6.3) - DOM matchers and assertions
• Test Setup
  • Custom setup file at test-setup.ts with:
    • Automatic cleanup after each test
    • Mock for window.matchMedia
  • React 19 compatibility configuration

Backend Testing Stack

• Test Runner
  • Vitest with Node.js environment
• HTTP Testing
  • supertest (v7.1.0) for API endpoint testing
• Environment
  • Pure Node.js environment
• Timeout
  • 10-second test timeout configuration

Additional Testing Tools

• Mocking
  • Built-in Vitest mocking capabilities vi.mock()
• UI Testing
  • Vitest UI for interactive test running.
• Watch Mode
  • File watching for continuous testing during development.

Code Coverage

• Provider
  • V8 coverage provider (@vitest/coverage-v8)
• Multi-project coverage
  • Separate coverage for frontend and backend
• Coverage merging
  • Uses nyc to merge coverage reports from both projects
• Output formats
  • HTML, LCOV, and text reports
• Exclusions
  • Comprehensive exclusion lists to avoid coverage pollution

Performance Testing

• Framework
  • K6 for load testing
• Features
  • Custom metrics tracking
  • Multiple test scenarios (smoke, stress)
  • HTML reporting capability

Package Manager

• pnpm (v10)
  • Disk‑efficient installs, strict workspace management and fast CLI.

Other Tools and Libraries

• nodemon, ts-node
  • for live‑reload development.
• husky, lint-staged
  • for pre‑commit linting & formatting.
• @eslint/js, eslint-plugin-react-hooks, jsx-a11y
  • for advanced lint rules.
• D3.js / visx (planned)
  • for data visualizations.

Explanation

• Vitest: fast, TypeScript-native and Vite-compatible testing framework.
• Performance & DX: Vite & pnpm speed up feedback loops.
• Type Safety: TypeScript prevents a whole class of runtime errors.
• Ecosystem: React & Express have vast community support.