Copy. Customize. Ship.

Proven snippets.Ready for your workflow.

Start from practical code for contests, frontend, backend, mobile, databases, and tests. Customize any snippet for your IDE.

IDE setup guides

Snippet library

Useful code, ready to adapt

Copy source directly or open it in generator for your IDE.

C++ contest starter

Fast I/O, test cases, and a clean solve function.

C++cp

#include <bits/stdc++.h>
using namespace std;

void solve() {
    ${1:// solution}
}

int main() {
    ios::sync_with_stdio(false);
    cin.tie(nullptr);

    int t = 1;
    ${2:cin >> t;}
    while (t--) solve();
    return 0;
}

Customize

Binary search

Reusable lower-bound style binary search template.

C++bsearch

int left = ${1:0};
int right = ${2:n - 1};
int answer = ${3:-1};

while (left <= right) {
    int mid = left + (right - left) / 2;
    if (${4:condition}) {
        answer = mid;
        right = mid - 1;
    } else {
        left = mid + 1;
    }
}
$0

Customize

React component

Typed functional component with props and accessible structure.

TSXrfc

type ${1:Component}Props = {
  ${2:title}: string
}

export function ${1:Component}({ ${2:title} }: ${1:Component}Props) {
  return (
    <section aria-labelledby="${3:section-title}">
      <h2 id="${3:section-title}">{${2:title}}</h2>
      $0
    </section>
  )
}

Customize

Async data hook

Small React hook with loading, data, and error states.

TypeScriptusefetch

function use${1:Resource}() {
  const [data, setData] = useState<${2:Data} | null>(null)
  const [error, setError] = useState<Error | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const controller = new AbortController()

    fetch("${3:/api/resource}", { signal: controller.signal })
      .then((response) => {
        if (!response.ok) throw new Error("Request failed")
        return response.json()
      })
      .then(setData)
      .catch((error) => {
        if (error.name !== "AbortError") setError(error)
      })
      .finally(() => setLoading(false))

    return () => controller.abort()
  }, [])

  return { data, error, loading }
}

Customize

Express API route

Async route with validation-ready error forwarding.

TypeScriptroute

router.${1|get,post,put,delete|}("${2:/resource}", async (req, res, next) => {
  try {
    const result = await ${3:service.run(req.body)}
    return res.status(${4:200}).json({ data: result })
  } catch (error) {
    return next(error)
  }
})

Customize

Next.js route handler

App Router endpoint with safe error response.

TypeScriptnroute

import { NextResponse } from "next/server"

export async function ${1|GET,POST,PUT,DELETE|}(request: Request) {
  try {
    ${2:const body = await request.json()}
    return NextResponse.json({ data: ${3:body} }, { status: ${4:200} })
  } catch {
    return NextResponse.json(
      { error: "Something went wrong" },
      { status: 500 }
    )
  }
}

Customize

React Native screen

Safe-area screen with typed styles and starter layout.

TSXrnscreen

import { SafeAreaView, StyleSheet, Text, View } from "react-native"

export function ${1:Home}Screen() {
  return (
    <SafeAreaView style={styles.screen}>
      <View style={styles.content}>
        <Text style={styles.title}>${2:Home}</Text>
        $0
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  screen: { flex: 1 },
  content: { flex: 1, padding: 24 },
  title: { fontSize: 28, fontWeight: "700" },
})

Customize

Flutter screen

Stateless screen scaffold with theme-aware text.

Dartscreen

import 'package:flutter/material.dart';

class ${1:Home}Screen extends StatelessWidget {
  const ${1:Home}Screen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('${2:Home}')),
      body: const SafeArea(
        child: Center(child: ${3:Text('Ready')}),
      ),
    );
  }
}

Customize

SQL transaction

Safe transaction skeleton with rollback guidance.

SQLtx

BEGIN;

${1:UPDATE table_name
SET column_name = value
WHERE id = 1;}

-- Verify affected rows before committing.
${2:COMMIT;}
-- ROLLBACK;

Customize

Vitest unit test

Arrange–act–assert test structure with typed imports.

TypeScriptvtest

import { describe, expect, it } from "vitest"
import { ${1:subject} } from "${2:./subject}"

describe("${1:subject}", () => {
  it("${3:does the expected thing}", () => {
    // Arrange
    ${4:const input = undefined}

    // Act
    const result = ${1:subject}(input)

    // Assert
    expect(result).toEqual(${5:expected})
  })
})

Customize

Breadth-first search

Graph BFS with distance tracking from a chosen source.

C++bfs

vector<int> distance(${1:n}, -1);
queue<int> pending;

distance[${2:source}] = 0;
pending.push(${2:source});

while (!pending.empty()) {
    int node = pending.front();
    pending.pop();

    for (int next : ${3:graph}[node]) {
        if (distance[next] != -1) continue;
        distance[next] = distance[node] + 1;
        pending.push(next);
    }
}
$0

