create-react-starter-kit 1.0.5 → 1.0.7

package/dist/templates/docs/examples/testing.md.ejs

@@ -8,20 +8,74 @@
 
 ## When to use
 
-- Unit: pure logic + component behavior
-- E2E: critical journeys across routes
-- Visual: regressions in UI appearance
+| Layer | Use for | Avoid using for |
+|-------|---------|-----------------|
+| Unit / RTL | logic, component behavior, form validation | full auth/payment journeys |
+| E2E | critical user journeys across routes | asserting every CSS class |
+| Visual | regressions in appearance / states | business-rule correctness |
 
-## Best practice
+## How to run
 
-Keep e2e thin. Prefer Testing Library queries that reflect how users find elements (`getByRole`, labels).
+<% if (unitTesting !== 'none') { -%>
+```bash
+<%= packageManager === 'npm' ? 'npm run' : packageManager %> test
+<%= packageManager === 'npm' ? 'npm run' : packageManager %> test:watch
+```
+<% } -%>
+<% if (e2eTesting === 'playwright') { -%>
+```bash
+<%= packageManager === 'npm' ? 'npm run' : packageManager %> test:e2e:install   # once
+<%= packageManager === 'npm' ? 'npm run' : packageManager %> test:e2e
+<%= packageManager === 'npm' ? 'npm run' : packageManager %> test:e2e:ui
+```
 
-## Locations
+E2E base URL: `http://127.0.0.1:<%= buildTool === 'webpack' ? 3000 : 5173 %>`
+<% } else if (e2eTesting === 'cypress') { -%>
+```bash
+<%= packageManager === 'npm' ? 'npm run' : packageManager %> test:e2e
+```
+<% } -%>
+<% if (visualTesting === 'storybook') { -%>
+```bash
+<%= packageManager === 'npm' ? 'npm run' : packageManager %> storybook
+```
+<% } -%>
+
+## Project layout
 
 - Setup: `tests/setup.<%= ext %>` (when applicable)
-- Component smoke: `tests/App.test.<%= jsxExt %>`
+- Unit suites: `tests/*.test.<%= jsxExt %>`
 <% if (e2eTesting === 'playwright') { -%>
-- E2E: `tests/e2e/home.spec.<%= ext %>`
+- E2E: `tests/e2e/*.spec.<%= ext %>` (excluded from unit runner)
 <% } else if (e2eTesting === 'cypress') { -%>
-- E2E: `cypress/e2e/home.cy.<%= ext %>`
+- E2E: `cypress/e2e/*`
+<% } -%>
+<% if (visualTesting === 'storybook') { -%>
+- Stories: `src/**/*.stories.<%= jsxExt %>`
 <% } -%>
+
+## Best practices
+
+- Query the way users do: `getByRole`, label text, placeholder — not implementation details.
+- Mock at the **network/domain boundary**:
+<% if (serverState === 'rtk-query') { -%>
+  - mock RTK hooks/endpoints for unit tests when you are not integration-testing the store
+<% } else { -%>
+  - mock `@/services/api` helpers rather than axios/fetch internals
+<% } -%>
+- Keep e2e **thin**: home load, posts happy path, feedback submit.
+- Do not let unit tests import Playwright specs (unit config excludes `tests/e2e`).
+- For async UI, prefer `findBy*` / `waitFor` over arbitrary `sleep`.
+
+## Example unit test shape
+
+```tsx
+renderWithProviders(<FeedbackForm />);
+await user.click(screen.getByRole('button', { name: /Send feedback/i }));
+expect(screen.getAllByText(/required|valid email/i).length).toBeGreaterThan(0);
+```
+
+## Related
+
+- Strategy & CI: `docs/best-practices.md`
+- Forms guide: `docs/examples/forms.md`

package/dist/templates/docs/getting-started.md.ejs

@@ -2,10 +2,13 @@
 
 Welcome to **<%= projectName %>**, a React starter generated by `create-react-starter-kit`.
 
+This guide walks you from first install to extending the app with confidence.
+
 ## Prerequisites
 
-- Node.js 18+
-- <%= stackLabels.packageManager %>
+- **Node.js 18+** (20 LTS recommended)
+- **<%= stackLabels.packageManager %>** installed globally or via Corepack
+- A modern browser for the demo UI
 
 ## Install & run
 
