A multilingual web platform for Grupo Raia with comprehensive localization support.
Experience the platform in action:
The Grupo Raia Web Client is a comprehensive React + TypeScript solution designed for:
- Multilingual Support: Complete i18n implementation with content management
- Modern Tech Stack: React 19 + TypeScript + Vite for optimal performance
- Mock Data: Currently uses MSW (Mock Service Worker) for data, pending backend implementation
- Scalable Infrastructure: Built for cloud deployment with automated CI/CD
- Key Features
- Architecture
- Internationalization
- Getting Started
- Development
- Deployment
- Documentation
- Contributing
- Comprehensive Internationalization: Static UI translations + dynamic content management
- Mock Data Support: MSW-based data mocking for development and production
- Advanced Theming: Customizable themes with dark/light mode support
- Enterprise-grade Routing: Type-safe routing with SEO metadata and lazy loading
- Modern Tech Stack: React 19 + TypeScript + Vite for optimal performance
- Automated CI/CD: GitHub Actions with semantic versioning and deployment automation
- Quality Assurance: ESLint, Prettier, Vitest with comprehensive testing suite
- Development Tools: MSW for API mocking, debug utilities
- Security: BlackBox file encryption for sensitive configuration
- Performance: Code splitting, lazy loading, and optimized caching strategies
- Professional Pages: Home, About, Services, Projects, Blog, Contact, Team
- Content Showcase: Project portfolios, team profiles, service descriptions
- Partner Integration: Partner logos and information display
- Contact Management: Multi-channel contact forms and information
- SEO Optimization: Helmet-based metadata management
- Frontend: React 19, TypeScript, Material-UI, Framer Motion
- Routing: React Router with type-safe navigation
- State Management: React Context + TanStack Query
- Internationalization: i18next with content support
- Data: Mock Service Worker (MSW) for API mocking
- Development: Vite, MSW, Vitest, ESLint, Prettier
- Deployment: GitHub Actions, automated versioning
- Supported Languages: English, Spanish, Portuguese (extensible)
- Translation Files: JSON-based with hierarchical organization
- Utilities: Type-safe translation functions with fallbacks
- Development: Missing translation detection and debugging
- Mock Data: Language-specific content in mock data
- Fallback Strategy: Automatic fallback to English when translations unavailable
- MSW Integration: Mock multilingual responses for development
- Persistent: Language preference maintained across navigation
- Fallback: Graceful degradation when content unavailable
- Node.js 18+
- npm or yarn
- Git
-
Clone the Repository
git clone https://github.com/gruporaia/Raia-Web-Client.git cd Raia-Web-Client -
Install Dependencies
npm install
-
Initialize MSW (Mock Service Worker)
npx msw init ./public --save
-
Start Development Server
npm run dev
-
Access the Application
http://localhost:3000
Create a .env file for your environment:
# API Configuration
VITE_API_URL=https://demo.example.com/mock
VITE_USE_MOCK_DATA=true
# Feature Flags
VITE_ENABLE_NEWSLETTER=true
# Form Emails
VITE_FORM_DEFAULT_EMAIL=contato@grupo-raia.org
VITE_FORM_CONTACT_EMAIL=contato@grupo-raia.org
VITE_FORM_TEAMJOIN_EMAIL=contato@grupo-raia.orgsrc/
├── components/ # Reusable UI components
│ ├── ui/ # Basic UI components
│ ├── content/ # Content-specific components
│ └── translation/ # Translation utilities
├── context/ # React contexts (Theme, Language)
├── core/ # Core utilities
├── hooks/ # Custom React hooks
├── i18n/ # Internationalization
│ ├── locales/ # Translation files
│ └── msw/ # MSW handlers for i18n
├── pages/ # Page components
├── routes/ # Routing configuration
├── services/ # API services and data fetching
├── theme/ # Theme configuration
└── utils/ # Utility functions
# Development
npm run dev # Start development server
npm run dev:prod # Start in production mode
# Building
npm run build # Build for production
npm run build:mocked # Build with mocked data
npm run preview # Preview production build
# Code Quality
npm run lint # Run ESLint
npm run lint:fix # Fix ESLint issues
npm run format # Format with Prettier
npm run format:check # Check formatting
# Testing
npm run test # Run tests
npm run test:coverage # Generate coverage report
npm run test:ui # Open Vitest UI
# Utilities
npm run clean:logs:check # Check for console.log statements
npm run clean:logs:fix # Replace console.log with debugLog "primary": "#1976d2",
"secondary": "#dc004e"
},
"features": {
"newsletter": true,
"blog": true,
"analytics": true
},
"contact": {
"email": "info@newcompany.com",
"phone": "+1234567890"
}
}
2. **Add Content** (projects, team, services)
3. **Test Locally**
```bash
npm run dev -- --tenant=newcompany
-
Create Translation Files
src/i18n/locales/de/ ├── index.ts ├── common.json ├── navigation.json └── screens/ ├── home.json ├── about.json └── ... -
Update Language Context
// src/context/LanguageContext.tsx const languages = ['en', 'es', 'pt', 'de'];
-
Add Content to Mock Data Update mock data files with new language content.
The platform uses GitHub Actions for automated deployment:
- Development: Push to
developbranch triggers development deployment - Staging: Create release branch for staging deployment
- Production: Merge to
mainbranch triggers production deployment
# Initialize main branch (for new projects)
bash scripts/init-main-branch.sh
# Build for production
npm run build
# Deploy to hosting provider
# (Configure based on your hosting solution)# Development build with mocks
npm run build:mocked
# Production build
npm run buildFor detailed deployment information, see docs/pipeline.md.
Comprehensive documentation is available in the docs/ directory:
- Architecture Overview - System design and structure
- Tenant Architecture - Tenant configuration
- Internationalization - Complete i18n guide
- Data Services - Data layer documentation
- Data Sources - Data source configuration
- Theming System - Theme customization
- Routing System - Navigation and routing
- Component Library - UI components
- Debug System - Development tools
- Environment Variables - Configuration
- CI/CD Pipeline - Deployment processes
- Fork the Repository
- Create Feature Branch
git checkout -b feature/new-feature
- Make Changes
- Run Tests
npm run test npm run lint - Submit Pull Request
- TypeScript: Strict mode enabled
- ESLint: Airbnb configuration with custom rules
- Prettier: Consistent code formatting
- Testing: Vitest with React Testing Library
- Commits: Conventional commit messages
For secure handling of sensitive configuration files, this project uses StackExchange BlackBox:
-
Install BlackBox
git clone https://github.com/StackExchange/blackbox.git cd blackbox sudo make copy-install -
Import GPG Keys (obtain from project maintainer)
# Import public key echo "base64_encoded_public_key" | base64 --decode | gpg --import # Import private key echo "base64_encoded_private_key" | base64 --decode | gpg --import
-
Verify Import
gpg --list-secret-keys
-
Decrypt Project Files
blackbox_decrypt_all_files
- Sensitive configuration stored encrypted in repository
- Environment variables for deployment-specific settings
- Secure handling of form submission endpoints
This project is licensed under the GNU General Public License v3.0 (GPL-3.0).
- Documentation: Complete guides in
/docsdirectory - Issues: GitHub Issues for bug reports and feature requests
- Contact: contato@grupo-raia.org
Built with ❤️ by the Grupo Raia Team
Built with ❤️ by the Rubrion Team
Making technology accessible through open-source innovation