Customize

Disjoint set union

Union-find with path compression and union by size.

C++dsu

struct DSU {
    vector<int> parent, size;

    explicit DSU(int n) : parent(n), size(n, 1) {
        iota(parent.begin(), parent.end(), 0);
    }

    int find(int node) {
        return parent[node] == node
            ? node
            : parent[node] = find(parent[node]);
    }

    bool unite(int a, int b) {
        a = find(a);
        b = find(b);
        if (a == b) return false;
        if (size[a] < size[b]) swap(a, b);
        parent[b] = a;
        size[a] += size[b];
        return true;
    }
};

DSU ${1:dsu}(${2:n});

Customize

Dijkstra shortest paths

Priority-queue shortest paths for non-negative edge weights.

C++dijkstra

const long long INF = 4e18;
vector<long long> distance(${1:n}, INF);
priority_queue<
    pair<long long, int>,
    vector<pair<long long, int>>,
    greater<pair<long long, int>>
> pending;

distance[${2:source}] = 0;
pending.push({0, ${2:source}});

while (!pending.empty()) {
    auto [cost, node] = pending.top();
    pending.pop();
    if (cost != distance[node]) continue;

    for (auto [next, weight] : ${3:graph}[node]) {
        if (cost + weight >= distance[next]) continue;
        distance[next] = cost + weight;
        pending.push({distance[next], next});
    }
}
$0

Customize

Controlled React form

Typed form state with submit handling and accessible labels.

TSXrform

import { FormEvent, useState } from "react"

export function ${1:ContactForm}() {
  const [value, setValue] = useState("")

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
    ${2:console.log(value)}
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="${3:message}">${4:Message}</label>
      <input
        id="${3:message}"
        value={value}
        onChange={(event) => setValue(event.target.value)}
      />
      <button type="submit">${5:Submit}</button>
    </form>
  )
}

Customize

Debounced value hook

Reusable hook that delays rapidly changing values.

TypeScriptusedebounce

import { useEffect, useState } from "react"

export function useDebouncedValue<T>(value: T, delay = ${1:300}) {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const timeout = window.setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

    return () => window.clearTimeout(timeout)
  }, [value, delay])

  return debouncedValue
}

Customize

React error boundary

Class boundary with typed fallback UI and reset support.

TSXerrorboundary

import { Component, ErrorInfo, ReactNode } from "react"

type Props = { children: ReactNode }
type State = { error: Error | null }

export class ${1:ErrorBoundary} extends Component<Props, State> {
  state: State = { error: null }

  static getDerivedStateFromError(error: Error): State {
    return { error }
  }

  componentDidCatch(error: Error, info: ErrorInfo) {
    ${2:console.error(error, info)}
  }

  render() {
    if (this.state.error) {
      return (
        <div role="alert">
          <p>${3:Something went wrong.}</p>
          <button onClick={() => this.setState({ error: null })}>
            Try again
          </button>
        </div>
      )
    }

    return this.props.children
  }
}

Customize

Express auth middleware

Bearer-token middleware with early unauthorized responses.

TypeScriptauthmw

import type { NextFunction, Request, Response } from "express"

export async function ${1:requireAuth}(
  req: Request,
  res: Response,
  next: NextFunction
) {
  const token = req.headers.authorization?.replace(/^Bearer\s+/i, "")

  if (!token) {
    return res.status(401).json({ error: "Unauthorized" })
  }

  try {
    ${2:res.locals.user = await verifyToken(token)}
    return next()
  } catch {
    return res.status(401).json({ error: "Invalid token" })
  }
}

Customize

Express error handler

Central error middleware with safe production responses.

TypeScripterrormw

import type { NextFunction, Request, Response } from "express"

export function errorHandler(
  error: unknown,
  _req: Request,
  res: Response,
  _next: NextFunction
) {
  const status =
    typeof error === "object" &&
    error !== null &&
    "status" in error &&
    typeof error.status === "number"
      ? error.status
      : 500

  const message =
    error instanceof Error ? error.message : "Internal server error"

  return res.status(status).json({
    error: status === 500 ? "Internal server error" : message,
  })
}

Customize

Pagination parameters

Validated page and limit values with database-ready offset.

TypeScriptpaginate

const page = Math.max(1, Number.parseInt(String(req.query.page ?? "1"), 10))
const limit = Math.min(
  ${1:100},
  Math.max(1, Number.parseInt(String(req.query.limit ?? "${2:20}"), 10))
)
const offset = (page - 1) * limit

const [items, total] = await Promise.all([
  ${3:repository.findMany({ limit, offset })},
  ${4:repository.count()},
])

return res.json({
  data: items,
  pagination: {
    page,
    limit,
    total,
    pages: Math.ceil(total / limit),
  },
})

Customize

React Native storage hook

AsyncStorage-backed state with loading and persistence.

TSXusestorage

