🚀 ThinkRED Technologies

<img src="public/assets/logos/thinkRED-np.svg" alt="ThinkRED Logo" width="280" height="120" style="marg###![Vi###

epository Status

](https://github.com/thinkredtech/thinkredtech.github.io/actions)(https://img.shields.io/badge/Vite-6.3+-646CFF?style=flat&logo=vite)

sitory Status

n: 20px 0;" />

Engineering Excellence • Innovation-Led Technology Solutions

🔗 Quick Navigation: 🚀 Quick Start • 📚 Documentation • 💼 Careers • 📊 Live Status

📊 Project Status & Health

Metric	Status	Action
🚀 CI/CD Pipeline		View Workflow
🔒 Security Checks		Security Report
🏥 Repository Health		Health Dashboard
⚡ Performance		Performance Report
📦 Dependencies		Dependency Health

🌟 About ThinkRED

ThinkRED Technologies LLP is a premier engineering-focused technology consultancy that transforms complex technological challenges into elegant solutions. Founded by engineers from Mozilla, Fedora, and Red Hat, we bring open-source innovation and enterprise-grade expertise to businesses worldwide.

🎯 Our Mission

"Simplify Technology & Experience"

✨ Key Highlights

🔧 Modern Stack

### 📊 Repository Status

Latest technologies for blazing performance

🛡️ Enterprise Security

Multi-layer security with industry standards

🤖 AI-Powered UX

Intelligent features for enhanced user experience

🚀 Quick Start

Get up and running in under 2 minutes! ⚡

# 1. 📥 Clone the repository

git clone https://github.com/thinkredtech/thinkredtech.github.io.git
cd thinkredtech.github.io

# 2. 📦 Install dependencies

npm install

# 3. 🚀 Start development server

npm run dev

# 4. 🌐 Open in browser

# Navigate to http://localhost:3000

🔧 Development Commands

Command	Purpose	Usage
`npm run dev`	🔥 Hot reload development	Daily development
`npm run build`	📦 Production build	Deployment prep
`npm run preview`	👀 Preview build locally	Pre-deployment test
`npm run lint`	🔍 Code quality check	Code review
`npm run type-check`	✅ TypeScript validation	Type safety
`npm run format`	💄 Code formatting	Code cleanup
`npm test`	🧪 Run test suite	Quality assurance
`npm run security:validate`	🛡️ CSP validation	Security audit
`npm run security:scan`	🔍 Sensitive data scan	Security scan
`npm run security:build`	🔒 Secure production build	Secure deployment

🔐 Admin Configuration & Deployment

Secure admin password setup for job management functionality

The website includes an admin interface for managing job postings at /admin. For security, this requires environment-based authentication configuration.

🔒 Security Model

Environment Variable Authentication: Admin functionality requires REACT_APP_ADMIN_PASSWORD environment variable to be set. No hardcoded fallbacks are provided for security.

// Secure implementation - AdminJobManagement.tsx
const ADMIN_PASSWORD = process.env.REACT_APP_ADMIN_PASSWORD;

// Fail-safe: Requires proper configuration
if (!ADMIN_PASSWORD) {
  console.error('REACT_APP_ADMIN_PASSWORD environment variable not set');
  // Admin functionality disabled until properly configured
}

🛠️ Local Development Setup

📋 Step-by-Step Configuration

1. Create Environment File

# Copy the example configuration

cp .env.example .env.local

# Generate a secure password (example methods)

openssl rand -base64 24  # macOS/Linux

# Or use a password manager to generate 16+ character password

2. Configure Local Environment

# Edit .env.local (NEVER commit this file)
echo "REACT_APP_ADMIN_PASSWORD=<YOUR_SECURE_PASSWORD>" >> .env.local

3. Verify Setup

# Build with environment variables

npm run build

# Test admin functionality

npm run preview

# Navigate to http://localhost:4173/admin

🚀 Production Deployment

Deployment-specific environment variable configuration

📄 GitHub Pages Deployment

Method: GitHub Actions with environment secrets

# .github/workflows/ci-cd-pipeline.yml

- name: Build for GitHub Pages
  run: npm run build
  env:
    REACT_APP_ADMIN_PASSWORD: ${{ secrets.ADMIN_PASSWORD }}

Setup Process:

Go to Repository Settings → Secrets and Variables → Actions
Add new repository secret: ADMIN_PASSWORD
Set value to your secure admin password
Deploy via GitHub Actions workflow

Build Process:

Environment variable injected during build time
Password embedded in compiled JavaScript bundle
Admin authentication works immediately after deployment

🌐 Hostinger Deployment

Method: Manual build with environment variables

# Local build with environment
export REACT_APP_ADMIN_PASSWORD="<YOUR_ADMIN_PASSWORD_HERE>"
npm run build

# Deploy to Hostinger via deploy script
./deploy-hostinger.sh

Setup Process:

Set environment variable locally before build
Run production build (embeds password in bundle)
Upload build/ directory to Hostinger via FTP/SFTP
Verify admin functionality works on live site

Alternative: Set environment variables in build script:

# deploy-hostinger.sh

export REACT_APP_ADMIN_PASSWORD="$HOSTINGER_ADMIN_PASSWORD"
npm run build

# ... upload logic

⚙️ Build Process & Password Integration

🔍 How Environment Variables Work in React Builds

Build-Time Integration

React apps are client-side applications that run in the browser. Environment variables prefixed with REACT_APP_ are:

Injected at Build Time: During npm run build, Vite/Webpack replaces process.env.REACT_APP_* with actual values
Embedded in Bundle: The password becomes part of the compiled JavaScript code
Available at Runtime: Browser can access the embedded values for authentication

Example Build Output

// Before build (source code)
const ADMIN_PASSWORD = process.env.REACT_APP_ADMIN_PASSWORD;

// After build (compiled bundle) - example output
const ADMIN_PASSWORD = "<ACTUAL_VALUE_FROM_BUILD_PROCESS>";

Security Considerations

⚠️ Important: Since React runs in the browser, environment variables become public in the compiled bundle.

✅ Acceptable: Admin passwords for basic content management
❌ Never expose: API keys, database credentials, or sensitive secrets
🔒 Best Practice: Use unique, rotatable passwords for admin functionality

📊 Environment Variable Verification

Environment	Variable Source	Build Command	Deployment Method
Local Development	`.env.local`	`npm run dev`	Hot reload with environment
GitHub Pages	Repository secrets	`npm run build`	GitHub Actions automation
Hostinger	Shell export or script	`npm run build`	Manual FTP/SFTP upload
Other Platforms	Platform-specific	`npm run build`	Platform deployment tools

🔧 Troubleshooting Admin Access

🚨 Common Issues & Solutions

Issue: "Admin functionality not available"

Cause: REACT_APP_ADMIN_PASSWORD not set during build
Solution: Ensure environment variable is configured before building

Issue: Admin login not working

Cause: Wrong password or environment variable name
Solution: Verify exact password and REACT_APP_ prefix

Issue: Works locally but not in production

Cause: Environment variable not set in deployment pipeline
Solution: Check deployment platform's environment configuration

Issue: Password visible in browser source

Status: ✅ Expected behavior - React environment variables are public
Action: Use unique, rotatable passwords; never expose sensitive secrets

📋 Security Checklist

✅ Environment Variable Set: REACT_APP_ADMIN_PASSWORD configured
✅ Secure Password: 16+ characters, unique, not reused elsewhere
✅ Local Files Protected: .env.local in .gitignore, never committed
✅ Production Configured: Deployment platform has environment variable
✅ Build Successful: npm run build completes without errors
✅ Admin Access Tested: Login works with configured password

🏗️ Architecture & Tech Stack

Built with the latest and greatest technologies

🎯 Core Technologies

React 19 - Concurrent rendering & performance
TypeScript 5.5+ - Type safety & developer experience
Vite 6.3+ - Lightning-fast builds & HMR
React Router 7 - Client-side routing
TailwindCSS - Utility-first styling

🛠️ Development Tools

ESLint - Code quality & consistency
Prettier - Automated code formatting
GitHub Actions - CI/CD automation
Vercel/GitHub Pages - Deployment platforms

🔐 Security Features

Content Security Policy (CSP) - XSS protection
Input Validation - Data sanitization
HTTPS Enforcement - Secure communication
Dependency Scanning - Vulnerability monitoring
Secret Detection - Credential protection

📊 Performance & Monitoring

Lighthouse CI - Performance tracking
Bundle Analysis - Size optimization
Real-time Monitoring - Uptime tracking
Error Tracking - Issue detection
Analytics Integration - User insights

📚 Documentation

Comprehensive guides and API documentation

📖 Guide	🎯 Purpose	🔗 Link
🏢 Company Info	About ThinkRED Technologies	View Guide
🎨 Brand Guidelines	Brand identity & usage	View Guide
🏗️ Design System	UI components & patterns	View Guide
🔒 Security Architecture	Security implementation	View Guide
📈 Website Overview	Technical architecture	View Guide
🔄 Versioning Guide	Release management	View Guide

🌐 Services & Solutions

What we do best - transforming ideas into reality

💻 Web Development

🚀 Modern Frontend

React, Vue, Angular
Progressive Web Apps
Mobile-first design

⚡ Backend Solutions

Node.js, Python, Go
Microservices architecture
API development

☁️ Cloud & DevOps

🏗️ Infrastructure

AWS, Azure, GCP
Kubernetes orchestration
Serverless computing

🔄 CI/CD Pipelines

Automated deployments
Testing automation
Monitoring & alerts

🤖 AI & Innovation

🧠 Machine Learning

Custom ML models
Data analysis
Predictive analytics

🎯 Consulting

Technology strategy
Digital transformation
Performance optimization

💼 Careers & Opportunities

Join our mission to simplify technology and experience

We're always looking for passionate engineers, designers, and innovators to join our team. Explore current opportunities and learn about our culture.

📊 Monitoring & Status

Real-time monitoring and health dashboards

📈 Monitoring	🎯 Purpose	🔗 Access
🚀 Live Website	Production monitoring	Visit Site
📊 Status Dashboard	System status & metrics	View Dashboard
🏥 Health Report	Repository health	View Report
⚙️ GitHub Actions	CI/CD pipeline status	View Workflows
📈 Performance	Core web vitals	View Metrics

🤝 Contributing

We welcome contributions from the community! Whether it's bug fixes, feature enhancements, or documentation improvements.

🔧 Development Setup

Fork the repository
Clone your fork: git clone https://github.com/your-username/thinkredtech.github.io.git
Install dependencies: npm install
Create a branch: git checkout -b feature/your-feature-name
Make changes and test: npm run dev
Commit changes: git commit -m "feat: your feature description"
Push to branch: git push origin feature/your-feature-name
Open a Pull Request

📄 License & Legal

MIT License - Feel free to use this project as a reference or starting point for your own projects.