<img alt="Project Banner" src="https://github.com/braviaprime/braviaprime.com/raw/main/public/images/light-header.png" width="100%">

braviaprime.com

<strong>A high-performance, i18n-native personal engineering platform & research hub.</strong>







<a href="https://braviaprime.com">Live Demo</a> •
<a href="#key-architectural-highlights">Architecture</a> •
<a href="#getting-started">Getting Started</a> •
<a href="#academic--engineering-relevance">Ph.D. Context</a>








<img src="https://img.shields.io/badge/Next.js_16-000000?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js" />
<img src="https://img.shields.io/badge/TypeScript_5-3178C6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />
<img src="https://img.shields.io/badge/Bun-000000?style=for-the-badge&logo=bun&logoColor=white" alt="Bun" />
<img src="https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white" alt="Tailwind" />
<img src="https://img.shields.io/badge/Drizzle_ORM-C5F74F?style=for-the-badge&logo=drizzle&logoColor=black" alt="Drizzle" />
<img src="https://img.shields.io/github/license/braviaprime/braviaprime.com?style=for-the-badge&labelColor=111111" alt="License" />

📌 Executive Summary

braviaprime.com is a full-stack engineering portfolio and technical publishing platform built with Next.js 16 (App Router & Turbopack). Designed with production-grade reliability, internationalization, and deterministic performance in mind, this project serves as both a digital presence and a sandbox for testing modern web infrastructure, distributed caching, and component architectures.

Academic & Engineering Relevance

• High-Performance System Design: Engineered to achieve near-100 Lighthouse scores across Performance, Accessibility, and SEO metrics.
• Strict Type Safety & Code Quality: Pure TypeScript implementation with full schema validation (t3-env), automated quality gates (Lefthook), and unit/E2E test suites (Vitest, Playwright).
• Global Localization (i18n): Multi-language routing and message management across English, Spanish, Japanese, Portuguese, and Chinese locales.

🛠️ Tech Stack & System Architecture

🚀 Key Features

📐 Modular Component Architecture & Design System

• Built on top of accessible primitives (Base UI) paired with custom Tailwind design tokens.
• Light & Dark theme support with automatic system-preference detection.
• Interactive MDX components with live code blocks, image zoom, and dynamic Table of Contents generation.

🌐 Distributed Data & Performance Optimization

• Caching Layer: Redis caching for dynamic views, comment aggregation, and real-time Spotify API stats.
• Rate Limiting: Distributed sliding-window rate limiting via Upstash to protect API routes.
• Edge SEO: Dynamic Open Graph image generation (next/og), structured JSON-LD schemas, and automated RSS/Sitemap generation.

💬 Real-Time Engagement & Admin Suite

• Interactive Comments & Likes: Custom-built nested comment system with optimistic UI updates and like counters.
• Transactional Emails: Responsive HTML email templates (React Email) for reply/comment notifications.
• System Monitoring: Integrated Umami analytics for privacy-focused site metrics.

📧 Email Notifications Preview

Comment Notification

Reply Notification

📁 Repository Structure

braviaprime.com/
├── public/                         # Optimized static assets and design resources
├── src/
│   ├── app/                        # Next.js App Router ([locale] dynamic routing)
│   ├── components/                 # Reusable, accessible UI components
│   ├── constants/                  # Application constants
│   ├── content/                    # Structured MDX content & dynamic collections
│   ├── contexts/                   # React contexts
│   ├── db/                         # PostgreSQL schemas, migrations (Drizzle ORM)
│   ├── emails/                     # React Email templates
│   ├── hooks/                      # Custom React hooks
│   ├── i18n/                       # Routing & translation configuration
│   ├── lib/                        # Utility libraries
│   ├── mdx-plugins/                # Custom Rehype and Remark plugins
│   ├── orpc/                       # Strongly typed API endpoints
│   ├── styles/                     # Global styles
│   ├── tests/                      # Unit (Vitest) & E2E (Playwright) test suites
│   └── utils/                      # Utility functions
├── docker-compose.yml              # Development container orchestration
└── package.json                    # Dependency manifest & script definitions

💻 Local Development & Setup

Prerequisites

Ensure you have the following installed on your machine:

• Node.js: >= 24.0.0
• Bun: >= 1.0.0
• Docker Engine & Compose
• VS Code (recommended)

Environment & Startup Sequence

1. Clone & Install Dependencies

git clone https://github.com/braviaprime/braviaprime.com.git
cd braviaprime.com
bun install

2. Configure Environment Variables

cp .env.example .env.local

3. Start Local Database & Cache

docker compose up -d

4. Execute Migrations & Seed Data

bun db:migrate
bun db:seed

5. Launch Development Servers

bun dev
# Main Next.js App -> http://localhost:3000

bun email:dev
# React Email Server -> http://localhost:3001

📊 Local Service Map

🧪 Quality Assurance & Available Scripts

# Development & Tools
bun dev
bun email:dev
bun cosmos

# Build & Production
bun run build
bun start
bun analyze

# Quality Control & Testing
bun check
bun lint
bun typecheck
bun format
bun knip
bun test:unit
bun test:e2e

# Database Operations
bun db:migrate
bun db:seed
bun db:push
bun db:reset
bun db:studio

🤝 Credits & Acknowledgments

This project stands on the shoulders of the open-source community:

• Base Blog Template: Inspired by Tailwind Next.js Starter Blog.
• Design Language: Inspired by Geist UI Kit.
• Subsystem Architecture: Comment engine adapted from fuma-comment, Rehype plugins from fumadocs, and UI components from shadcn/ui.

👨‍💻 Author & Research Context

Olanrewaju Toyyib (Bravíaprime)

Software Engineer & Academic Researcher

• 🌐 Website: https://braviaprime.com
• 🐙 GitHub: https://github.com/braviaprime
• 🎓 Academic Target: Prospective Ph.D. Candidate in Computer Science / Software Engineering at Technical University of Munich (TUM), Germany.

🤝 Sponsorship & Support

If you find this project helpful or relevant to your research, consider sponsoring the repository:

👉 https://github.com/sponsors/braviaprime

📄 License

Distributed under the MIT License. See the LICENSE file for details.