import AsyncStorage from "@react-native-async-storage/async-storage"
import { useEffect, useState } from "react"

export function useStoredValue<T>(key: string, initialValue: T) {
  const [value, setValue] = useState(initialValue)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    AsyncStorage.getItem(key)
      .then((stored) => {
        if (stored !== null) setValue(JSON.parse(stored))
      })
      .finally(() => setLoading(false))
  }, [key])

  async function updateValue(nextValue: T) {
    setValue(nextValue)
    await AsyncStorage.setItem(key, JSON.stringify(nextValue))
  }

  return { value, updateValue, loading }
}

Customize

React Native list

Typed FlatList with stable keys and empty-state content.

TSXrnlist

import { FlatList, Text, View } from "react-native"

type Item = {
  id: string
  ${1:title}: string
}

export function ${2:ItemList}({ items }: { items: Item[] }) {
  return (
    <FlatList
      data={items}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View>
          <Text>{item.${1:title}}</Text>
        </View>
      )}
      ListEmptyComponent={<Text>${3:No items yet.}</Text>}
    />
  )
}

Customize

Flutter stateful screen

Stateful screen with mounted-safe asynchronous updates.

Dartstatefulscreen

import 'package:flutter/material.dart';

class ${1:Home}Screen extends StatefulWidget {
  const ${1:Home}Screen({super.key});

  @override
  State<${1:Home}Screen> createState() => _${1:Home}ScreenState();
}

class _${1:Home}ScreenState extends State<${1:Home}Screen> {
  bool loading = false;

  Future<void> load() async {
    setState(() => loading = true);
    await ${2:Future<void>.delayed(const Duration(seconds: 1))};
    if (!mounted) return;
    setState(() => loading = false);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('${3:Home}')),
      body: Center(
        child: loading
            ? const CircularProgressIndicator()
            : ElevatedButton(onPressed: load, child: const Text('Load')),
      ),
    );
  }
}

Customize

PostgreSQL upsert

Insert-or-update statement that returns the saved row.

SQLupsert

INSERT INTO ${1:table_name} (
  ${2:id},
  ${3:value}
)
VALUES (
  ${4:id_value},
  ${5:value_value}
)
ON CONFLICT (${2:id})
DO UPDATE SET
  ${3:value} = EXCLUDED.${3:value},
  updated_at = CURRENT_TIMESTAMP
RETURNING *;

Customize

Keyset pagination

Stable cursor pagination without large OFFSET scans.

SQLkeyset

SELECT
  ${1:id},
  ${2:created_at},
  ${3:*}
FROM ${4:table_name}
WHERE (
  ${2:created_at},
  ${1:id}
) < (
  ${5:cursor_created_at},
  ${6:cursor_id}
)
ORDER BY
  ${2:created_at} DESC,
  ${1:id} DESC
LIMIT ${7:20};

Customize

Create table migration

PostgreSQL table with timestamps, constraints, and index.

SQLcreatetable

CREATE TABLE ${1:table_name} (
  id BIGINT GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
  ${2:name} TEXT NOT NULL,
  created_at TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
  CONSTRAINT ${1:table_name}_${2:name}_unique UNIQUE (${2:name})
);

CREATE INDEX ${1:table_name}_created_at_idx
  ON ${1:table_name} (created_at DESC);

Customize

Playwright browser test

Page test with semantic locators and URL assertion.

TypeScriptpwtest

import { expect, test } from "@playwright/test"

test("${1:completes the user flow}", async ({ page }) => {
  await page.goto("${2:/}")

  await page.getByRole("button", { name: "${3:Get started}" }).click()

  await expect(
    page.getByRole("heading", { name: "${4:Welcome}" })
  ).toBeVisible()
  await expect(page).toHaveURL(/${5:\/dashboard}/)
})

Customize

React component test

Testing Library test driven through accessible user actions.

TSXrtltest

import { render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import { ${1:Component} } from "${2:./component}"

test("${3:updates after user action}", async () => {
  const user = userEvent.setup()
  render(<${1:Component} />)

  await user.click(
    screen.getByRole("button", { name: "${4:Submit}" })
  )

  expect(
    screen.getByText("${5:Saved successfully}")
  ).toBeInTheDocument()
})

Customize

Async service test

Mocked dependency test for successful async service output.

TypeScriptasynctest

import { beforeEach, expect, it, vi } from "vitest"
import { ${1:service} } from "${2:./service}"
import { ${3:dependency} } from "${4:./dependency}"

vi.mock("${4:./dependency}")

beforeEach(() => {
  vi.clearAllMocks()
})

it("${5:returns mapped data}", async () => {
  vi.mocked(${3:dependency}).mockResolvedValue(${6:rawData})

  const result = await ${1:service}()

  expect(${3:dependency}).toHaveBeenCalledOnce()
  expect(result).toEqual(${7:expectedData})
})

Customize