app

src/app/env.ts

@@ -0,0 +1,6 @@
+import env from "codeforlife/env"
+
+export * from "codeforlife/env"
+
+// Example of how to get an environment variable.
+export const EXAMPLE = env.VITE_EXAMPLE ?? "DEFAULT_VALUE"

src/app/hooks.ts

@@ -0,0 +1,13 @@
+// This file serves as a central hub for re-exporting pre-typed Redux hooks.
+// These imports are restricted elsewhere to ensure consistent
+// usage of typed hooks throughout the application.
+// We disable the ESLint rule here because this is the designated place
+// for importing and re-exporting the typed versions of hooks.
+/* eslint-disable @typescript-eslint/no-restricted-imports */
+import { useDispatch, useSelector } from "react-redux"
+
+import type { AppDispatch, RootState } from "./store"
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+export const useAppSelector = useSelector.withTypes<RootState>()

src/app/schemas.ts

@@ -0,0 +1,3 @@
+import * as yup from "yup"
+
+export const fruitNameSchema = yup.string().max(50)

src/app/store.ts

@@ -0,0 +1,26 @@
+import type { Action, ThunkAction } from "@reduxjs/toolkit"
+import { combineSlices } from "@reduxjs/toolkit"
+import { makeStore } from "codeforlife/utils/store"
+
+import api from "../api"
+
+// `combineSlices` automatically combines the reducers using
+// their `reducerPath`s, therefore we no longer need to call `combineReducers`.
+const reducer = combineSlices(api)
+
+// Infer the `RootState` type from the root reducer
+export type RootState = ReturnType<typeof reducer>
+
+// TODO: create middleware for api errors.
+// https://redux-toolkit.js.org/rtk-query/usage/error-handling#handling-errors-at-a-macro-level
+const store = makeStore({ reducer, middlewares: [api.middleware] })
+
+export default store
+export type AppStore = typeof store
+export type AppDispatch = AppStore["dispatch"]
+export type AppThunk<ThunkReturnType = void> = ThunkAction<
+  ThunkReturnType,
+  RootState,
+  unknown,
+  Action
+>

src/app/theme.ts

@@ -0,0 +1,15 @@
+import {
+  type ThemeOptions,
+  createTheme,
+  responsiveFontSizes,
+} from "@mui/material"
+import { themeOptions as cflThemeOptions } from "codeforlife/theme"
+
+// Unpack the base options to extend the theme
+export const themeOptions: ThemeOptions = {
+  ...cflThemeOptions,
+}
+
+const theme = responsiveFontSizes(createTheme(themeOptions))
+
+export default theme