ruby
module Api
  module V1
    class PostsController < ApplicationController
      def create
        post = current_user.posts.build(post_params)

Rails strong parameters for nested attributes

rails security strong-parameters
by Maya Patel 1 tab
typescript
import { Link, useLocation, useMatches } from 'react-router-dom'

interface BreadcrumbMatch {
  pathname: string
  handle?: {
    crumb?: (data?: any) => string

Breadcrumb navigation from React Router

react react-router navigation
by Maya Patel 2 tabs
typescript
import { Link } from 'react-router-dom'
import { useQueryClient } from '@tanstack/react-query'
import api from '@/services/api'
import { PostId } from '@/types'

interface PostLinkProps {

Prefetching data on hover for instant navigation

react performance prefetching
by Maya Patel 1 tab
typescript
import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { useDebounce } from '@/hooks/useDebounce'
import api from '@/services/api'

export function SearchInput() {

Debounced search with controlled inputs

react search debounce
by Maya Patel 1 tab
typescript
import { useState } from 'react'
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,

Drag and drop with dnd-kit

react drag-drop dnd-kit
by Maya Patel 1 tab
typescript
import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react'

type Theme = 'light' | 'dark'

interface ThemeContextType {
  theme: Theme

Dark mode with Tailwind and localStorage persistence

react tailwind dark-mode
by Maya Patel 3 tabs
typescript
import { z } from 'zod'

export const postSchema = z.object({
  title: z
    .string()
    .min(5, 'Title must be at least 5 characters')

React Hook Form with Zod validation

react forms react-hook-form
by Maya Patel 2 tabs
typescript
import { Helmet } from 'react-helmet-async'

interface SEOProps {
  title: string
  description: string
  image?: string

SEO optimization with React Helmet

react seo react-helmet
by Maya Patel 2 tabs
typescript
import { FixedSizeList as List } from 'react-window'
import AutoSizer from 'react-virtualized-auto-sizer'
import { Post } from '@/types'
import { PostCard } from './PostCard'

interface VirtualizedPostListProps {

Virtual scrolling for large lists with react-window

react performance virtual-scrolling
by Maya Patel 1 tab
typescript
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'

Markdown rendering with react-markdown

react markdown content
by Maya Patel 1 tab
typescript
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 = {

React Testing Library for component tests

react testing testing-library
by Maya Patel 2 tabs
typescript
import { create } from 'zustand'
import { persist } from 'zustand/middleware'

interface FilterState {
  search: string
  category: string | null

Zustand for lightweight state management

react zustand state-management
by Maya Patel 2 tabs