create-react-starter-kit 1.0.0

package/templates/src/routes/AboutPage.tsx.ejs

@@ -0,0 +1,30 @@
+export function AboutPage() {
+  return (
+    <div className="page about-page">
+      <h1>About this starter</h1>
+      <p>
+        Generated with <strong>create-react-starter-kit</strong> using a scalable{' '}
+        <strong>feature-based</strong> layout (domain modules under <code>src/features</code>) —
+        the same organizational approach used across large production React codebases.
+      </p>
+      <ul className="about-list">
+        <li>
+          <strong>Extend features</strong> under <code>src/features/&lt;name&gt;/</code> — keep
+          domain logic close to the UI that owns it.
+        </li>
+        <li>
+          <strong>Shared primitives</strong> live in <code>src/components/</code> and{' '}
+          <code>src/lib/</code>. Prefer imports via the <code>@/</code> path alias.
+        </li>
+        <li>
+          <strong>Docs</strong> in <code>docs/</code> explain architecture, testing, and production
+          habits for this stack.
+        </li>
+      </ul>
+      <p>
+        Prefer reading <code>docs/getting-started.md</code> next, then{' '}
+        <code>docs/selected-stack.md</code> for library-specific guidance.
+      </p>
+    </div>
+  );
+}

package/templates/src/routes/HomePage.tsx.ejs

@@ -0,0 +1,47 @@
+import { CounterPanel } from '@/features/counter/CounterPanel';
+import { PostsPanel } from '@/features/posts/PostsPanel';
+import { FeedbackForm } from '@/features/feedback/FeedbackForm';
+import { StackBadge } from '@/components/StackBadge';
+import { useToast } from '@/components/ui/Toast';
+import { UiButton } from '@/components/ui/UiButton';
+
+export function HomePage() {
+  const { push } = useToast();
+
+  return (
+    <div className="page home-page">
+      <section className="hero">
+        <p className="eyebrow">Starter workspace</p>
+        <h1><%= projectName %></h1>
+        <p className="lede">
+          A minimal, production-shaped React app wired for your selected stack. Explore the panels
+          below — each one is a real usage example, not a placeholder.
+        </p>
+        <div className="hero-actions">
+          <UiButton onClick={() => push('Toast system is ready', 'success')}>
+            Show toast
+          </UiButton>
+          <a className="text-link" href="/about">
+            Read about the stack →
+          </a>
+        </div>
+        <div className="stack-row">
+          <StackBadge label="Build" value="<%= stackLabels.buildTool %>" />
+          <StackBadge label="Language" value="<%= stackLabels.language %>" />
+          <StackBadge label="Router" value="<%= stackLabels.router %>" />
+          <StackBadge label="State" value="<%= stackLabels.stateManagement %>" />
+          <StackBadge label="Data" value="<%= stackLabels.serverState %>" />
+          <StackBadge label="UI" value="<%= stackLabels.uiLibrary %>" />
+        </div>
+      </section>
+
+      <section className="panels">
+<% if (stateManagement !== 'none') { -%>
+        <CounterPanel />
+<% } -%>
+        <PostsPanel />
+        <FeedbackForm />
+      </section>
+    </div>
+  );
+}

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

