How I Code
A living playbook of the structures, patterns, and setup I reach for when I ship products — React, React Native, Next.js, and AI agentic systems.
About this site
I’ve been shipping production apps long enough to have strong opinions about how a codebase should feel. This site is where I keep those opinions: the folder structures I default to, the patterns I trust, the setup steps I’d copy into every new repo. It’s written for the version of me starting a new project at 9am on a Monday.
If you read one thing first, read Code I Prefer — it’s the short version of how I think about every line.
Start here
Naming, structure, state, styling, error handling — the defaults I apply without thinking.
TemplatesFolder Structures →Feature-based layouts for Expo and Next.js App Router, ready to copy into a new project.
WritingEngineering Notes →Long-form pieces — starting with automatic JWT refresh tokens via Axios interceptors.
What I focus on
Multi-agent orchestration, chat UIs, RAG over private corpora, prompt engineering across OpenAI, Claude, and Groq.
Expo + Expo Router for app stores and web. File-based routing, native modules when needed, fast OTA updates.
Next.js App Router on the front, FastAPI / NestJS on the back. Stripe, multi-tenant, billing-aware from day one.
HubSpot, Salesforce, Shopify, WebRTC, NFC — the boring connectors that make products useful.
The pattern behind everything
I organize code by business features, not technical layers. Related code lives together. Screens are thin. Features don’t cross-import. State has clear ownership.
src/
├── app/ # File-based routing (screens / pages)
├── features/ # Feature modules (auth, chat, orders, …)
│ └── auth/
│ ├── components/
│ ├── hooks/
│ ├── services/
│ ├── @types/
│ └── index.ts # Public API (barrel export)
├── global/ # Shared components, hooks, utils, stores
The full breakdown lives in Folder Structures, with concrete templates for React Native Expo and Next.js App Router.
Default tech stack
| Layer | What I reach for first |
|---|---|
| Language | TypeScript (strict mode, always) |
| Mobile | React Native · Expo · Expo Router |
| Web | Next.js (App Router) · React · Vite for SPAs |
| Client state | Zustand |
| Server state | TanStack Query (React Query) |
| Styling | Tailwind CSS on web · StyleSheet / NativeWind on RN |
| HTTP | Axios with interceptors (see the JWT refresh notes) |
| Backend | FastAPI · NestJS · Node.js |
| Data | Supabase · Prisma · Postgres |
| Payments | Stripe |
| AI | OpenAI · Claude · Groq · RAG · vector retrieval |
Track record
A few numbers from real client work — included as a sanity check that these patterns survive contact with production:
- 50% engagement lift after shipping an AI chat layer into an existing app
- 40% faster order processing in a WhatsApp-integrated commerce flow
- 35% performance gain on an Expo SDK migration
- 100% client satisfaction rating on Upwork across multi-quarter engagements
More context on the projects behind these numbers lives on ahmad2point0.com.
Contributing
Spotted something that could be sharper? Disagree with a pattern? Open an issue or a PR — see the Contributing Guide.