mintel.me/apps/web

Technical Problem Solver's Blog

A clean, readable blog built with Astro and React. Focus on practical insights and learning notes.

Features

• Clean Architecture: Modular React components for article elements
• TypeScript: Full type safety throughout
• MDX Support: Write content with JSX components
• Fast: Static site generation with Astro
• Readable: Carefully designed typography and spacing

Project Structure

src/
├── components/          # Modular React components
│   ├── ArticleHeading.tsx
│   ├── ArticleParagraph.tsx
│   ├── ArticleList.tsx
│   ├── ArticleBlockquote.tsx
│   ├── BlogPostCard.tsx
│   └── Container.tsx
├── data/
│   └── blogPosts.ts    # Blog post metadata
├── layouts/            # Astro layouts
│   ├── BaseLayout.astro
│   └── BlogLayout.astro
└── pages/              # Routes
    ├── index.astro     # Home page
    └── blog/           # Blog posts
        ├── first-note.astro
        └── debugging-tips.astro

Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Writing Posts

1. Add post metadata to src/data/blogPosts.ts
2. Create a new .astro file in src/pages/blog/
3. Import and use the modular components
4. The post will automatically appear on the home page

Components

The blog uses modular React components for article elements:

• H1, H2, H3 - Headings with consistent styling
• Paragraph, LeadParagraph - Text with proper spacing
• UL, OL, LI - Lists with proper indentation
• Blockquote, CodeBlock, InlineCode - Code and quotes

Design Philosophy

• Readability First: Clear typography, generous spacing
• No Distractions: Clean layout, focus on content
• Practical: Tools and techniques that work
• Calm: No hype, just facts

🎥 UI Showcase Toolkit

A Remotion-based toolkit for creating high-quality, deterministic showcase videos of our React components.

• Source of Truth: Renders real project components.
• Automated: CLI-driven rendering for LinkedIn-ready videos.
• Pixel-Perfect: 60fps, crisp text, brand-aligned style.

Quick Start

# Preview compositions
npm run video:preview

# Render the showcase video
npm run video:render

See .agent/workflows/video-toolkit.md for more details.

🤖 Industrial AI Estimation System

A multi-pass AI consultation engine for generating technical project estimations and professional PDFs.

• Context-Aware: Crawls existing customer websites to understand company DNA.
• Industrial Standards: Strictly follows "Industrial Engineering" aesthetics and technical wording.
• Transparent: Maps scope directly to a modular pricing model.

Quick Start

# Generate estimation with website crawl
npm run ai-estimate -- "Project Briefing" --url https://example.com

See ESTIMATION_GUIDE.md for full documentation.