@@ -0,0 +1,84 @@
+<% if (apiLayer === 'axios') { -%>
+import axios from 'axios';
+import { env } from '@/config/env';
+
+const baseURL = env.apiBaseUrl;
+
+export const apiClient = axios.create({
+  baseURL,
+  headers: { 'Content-Type': 'application/json' },
+  timeout: 10_000,
+});
+
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    console.error('[api]', error);
+    return Promise.reject(error);
+  },
+);
+
+export async function apiGet<% if (isTypeScript) { %><T = unknown><% } %>(path<% if (isTypeScript) { %>: string<% } %>)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  const { data } = await apiClient.get<% if (isTypeScript) { %><T><% } %>(path);
+  return data;
+}
+
+export async function apiPost<% if (isTypeScript) { %><T = unknown, B = unknown><% } %>(
+  path<% if (isTypeScript) { %>: string<% } %>,
+  body<% if (isTypeScript) { %>: B<% } %>,
+)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  const { data } = await apiClient.post<% if (isTypeScript) { %><T><% } %>(path, body);
+  return data;
+}
+<% } else { -%>
+import { env } from '@/config/env';
+
+const baseURL = env.apiBaseUrl;
+
+async function request<% if (isTypeScript) { %><T = unknown><% } %>(
+  path<% if (isTypeScript) { %>: string<% } %>,
+  init<% if (isTypeScript) { %>?: RequestInit<% } %>,
+)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  const response = await fetch(`${baseURL}${path}`, {
+    headers: { 'Content-Type': 'application/json', ...(init?.headers ?? {}) },
+    ...init,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Request failed: ${response.status}`);
+  }
+
+  return response.json();
+}
+
+export async function apiGet<% if (isTypeScript) { %><T = unknown><% } %>(path<% if (isTypeScript) { %>: string<% } %>)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  return request<% if (isTypeScript) { %><T><% } %>(path);
+}
+
+export async function apiPost<% if (isTypeScript) { %><T = unknown, B = unknown><% } %>(
+  path<% if (isTypeScript) { %>: string<% } %>,
+  body<% if (isTypeScript) { %>: B<% } %>,
+)<% if (isTypeScript) { %>: Promise<T><% } %> {
+  return request<% if (isTypeScript) { %><T><% } %>(path, {
+    method: 'POST',
+    body: JSON.stringify(body),
+  });
+}
+<% } -%>
+
+<% if (isTypeScript) { -%>
+export interface Post {
+  userId: number;
+  id: number;
+  title: string;
+  body: string;
+}
+<% } -%>
+
+export async function fetchPosts() {
+  return apiGet<% if (isTypeScript) { %><Post[]><% } %>('/posts?_limit=5');
+}
+
+export async function createFeedback(payload<% if (isTypeScript) { %>: { name: string; email: string; message: string }<% } %>) {
+  return apiPost('/posts', payload);
+}

package/templates/src/store/index.ts.ejs

@@ -0,0 +1,80 @@
+<% if (stateManagement === 'redux') { -%>
+import { configureStore, createSlice } from '@reduxjs/toolkit';
+<% if (isTypeScript) { -%>
+import type { PayloadAction } from '@reduxjs/toolkit';
+<% } -%>
+<% if (serverState === 'rtk-query') { -%>
+import { postsApi } from './postsApi';
+<% } -%>
+
+<% if (isTypeScript) { -%>
+interface CounterState {
+  value: number;
+}
+<% } -%>
+
+const initialState<% if (isTypeScript) { %>: CounterState<% } %> = { value: 0 };
+
+const counterSlice = createSlice({
+  name: 'counter',
+  initialState,
+  reducers: {
+    increment(state) {
+      state.value += 1;
+    },
+    decrement(state) {
+      state.value -= 1;
+    },
+    setValue(state, action<% if (isTypeScript) { %>: PayloadAction<number><% } %>) {
+      state.value = action.payload;
+    },
+  },
+});
+
+export const { increment, decrement, setValue } = counterSlice.actions;
+
+export const store = configureStore({
+  reducer: {
+    counter: counterSlice.reducer,
+<% if (serverState === 'rtk-query') { -%>
+    [postsApi.reducerPath]: postsApi.reducer,
+<% } -%>
+  },
+<% if (serverState === 'rtk-query') { -%>
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(postsApi.middleware),
+<% } -%>
+});
+
+<% if (isTypeScript) { -%>
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+<% } -%>
+<% } else if (stateManagement === 'zustand') { -%>
+import { create } from 'zustand';
+
+<% if (isTypeScript) { -%>
+interface CounterStore {
+  value: number;
+  increment: () => void;
+  decrement: () => void;
+  setValue: (value: number) => void;
+}
+<% } -%>
+
+export const useCounterStore = create<% if (isTypeScript) { %><CounterStore><% } %>((set) => ({
+  value: 0,
+  increment: () => set((state) => ({ value: state.value + 1 })),
+  decrement: () => set((state) => ({ value: state.value - 1 })),
+  setValue: (value) => set({ value }),
+}));
+<% } else if (stateManagement === 'jotai') { -%>
+import { atom } from 'jotai';
+
+export const counterAtom = atom(0);
+<% } else if (stateManagement === 'context') { -%>
+export { AppStateProvider, useAppState } from './context';
+<% } else { -%>
+// Client state management was set to "None".
+export {};
+<% } -%>