@@ -22,26 +25,68 @@ npm run dev
 <% } -%>
 ```
 
+Dev server URL (default): **http://localhost:<%= buildTool === 'webpack' ? 3000 : 5173 %>**
+
+Useful scripts:
+
+| Script | Purpose |
+|--------|---------|
+| `dev` | Local development server |
+| `build` | Production bundle |
+| `preview` | Serve the production build locally |
+<% if (unitTesting !== 'none') { -%>
+| `test` / `test:watch` | Unit tests |
+<% } -%>
+<% if (e2eTesting !== 'none') { -%>
+| `test:e2e` | End-to-end tests |
+<% } -%>
+<% if (visualTesting === 'storybook') { -%>
+| `storybook` | Component explorer |
+<% } -%>
+| `lint` / `format` | Code quality |
+
 ## Environment variables
 
-Copy `.env.example` → `.env` and fill values. Restart the dev server after changes.
+1. Copy `.env.example` → `.env`
+2. Fill values for your environment
+3. Restart `dev` after changes
 
-Only variables prefixed for your bundler (e.g. `VITE_`) are exposed to the browser. Keep secrets on the server.
+Only client-safe variables (typically `VITE_*`) are exposed to the browser. Never put private API keys in front-end env vars.
+
+| Variable | Purpose |
+|----------|---------|
+| `VITE_API_BASE_URL` | REST API base URL (defaults to JSONPlaceholder for demos) |
+<% if (errorTracking === 'sentry') { -%>
+| `VITE_SENTRY_DSN` | Sentry DSN |
+<% } else if (errorTracking === 'bugsnag') { -%>
+| `VITE_BUGSNAG_API_KEY` | Bugsnag API key |
+<% } else if (errorTracking === 'logrocket') { -%>
+| `VITE_LOGROCKET_APP_ID` | LogRocket app id |
+<% } else if (errorTracking === 'datadog') { -%>
+| `VITE_DATADOG_APPLICATION_ID` / `VITE_DATADOG_CLIENT_TOKEN` | Datadog RUM |
+<% } -%>
 
 ## What to explore first
 
-1. Open `/` — demo panels for state, data fetching, and forms.
-2. Open `/about` — orientation for the folder layout.
-3. Read `docs/selected-stack.md` — why each library is present.
-4. Skim `docs/examples/` — focused usage notes per concern.
+1. **`/`** — stack badges and orientation
+2. **`/counter`** — client state (<%= stackLabels.stateManagement %>)
+3. **`/posts`** — server state (<%= stackLabels.serverState %>)
+4. **`/feedback`** — forms + validation (<%= stackLabels.forms %> / <%= stackLabels.validation %>)
+5. **`docs/selected-stack.md`** — why each library was chosen
+6. **`docs/examples/`** — deep usage guides with copy-paste patterns
 
-## Extending the app
+## Extending the app (recommended flow)
 
-- Add a domain under `src/features/<name>/`.
-- Register routes in `src/App.<%= jsxExt %>`.
-- Put shared UI in `src/components/`.
-- Put HTTP clients in `src/services/`.
-- Import with `@/` (maps to `src/`), e.g. `import { env } from '@/config/env'`.
+1. Create a feature folder: `src/features/<domain>/`
+2. Add UI, hooks, and domain types next to that feature
+3. Register a route in `src/App.<%= jsxExt %>`
+4. Put shared primitives in `src/components/`
+<% if (apiLayer === 'none') { -%>
+5. Add RTK Query endpoints in `src/store/` (or a feature-local `*Api` slice)
+<% } else { -%>
+5. Add HTTP helpers in `src/services/api.<%= ext %>` (and keep transport details in `src/services/http/`)
+<% } -%>
+6. Import with `@/` — e.g. `import { env } from '@/config/env'`
 
 ## Testing
 
@@ -51,5 +96,8 @@ Only variables prefixed for your bundler (e.g. `VITE_`) are exposed to the brows
 <% if (e2eTesting !== 'none') { -%>
 - E2E: `<%= packageManager === 'npm' ? 'npm run' : packageManager %> test:e2e`
 <% } -%>
+<% if (visualTesting === 'storybook') { -%>
+- Storybook: `<%= packageManager === 'npm' ? 'npm run' : packageManager %> storybook`
+<% } -%>
 
-See `docs/best-practices.md` for CI and production notes.
+See `docs/best-practices.md` and `docs/examples/testing.md` for strategy and CI notes.

package/dist/templates/docs/selected-stack.md.ejs

@@ -1,44 +1,146 @@
 # Selected stack
 
-This document explains each choice made when generating **<%= projectName %>**.
+This document explains each choice made when generating **<%= projectName %>**, how to use it day-to-day, and the practices that keep the codebase maintainable.
 
 ## Build — <%= stackLabels.buildTool %>
 
-Fast local feedback and a production bundle. Prefer keeping config minimal; add plugins only when needed.
+<% if (buildTool === 'vite') { -%>
+Vite gives fast HMR and a Rollup-based production build. Config lives in `vite.config.<%= ext %>`.
 
-**Best practice:** lock Node and package manager versions in CI for reproducible builds.
+**Day-to-day:** `<%= packageManager === 'npm' ? 'npm run' : packageManager %> dev` → http://localhost:5173
+<% } else if (buildTool === 'webpack') { -%>
+Webpack is configured in `webpack.config.js` with Babel (or TS pipeline), HtmlWebpackPlugin, and a dev server.
+
+**Day-to-day:** `<%= packageManager === 'npm' ? 'npm run' : packageManager %> dev` → http://localhost:3000
+<% } else { -%>
+Your bundler is wired with scripts in `package.json`. Prefer keeping config minimal; add plugins only when needed.
+<% } -%>
+
+**Best practices**
+
+- Lock Node and package manager versions in CI.
+- Treat `build` as the source of truth for production issues (not only `dev`).
+- Keep path aliases (`@/`) in sync between TS config and the bundler.
 
 ## Language — <%= stackLabels.language %>
 
 <% if (isTypeScript) { -%>
-TypeScript catches contract mistakes early. Keep `strict` on; avoid `any` except at true boundaries.
+TypeScript catches contract mistakes early. Keep `strict` on; avoid `any` except at true boundaries (third-party quirks, gradual migrations).
+
+**Pattern:** model API payloads in `src/types/models.<%= ext %>`, not inline in components.
 <% } else { -%>
-JavaScript keeps the barrier low. Consider migrating hot modules to TypeScript as the app grows.
+JavaScript keeps the barrier low. Prefer JSDoc for public helpers, and consider migrating hot modules to TypeScript as the app grows.
 <% } -%>
 
 ## Routing — <%= stackLabels.router %>
 
 Client-side navigation with nested layouts. Keep route modules thin; push data loading into features.
 
+**Best practices**
+
+- Colocate route-level UI under `src/routes/`.
+- Avoid fetching in layout components unless every child needs the data.
+- Use loading/error UI at the feature boundary.
+
 ## Client state — <%= stackLabels.stateManagement %>
 
 Use for UI state (modals, wizards, ephemeral counters). Do **not** mirror server entities here if you have a server-state library.
 
+**Live demo:** `/counter` → `src/features/counter/`
+
+**Best practices**
+
+- Feature-local state first; promote to global only when multiple distant trees need it.
+- Keep stores/slices focused on one domain.
+- Prefer selectors/hooks over reading the whole store in components.
+
 ## Server state — <%= stackLabels.serverState %>
 
-Caches remote data, handles loading/error, and deduplicates requests. Example: posts panel on the home page.
+Caches remote data, handles loading/error, and deduplicates requests.
+
+**Live demo:** `/posts` → `src/features/posts/PostsPanel.<%= jsxExt %>`
+
+<% if (serverState === 'rtk-query') { -%>
+**How to use**
+
+1. Define endpoints in `src/store/postsApi.<%= ext %>` (or a new `*Api` slice).
+2. Export hooks (`useGetPostsQuery`, `useCreateFeedbackMutation`).
+3. Call hooks from features — no manual `useEffect` fetching.
+
+**Best practices**
+
+- Use `tagTypes` + `providesTags` / `invalidatesTags` for cache coherence.
+- Put auth headers in `prepareHeaders`, not in every endpoint.
+- Prefer mutations for writes; invalidate related query tags after success.
+<% } else if (serverState === 'tanstack-query') { -%>
+**How to use**
+
+```tsx
+const { data, isLoading, error, refetch } = useQuery({
+  queryKey: ['posts'],
+  queryFn: ({ signal }) => fetchPosts(signal),
+});
+```
+
+**Best practices**
+
+- Stable, hierarchical query keys: `['posts']`, `['posts', id]`.
+- Pass `signal` into your HTTP helpers so navigations cancel in-flight work.
+- Keep `queryFn` thin — call domain API helpers, not raw HTTP.
+<% } else if (serverState === 'swr') { -%>
+**How to use**
+
+SWR is configured in `providers.<%= jsxExt %>` with a shared `fetcher`. Components call `useSWR(key)`.
+
+**Best practices**
+
+- Keys should be URLs or stable resource identifiers.
+- Use `mutate` for local revalidation after writes.
+<% } else { -%>
+No dedicated server-state library was selected. Prefer adding one before the app grows past a few screens.
+<% } -%>
 
 ## Forms — <%= stackLabels.forms %> / Validation — <%= stackLabels.validation %>
 
 Schemas define the contract; the form library binds inputs. Share schemas with API payloads when possible.
 
+**Live demo:** `/feedback` → `src/features/feedback/FeedbackForm.<%= jsxExt %>`
+**Schemas:** `src/lib/validation.<%= ext %>`
+
+**Best practices**
+
+- Validate on submit (and optionally on blur) — avoid blocking every keystroke unless UX requires it.
+- Keep error messages user-facing; log technical details separately.
+- Reuse the same schema on the server if you own both sides.
+
 ## Styling — <%= stackLabels.styling %> / UI — <%= stackLabels.uiLibrary %>
 
 Tokens and primitives establish visual consistency. Prefer composition over one-off CSS.
 
+**Best practices**
+
+- Wrap third-party primitives in thin adapters (`UiButton`) so swapping kits later is cheaper.
+- Keep global tokens in `src/styles/`; keep feature-specific styles close to the feature.
+
 ## API — <%= stackLabels.apiLayer %>
 
-Centralize base URL, headers, and error logging in `src/services/api.<%= ext %>`.
+<% if (apiLayer === 'none') { -%>
+HTTP is owned by **RTK Query** (`fetchBaseQuery`). There is intentionally **no** separate Axios/Fetch client in this project.
+
+See `docs/examples/data-fetching.md` and `src/store/postsApi.<%= ext %>`.
+<% } else if (apiLayer === 'axios') { -%>
+Axios is configured under `src/services/http/` with:
+
+- request interceptors (auth token, request IDs)
+- response interceptors (normalized `ApiError`, 401 event)
+- domain helpers in `src/services/api.<%= ext %>`
+
+See `docs/examples/api.md` for patterns and examples.
+<% } else { -%>
+A shared Fetch wrapper lives under `src/services/http/` with timeout, auth headers, request IDs, and normalized `ApiError`s. Domain helpers sit in `src/services/api.<%= ext %>`.
+
+See `docs/examples/api.md` for patterns and examples.
+<% } -%>
 
 ## Quality gates
 
@@ -52,4 +154,4 @@ Centralize base URL, headers, and error logging in `src/services/api.<%= ext %>`
 | Git hooks | Husky + lint-staged + commitlint |
 | Structure | Feature-based + `@/` aliases |
 
-See `docs/examples/` for focused usage notes.
+See `docs/examples/` for focused usage notes with deeper examples.

package/dist/templates/src/features/feedback/FeedbackForm.tsx.ejs

@@ -32,7 +32,11 @@ import { validateFeedback<% if (isTypeScript) { %>, type FeedbackValues<% } %> }
 import { feedbackSchema<% if (isTypeScript) { %>, type FeedbackValues<% } %> } from '@/lib/validation';
 <% } -%>
 <% } -%>
+<% if (serverState === 'rtk-query') { -%>
+import { useCreateFeedbackMutation } from '@/store/postsApi';
+<% } else { -%>
 import { createFeedback } from '@/services/api';
+<% } -%>
 import { UiButton } from '@/components/ui/UiButton';
 
 const defaults<% if (isTypeScript) { %>: FeedbackValues<% } %> = {
@@ -43,6 +47,12 @@ const defaults<% if (isTypeScript) { %>: FeedbackValues<% } %> = {
 
 export function FeedbackForm() {
   const [status, setStatus] = useState<% if (isTypeScript) { %><string | null><% } %>(null);
+<% if (serverState === 'rtk-query') { -%>
+  const [createFeedbackMutation] = useCreateFeedbackMutation();
+  const createFeedback = async (values<% if (isTypeScript) { %>: FeedbackValues<% } %>) => {
+    await createFeedbackMutation(values).unwrap();
+  };
+<% } -%>
 
 <% if (forms === 'react-hook-form') { -%>
   const {

package/dist/templates/src/features/posts/PostsPanel.tsx.ejs

@@ -14,7 +14,7 @@ export function PostsPanel() {
 <% if (serverState === 'tanstack-query') { -%>
   const { data, isLoading, error, refetch, isFetching } = useQuery({
     queryKey: ['posts'],
-    queryFn: fetchPosts,
+    queryFn: ({ signal }) => fetchPosts(signal),
   });
 <% } else if (serverState === 'swr') { -%>
   const { data, error, isLoading, isValidating, mutate } = useSWR('/posts?_limit=5');

package/dist/templates/src/routes/PostsPage.tsx.ejs

@@ -7,8 +7,13 @@ export function PostsPage() {
         <p className="eyebrow">Server state</p>
         <h1>Posts</h1>
         <p className="lede">
-          Fetches sample posts via <strong><%= stackLabels.serverState === 'None' ? stackLabels.apiLayer : stackLabels.serverState %></strong>{' '}
-          and <strong><%= stackLabels.apiLayer %></strong>.
+          Fetches sample posts via <strong><%= stackLabels.serverState === 'None' ? stackLabels.apiLayer : stackLabels.serverState %></strong>
+<% if (apiLayer !== 'none' && serverState !== 'rtk-query') { -%>
+          {' '}and <strong><%= stackLabels.apiLayer %></strong>
+<% } else if (serverState === 'rtk-query') { -%>
+          {' '}(HTTP via <code>fetchBaseQuery</code>)
+<% } -%>
+          .
         </p>
       </header>
       <PostsPanel />

package/dist/templates/src/types/index.ts.ejs

@@ -1,6 +1,6 @@
 <% if (isTypeScript) { -%>
 /** Shared domain types used across features. */
-export type { Post } from '@/services/api';
+export type { Post, FeedbackPayload } from './models';
 <% } else { -%>
 // Shared types live here when you migrate hot paths to TypeScript.
 export {};

package/dist/templates/src/types/models.ts.ejs

@@ -0,0 +1,18 @@
+<% if (isTypeScript) { -%>
+/** Shared domain models used by features and the HTTP / RTK layers. */
+export interface Post {
+  userId: number;
+  id: number;
+  title: string;
+  body: string;
+}
+
+export interface FeedbackPayload {
+  name: string;
+  email: string;
+  message: string;
+}
+<% } else { -%>
+// Shared domain models live here when you migrate hot paths to TypeScript.
+export {};
+<% } -%>

package/dist/types.d.ts

@@ -12,7 +12,7 @@ export type E2ETesting = 'playwright' | 'cypress' | 'none';
 export type VisualTesting = 'storybook' | 'chromatic' | 'none';
 export type Linting = 'eslint' | 'biome';
 export type Formatting = 'prettier' | 'stylelint';
-export type ApiLayer = 'axios' | 'fetch';
+export type ApiLayer = 'axios' | 'fetch' | 'none';
 export type PackageManager = 'pnpm' | 'yarn' | 'npm';
 export type ErrorTracking = 'sentry' | 'bugsnag' | 'logrocket' | 'datadog' | 'none';
 export interface ProjectAnswers {

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AACxF,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,YAAY,CAAC;AACnD,MAAM,MAAM,MAAM,GAAG,cAAc,GAAG,iBAAiB,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AACjF,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAG,KAAK,GAAG,WAAW,GAAG,MAAM,CAAC;AAC1E,MAAM,MAAM,KAAK,GAAG,iBAAiB,GAAG,QAAQ,GAAG,eAAe,GAAG,MAAM,CAAC;AAC5E,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,SAAS,GAAG,KAAK,GAAG,MAAM,CAAC;AACpE,MAAM,MAAM,OAAO,GAAG,UAAU,GAAG,aAAa,GAAG,mBAAmB,GAAG,MAAM,CAAC;AAChF,MAAM,MAAM,SAAS,GACjB,KAAK,GACL,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,aAAa,GACb,MAAM,CAAC;AACX,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,WAAW,GAAG,MAAM,CAAC;AAC/D,MAAM,MAAM,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACzC,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,WAAW,CAAC;AAClD,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AACzC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC;AAEpF,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,eAAe,CAAC;IACjC,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,cAAc,EAAE,cAAc,CAAC;IAC/B,aAAa,EAAE,aAAa,CAAC;IAC7B,mBAAmB,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,YAAY,EAAE,OAAO,CAAC;IACtB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,MAAM,EAAE,KAAK,GAAG,KAAK,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;CACd"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AACxF,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,YAAY,CAAC;AACnD,MAAM,MAAM,MAAM,GAAG,cAAc,GAAG,iBAAiB,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AACjF,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAG,KAAK,GAAG,WAAW,GAAG,MAAM,CAAC;AAC1E,MAAM,MAAM,KAAK,GAAG,iBAAiB,GAAG,QAAQ,GAAG,eAAe,GAAG,MAAM,CAAC;AAC5E,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,SAAS,GAAG,KAAK,GAAG,MAAM,CAAC;AACpE,MAAM,MAAM,OAAO,GAAG,UAAU,GAAG,aAAa,GAAG,mBAAmB,GAAG,MAAM,CAAC;AAChF,MAAM,MAAM,SAAS,GACjB,KAAK,GACL,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,aAAa,GACb,MAAM,CAAC;AACX,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,WAAW,GAAG,MAAM,CAAC;AAC/D,MAAM,MAAM,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACzC,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,WAAW,CAAC;AAClD,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAClD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC;AAEpF,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,eAAe,CAAC;IACjC,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,cAAc,EAAE,cAAc,CAAC;IAC/B,aAAa,EAAE,aAAa,CAAC;IAC7B,mBAAmB,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,YAAY,EAAE,OAAO,CAAC;IACtB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,MAAM,EAAE,KAAK,GAAG,KAAK,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;CACd"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-react-starter-kit",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Interactive CLI to scaffold a production-ready React app with your preferred stack",
   "keywords": [
     "react",

package/templates/README.md.ejs

@@ -45,7 +45,7 @@ npm run dev
 <% } -%>
 ```
 
