Faqih Muntashir’s website

Personal website built with React, TanStack Start, Vite, and StyleX. It includes a homepage, MDX blog, and interactive Rule of Thumb articles.

Development

bun install
npm run dev

Vite is configured for http://127.0.0.1:5173. If that port belongs to another project, use a separate port rather than stopping its server:

npm run dev -- --port 5174 --strictPort

Use npm run ... for website scripts. Bun is used for dependency installation; both bun.lock and package-lock.json are tracked. After dependency changes, synchronize the npm lockfile with npm install --package-lock-only --ignore-scripts for Cloudflare's npm installation step.

Checks

npm run lint
npm run typecheck
npm run test
npm run build

Oxlint runs the default rules plus all generic anti-slop rules at error severity. Configuration lives in .oxlintrc.json; the vendored plugin, license, upstream revision, and local compatibility note live in tools/oxlint/anti-slop/. Keep oxlint and @oxlint/plugins pinned to the same version when upgrading.

Agent assets, the vendored plugin, and TanStack's generated route tree are excluded from application linting. Owned Storybook configuration remains checked. The vendored TypeScript source is included in typechecking. Effect rules are not enabled because the website has no direct Effect dependency.

Vitest uses jsdom. The test command allows an empty suite, but regression tests should be added for behavior changed during maintenance.

Production

npm run build

TanStack Start prerenders discoverable routes as complete HTML in .output/public. React hydrates those pages for client-side navigation and interactions; static hosting does not need a runtime server. The Cloudflare preview command uses scripts/cloudflare-pages-preview.mjs when the Cloudflare build environment is detected.

Storybook

npm run storybook
npm run build-storybook

Stories live in src/stories and use the same global theme and StyleX fallback styles as the website. The explicit *.stories.tsx glob keeps route MDX files in the TanStack Start pipeline.

Source layout

• src/routes/: file-based routes and their local components. src/routes/__root.tsx owns the root layout and development-only React Grab loader.
• src/components/: shared UI and article thumbnails.
• src/hooks/: shared browser and interaction hooks.
• src/content/blog/: MDX articles.
• src/data/guidelines.ts: Rule of Thumb metadata.
• src/styles.css: global theme, typography, animation, and non-atomic selectors.
• src/stylex-utilities.ts, src/stylex.ts, and src/stylex-fallback.css: compiled utility bridge and fallback styles.
• src/routeTree.gen.ts: generated by TanStack; do not edit by hand.

See CODE_STRUCTURE.md, STYLING_GUIDELINES.md, and .hermes.md for repository conventions. The interactive article demos are site content, not disposable starter examples.