Rails + React specialist building modern SPAs with Rails APIs. Expert in React hooks, state management, TypeScript, and seamless Rails integration. 9+ years creating performant,...
import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react'
type Theme = 'light' | 'dark'
interface ThemeContextType {
theme: Theme
import { z } from 'zod'
export const postSchema = z.object({
title: z
.string()
.min(5, 'Title must be at least 5 characters')
import { Helmet } from 'react-helmet-async'
interface SEOProps {
title: string
description: string
image?: string
import { FixedSizeList as List } from 'react-window'
import AutoSizer from 'react-virtualized-auto-sizer'
import { Post } from '@/types'
import { PostCard } from './PostCard'
interface VirtualizedPostListProps {
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import rehypeSanitize from 'rehype-sanitize'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { PostCard } from '../PostCard'
import { Post } from '@/types'
const mockPost: Post = {
import { create } from 'zustand'
import { persist } from 'zustand/middleware'
interface FilterState {
search: string
category: string | null
import { lazy, Suspense } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Layout from '@/components/Layout'
// Eager load critical routes
import Home from '@/pages/Home'
import React, { createContext, useContext, useState, ReactNode } from 'react'
interface TabsContextType {
activeTab: string
setActiveTab: (tab: string) => void
}
import { useState, useRef } from 'react'
import { DirectUpload } from '@rails/activestorage'
interface ImageUploadProps {
onUploadComplete: (blobId: string) => void
maxSize?: number
import React, { createContext, useContext, useState, ReactNode } from 'react'
type ToastType = 'success' | 'error' | 'info' | 'warning'
interface Toast {
id: string
import { useEffect, useRef, ReactNode } from 'react'
import { createPortal } from 'react-dom'
interface ModalProps {
isOpen: boolean
onClose: () => void