init project

client/src/app/App.tsx

@@ -0,0 +1,21 @@
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
+import { MainLayout } from '@/app/layout/MainLayout'
+import { AppProviders } from '@/app/providers/AppProviders'
+import { AdminPage } from '@/pages/admin'
+import { HomePage } from '@/pages/home'
+
+export function App() {
+  return (
+    <AppProviders>
+      <BrowserRouter>
+        <MainLayout>
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/admin" element={<AdminPage />} />
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </MainLayout>
+      </BrowserRouter>
+    </AppProviders>
+  )
+}

client/src/app/layout/MainLayout.tsx

@@ -0,0 +1,49 @@
+import { type PropsWithChildren } from 'react'
+import AppBar from '@mui/material/AppBar'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Container from '@mui/material/Container'
+import Toolbar from '@mui/material/Toolbar'
+import Typography from '@mui/material/Typography'
+import { Link as RouterLink } from 'react-router-dom'
+import { STORE_NAME } from '@/shared/config'
+
+export function MainLayout({ children }: PropsWithChildren) {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+      <AppBar position="sticky" color="primary" elevation={0} sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Toolbar>
+          <Typography
+            component={RouterLink}
+            to="/"
+            variant="h6"
+            sx={{ flexGrow: 1, textDecoration: 'none', color: 'inherit' }}
+          >
+            {STORE_NAME}
+          </Typography>
+          <Button component={RouterLink} to="/" color="inherit">
+            Каталог
+          </Button>
+          <Button component={RouterLink} to="/admin" color="inherit">
+            Админка
+          </Button>
+        </Toolbar>
+      </AppBar>
+      <Box component="main" sx={{ flex: 1, py: 3 }}>
+        <Container maxWidth="lg">{children}</Container>
+      </Box>
+      <Box
+        component="footer"
+        sx={{
+          py: 2,
+          textAlign: 'center',
+          borderTop: 1,
+          borderColor: 'divider',
+          color: 'text.secondary',
+        }}
+      >
+        <Typography variant="body2">Изделия ручной работы · доставка по договорённости</Typography>
+      </Box>
+    </Box>
+  )
+}

client/src/app/providers/AppProviders.tsx

@@ -0,0 +1,48 @@
+import { type PropsWithChildren, useMemo } from 'react'
+import CssBaseline from '@mui/material/CssBaseline'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+export function AppProviders({ children }: PropsWithChildren) {
+  const queryClient = useMemo(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 30_000,
+            retry: 1,
+            refetchOnWindowFocus: false,
+          },
+        },
+      }),
+    [],
+  )
+
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode: 'light',
+          primary: { main: '#6d4c41' },
+          secondary: { main: '#8d6e63' },
+          background: { default: '#faf8f5', paper: '#ffffff' },
+        },
+        shape: { borderRadius: 12 },
+        typography: {
+          fontFamily: '"Segoe UI", system-ui, sans-serif',
+          h4: { fontWeight: 700 },
+          h5: { fontWeight: 600 },
+        },
+      }),
+    [],
+  )
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </QueryClientProvider>
+  )
+}

client/src/app/styles/global.css

@@ -0,0 +1,13 @@
+:root {
+  color-scheme: light;
+}
+
+html,
+body,
+#root {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+}