TTT Boldo Website

A modern, responsive corporate website built with React, TypeScript, and SCSS.

Table of Contents

• Project Overview
• Directory Structure
• Component Organization
• Styling Approach
• Testing Strategy
• Key Architecture Decisions
• Getting Started
• Available Scripts

Project Overview

The Boldo project is a React-based website built with TypeScript, SCSS, and follows component-based architecture principles. The site features multiple sections including team members, statistics, company story, blog section, and a call-to-action area.

Directory Structure

• /src
  • /assets — Images and static resources
  • /components
    • /pages — Page-level components
    • /sections — Major content sections
    • /ui — Reusable UI components
  • /utils — Helper functions and constants

This structure was chosen to separate concerns based on component scope and reusability:

• pages: Contains top-level page components that compose sections
• sections: Houses independent content blocks that form pages
• ui: Stores reusable interface components used across the application

This organization creates clear boundaries between page containers, content sections, and reusable elements, making the codebase more maintainable and easier to navigate.

Component Organization

Pattern: Section-Based Modularity

Each major section follows a consistent structure: /SectionName

• SectionName.tsx - Component implementation
• SectionName.scss - Component-specific styles
• SectionName.test.tsx - Unit tests
• index.js - Re-export for clean imports

This pattern was implemented to:

• Encapsulate related code: Keep component logic, styles, and tests co-located
• Support independent testing: Make sections independently testable
• Simplify imports: The index.js barrel exports provide cleaner imports in parent components
• Maintain consistency: Establish a predictable pattern across the codebase

This approach balances component isolation with a coherent overall architecture.

Styling Approach

BEM Methodology with SCSS

.team-section {
  &__header { ... }
  &__title { ... }
}

BEM with SCSS nesting was chosen to:

• Create namespaced class names preventing style collisions
• Make component relationships visually clear in the CSS
• Support the component-based architecture
• Improve maintainability through consistent naming

Responsive Design Strategy.

Implemented mobile-first with consistent breakpoints:

@media (min-width: 768px) { ... }
@media (min-width: 1024px) { ... }

This mobile-first approach ensures:

• Consistent responsive behavior across components
• Minimal CSS specificity issues
• Better performance on mobile devices
• Cleaner media query organization

Testing Strategy

Component Testing

Tests focus on:

• Rendering verification
• Content presence
• Class application
• Responsive behavior

Example:

it("renders the section header with correct text", () => {
  const subtitle = screen.getByText("Our team");
  expect(subtitle).toBeInTheDocument();
  expect(subtitle).toHaveClass("team-section__subtitle");

  const title = screen.getByText("The people behind the work");
  expect(title).toBeInTheDocument();
  expect(title).toHaveClass("team-section__title");
});

This strategy balances comprehensive validation with maintainable tests by:

• Focusing on user-facing functionality rather than implementation details
• Verifying visual structure and content
• Ensuring proper class application for styling
• Using meaningful test descriptions that serve as documentation

Key Architecture Decisions

• CSS Variables for Theming
  • Centralized theme values for consistency.
  • Easier global style updates

:root {
  --dark-blue: #0A2640;
  --green: #65E4A3;
  --gray: #777777;
}

• Component Composition
  • Smaller, focused components
  • Props for configuration
  • Explicit dependencies
• Rem Unit for Accessibility
  • Better support for user fo size preferences
  • Consistent relative sizing across the application

font-size: 1.125rem; 
margin: 1.5rem 0;

This architecture optimizes for maintainability, scalability, and developer experience while ensuring a consistent user interface.

Getting Started

Prerequisites

• Node.js (v14+)
• npm or yarn

Installation

• Clone the repository

git clone https://github.com/your-username/ttt-boldo.git
cd ttt-boldo

• Install dependencies

npm install
# or
yarn

• Start the development server

Scripts

• npm start - Runs the app in development mode
• npm test - Launches the test runner
• npm run build - Builds the app for production
• npm run eject - Ejects from create-react-app