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 { ReactNode, useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
interface PortalProps {
children: ReactNode
container?: Element
class AddStatusToPosts < ActiveRecord::Migration[6.1]
# Use change for automatic rollback
def change
# Add column without default to avoid table lock
add_column :posts, :status, :string
import { Suspense } from 'react'
import { useSuspenseQuery } from '@tanstack/react-query'
import { useParams } from 'react-router-dom'
import api from '@/services/api'
import { Post } from '@/types'
import { ErrorBoundary } from '@/components/ErrorBoundary'
class Post < ApplicationRecord
# View counter - increments without hitting the database
kredis_counter :view_count, expires_in: 1.day
# Recent viewers list - stores last 10 viewer IDs
kredis_unique_list :recent_viewers, limit: 10
import { useState, useMemo, useCallback } from 'react'
import { Post } from '@/types'
import { PostCard } from './PostCard'
interface FilteredPostsProps {
posts: Post[]
module Paginatable
extend ActiveSupport::Concern
included do
before_action :set_pagination_params, only: [:index]
end
import { ReactNode } from 'react'
interface CardProps {
children: ReactNode
className?: string
}
module Api
module V1
class PostsController < ApplicationController
def create
post = current_user.posts.build(post_params)
import { Link, useLocation, useMatches } from 'react-router-dom'
interface BreadcrumbMatch {
pathname: string
handle?: {
crumb?: (data?: any) => string
import { Link } from 'react-router-dom'
import { useQueryClient } from '@tanstack/react-query'
import api from '@/services/api'
import { PostId } from '@/types'
interface PostLinkProps {
import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { useDebounce } from '@/hooks/useDebounce'
import api from '@/services/api'
export function SearchInput() {
import { useState } from 'react'
import {
DndContext,
closestCenter,
KeyboardSensor,
PointerSensor,