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 from 'react'
interface SkeletonProps {
width?: string | number
height?: string | number
className?: string
import { createConsumer, Cable } from '@rails/actioncable'
let cable: Cable | null = null
export function getCable(): Cable {
if (!cable) {
import { useInfiniteQuery } from '@tanstack/react-query'
import api from '@/services/api'
import { Post, PaginatedResponse } from '@/types'
export function useInfinitePosts() {
return useInfiniteQuery({
import React, { Component, ReactNode } from 'react'
interface Props {
children: ReactNode
fallback?: ReactNode
onError?: (error: Error, errorInfo: React.ErrorInfo) => void
import { useState, useEffect } from 'react'
export function useDebounce<T>(value: T, delay: number = 500): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value)
useEffect(() => {
import { useMutation, useQueryClient } from '@tanstack/react-query'
import api from '@/services/api'
import { Post, PostId } from '@/types'
export function useLikePost() {
const queryClient = useQueryClient()
import { useForm } from 'react-hook-form'
import { PostFormData } from '@/types'
interface PostFormProps {
initialData?: Partial<PostFormData>
onSubmit: (data: PostFormData) => Promise<void>
import { Navigate, useLocation } from 'react-router-dom'
import { useAuth } from '@/contexts/AuthContext'
interface ProtectedRouteProps {
children: React.ReactNode
}
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react'
import { User } from '@/types'
import api from '@/services/api'
interface AuthContextType {
user: User | null
export type PostId = string & { readonly brand: unique symbol }
export type UserId = string & { readonly brand: unique symbol }
export interface User {
id: UserId
name: string
import React from 'react'
import ReactDOM from 'react-dom/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import App from './App'
import './index.css'
import axios, { AxiosError } from 'axios'
import { v4 as uuidv4 } from 'uuid'
const api = axios.create({
baseURL: import.meta.env.VITE_API_URL || 'http://localhost:3000/api/v1',
timeout: 15000,