-Open the URL printed in the terminal (typically `http://localhost:5173`).
+Open the URL printed in the terminal (typically `http://localhost:<%= buildTool === 'webpack' ? 3000 : 5173 %>`).
 
 ## Environment setup
 

package/templates/__when_apiLayer_axios__/src/services/api.ts.ejs

@@ -0,0 +1,23 @@
+import { apiGet, apiPost } from '@/services/http';
+<% if (isTypeScript) { -%>
+import type { FeedbackPayload, Post } from '@/types/models';
+<% } -%>
+
+/**
+ * Domain API methods — keep React components free of raw URLs and HTTP details.
+ * Call these from TanStack Query / SWR queryFns, or directly for simple mutations.
+ */
+export async function fetchPosts(signal<% if (isTypeScript) { %>?: AbortSignal<% } %>) {
+  return apiGet<% if (isTypeScript) { %><Post[]><% } %>('/posts?_limit=5', { signal });
+}
+
+export async function createFeedback(
+  payload<% if (isTypeScript) { %>: FeedbackPayload<% } %>,
+  signal<% if (isTypeScript) { %>?: AbortSignal<% } %>,
+) {
+  return apiPost('/posts', payload, { signal });
+}
+
+<% if (isTypeScript) { -%>
+export type { FeedbackPayload, Post } from '@/types/models';
+<% } -%>