Rohit Kashyap rohitpotato

rohitpotato / instrumentation.node.ts

Last active December 28, 2025 20:36

Open Telemetry setup for nextjs routes with metrics support

	/**
	* OpenTelemetry Instrumentation for Next.js
	*
	* This file sets up distributed tracing and metrics collection.
	*
	* Architecture:
	* - Traces: Handled by OTEL with MINIMAL modifications (only add http.route)
	* - Metrics: Recorded in responseHook with complete request/response data
	* - Routes: Normalized to reduce cardinality (e.g., /order/123 → /order/:id)
	*/

rohitpotato / AppWithCustomHook.js

Created March 13, 2021 21:21

	import "./App.css";
	import { useTheme } from "./hooks/useTheme";
	import useThemeStore from "./stores/useThemeStore";

	function App() {
	const toggleTheme = useThemeStore((state) => state.toggleTheme);
	useTheme();

	return (
	<div className="h-screen bg-white dark:bg-black flex items-center justify-center">

rohitpotato / useTheme.js

Created March 13, 2021 21:19

	import { useEffect } from "react";
	import useThemeStore from "../stores/useThemeStore";
	import { applyThemePreference } from "../utils/themeUtils";

	const selector = (state) => state.theme;
	export const useTheme = () => {
	const theme = useThemeStore(selector);
	useEffect(() => {
	applyThemePreference(theme);
	}, [theme]);

rohitpotato / AppWithoutCustomHook.js

Created March 13, 2021 20:50

	import { useEffect } from "react";
	import "./App.css";
	import useThemeStore from "./stores/useThemeStore";
	import { applyThemePreference } from "./utils/themeUtils";

	function App() {
	const toggleTheme = useThemeStore((state) => state.toggleTheme);
	const theme = useThemeStore((state) => state.theme);

	useEffect(() => {

rohitpotato / tailwind.config.js

Last active March 14, 2021 07:56


	module.exports = {
	purge: ["./src/*/.{js,jsx,ts,tsx}", "./public/index.html"],
	darkMode: "class", // or 'media' or 'class'
	theme: {},
	variants: {
	extend: {},
	},
	plugins: [],
	};

rohitpotato / useThemeStore.js

Created March 13, 2021 20:27

	import create from "zustand";
	import { persist } from "zustand/middleware";
	import { THEME_TYPES } from "../constants";

	const { THEME_LIGHT, THEME_DARK } = THEME_TYPES;

	const useThemeStore = create(
	persist(
	(set) => ({
	theme: THEME_LIGHT,

rohitpotato / themeUtils.js

Created March 13, 2021 20:16

	import { THEME_TYPES } from "../constants";

	// for tailwind css, need the change the root
	export const applyThemePreference = (theme) => {
	const { THEME_DARK, THEME_LIGHT } = THEME_TYPES;
	const root = window.document.documentElement;
	const isDark = theme === THEME_DARK;
	root.classList.remove(isDark ? THEME_LIGHT : THEME_DARK);
	root.classList.add(theme);
	};

rohitpotato / constants.js

Created March 13, 2021 20:14

Constants File for React-Dark-Mode

rohitpotato / App.js

Last active March 13, 2021 20:49

	import "./App.css";

	function App() {
	return (
	<div className="h-screen bg-white dark:bg-black flex items-center justify-center">
	<div className="shadow-xl flex flex-col space-y-6 items-center justify-center p-16 dark:bg-gray-900">
	<span className="dark:text-white text-black font-bold text-xl">
	Let's build dark mode with react.
	</span>
	<button

rohitpotato / complete-implement-hooks.js

Last active June 10, 2020 19:35

	let React = (function() {
	let global = {}; // define a global variable where we store information about the component
	let index = 0; // index to keep track of the component's state
	function render(Component) {
	global.Component = Component;
	const instance = Component(); // get the instance of the component
	index = 0;
	instance.render(); // call the component's render function

	global.instance = instance; // store the component's instance for any future calls of the component's functions