diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/App.tsx b/PROJECTS/beginner/canary-token-generator/frontend/src/App.tsx index a7d82d6a..2c1e918b 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/App.tsx +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/App.tsx @@ -7,29 +7,14 @@ import { QueryClientProvider } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' import { RouterProvider } from 'react-router-dom' import { Toaster } from 'sonner' - import { queryClient } from '@/core/api' import { router } from '@/core/app/routers' -import '@/core/app/toast.module.scss' export default function App(): React.ReactElement { return ( -
- - -
+ +
) diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/config.ts b/PROJECTS/beginner/canary-token-generator/frontend/src/config.ts index 5013c41b..c323d473 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/config.ts +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/config.ts @@ -2,31 +2,12 @@ // ©AngelaMos | 2026 // config.ts // =================== -const API_VERSION = 'v1' - -export const API_ENDPOINTS = { - USERS: { - BASE: `/${API_VERSION}/users`, - BY_ID: (id: string) => `/${API_VERSION}/users/${id}`, - }, -} as const - -export const QUERY_KEYS = { - USERS: { - ALL: ['users'] as const, - BY_ID: (id: string) => [...QUERY_KEYS.USERS.ALL, 'detail', id] as const, - }, -} as const export const ROUTES = { HOME: '/', - DASHBOARD: '/dashboard', - SETTINGS: '/settings', } as const -export const STORAGE_KEYS = { - UI: 'ui-storage', -} as const +export type Route = typeof ROUTES export const QUERY_CONFIG = { STALE_TIME: { @@ -43,26 +24,3 @@ export const QUERY_CONFIG = { NONE: 0, }, } as const - -export const HTTP_STATUS = { - OK: 200, - CREATED: 201, - NO_CONTENT: 204, - BAD_REQUEST: 400, - UNAUTHORIZED: 401, - FORBIDDEN: 403, - NOT_FOUND: 404, - CONFLICT: 409, - TOO_MANY_REQUESTS: 429, - INTERNAL_SERVER: 500, -} as const - -export const PAGINATION = { - DEFAULT_PAGE: 1, - DEFAULT_SIZE: 20, - MAX_SIZE: 100, -} as const - -export type ApiEndpoint = typeof API_ENDPOINTS -export type QueryKey = typeof QUERY_KEYS -export type Route = typeof ROUTES diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/routers.tsx b/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/routers.tsx index 58f7c319..84ae0096 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/routers.tsx +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/routers.tsx @@ -8,27 +8,19 @@ import { ROUTES } from '@/config' import { Shell } from './shell' const routes: RouteObject[] = [ - { - path: ROUTES.HOME, - lazy: () => import('@/pages/landing'), - }, { element: , children: [ { - path: ROUTES.DASHBOARD, - lazy: () => import('@/pages/dashboard'), + path: ROUTES.HOME, + lazy: () => import('@/pages/landing'), }, { - path: ROUTES.SETTINGS, - lazy: () => import('@/pages/settings'), + path: '*', + lazy: () => import('@/pages/landing'), }, ], }, - { - path: '*', - lazy: () => import('@/pages/landing'), - }, ] export const router = createBrowserRouter(routes) diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/shell.module.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/shell.module.scss deleted file mode 100644 index 46687aef..00000000 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/shell.module.scss +++ /dev/null @@ -1,4 +0,0 @@ -// =================== -// ©AngelaMos | 2026 -// shell.module.scss -// =================== diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/shell.tsx b/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/shell.tsx index 3296f38f..cf21c94c 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/shell.tsx +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/shell.tsx @@ -1,116 +1,22 @@ -/** - * ©AngelaMos | 2026 - * shell.tsx - */ +// =================== +// ©AngelaMos | 2026 +// shell.tsx +// =================== import { Suspense } from 'react' import { ErrorBoundary } from 'react-error-boundary' -import { GiCardAceClubs, GiCardJoker } from 'react-icons/gi' -import { LuChevronLeft, LuChevronRight, LuMenu } from 'react-icons/lu' -import { NavLink, Outlet, useLocation } from 'react-router-dom' -import { ROUTES } from '@/config' -import { useUIStore } from '@/core/lib' -import styles from './shell.module.scss' - -const NAV_ITEMS = [ - { path: ROUTES.DASHBOARD, label: 'Dashboard', icon: GiCardJoker }, - { path: ROUTES.SETTINGS, label: 'Settings', icon: GiCardAceClubs }, -] +import { Outlet } from 'react-router-dom' function ShellErrorFallback({ error }: { error: Error }): React.ReactElement { - return ( -
-

Something went wrong

-
{error.message}
-
- ) -} - -function ShellLoading(): React.ReactElement { - return
Loading...
-} - -function getPageTitle(pathname: string): string { - const item = NAV_ITEMS.find((i) => i.path === pathname) - return item?.label ?? 'Dashboard' + return
{error.message}
} export function Shell(): React.ReactElement { - const location = useLocation() - const { sidebarOpen, sidebarCollapsed, toggleSidebar, toggleSidebarCollapsed } = - useUIStore() - - const pageTitle = getPageTitle(location.pathname) - return ( -
- - - {sidebarOpen && ( - -

{pageTitle}

-
- - -
- - }> - - - -
- - + + + + + ) } diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/toast.module.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/toast.module.scss deleted file mode 100644 index 62e90ee9..00000000 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/core/app/toast.module.scss +++ /dev/null @@ -1,4 +0,0 @@ -// =================== -// ©AngelaMos | 2026 -// toast.module.scss -// =================== diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/core/lib/index.ts b/PROJECTS/beginner/canary-token-generator/frontend/src/core/lib/index.ts index fddc1db7..88da7857 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/core/lib/index.ts +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/core/lib/index.ts @@ -2,5 +2,3 @@ // ©AngelaMos | 2026 // index.ts // =================== - -export * from './shell.ui.store' diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/core/lib/shell.ui.store.ts b/PROJECTS/beginner/canary-token-generator/frontend/src/core/lib/shell.ui.store.ts deleted file mode 100644 index 7b81a71c..00000000 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/core/lib/shell.ui.store.ts +++ /dev/null @@ -1,63 +0,0 @@ -/** - * ©AngelaMos | 2026 - * ui.store.ts - */ - -import { create } from 'zustand' -import { devtools, persist } from 'zustand/middleware' - -type Theme = 'light' | 'dark' | 'system' - -interface UIState { - theme: Theme - sidebarOpen: boolean - sidebarCollapsed: boolean - setTheme: (theme: Theme) => void - toggleSidebar: () => void - setSidebarOpen: (open: boolean) => void - toggleSidebarCollapsed: () => void -} - -export const useUIStore = create()( - devtools( - persist( - (set) => ({ - theme: 'dark', - sidebarOpen: false, - sidebarCollapsed: false, - - setTheme: (theme) => set({ theme }, false, 'ui/setTheme'), - - toggleSidebar: () => - set( - (state) => ({ sidebarOpen: !state.sidebarOpen }), - false, - 'ui/toggleSidebar' - ), - - setSidebarOpen: (open) => - set({ sidebarOpen: open }, false, 'ui/setSidebarOpen'), - - toggleSidebarCollapsed: () => - set( - (state) => ({ sidebarCollapsed: !state.sidebarCollapsed }), - false, - 'ui/toggleSidebarCollapsed' - ), - }), - { - name: 'ui-storage', - partialize: (state) => ({ - theme: state.theme, - sidebarCollapsed: state.sidebarCollapsed, - }), - } - ), - { name: 'UIStore' } - ) -) - -export const useTheme = (): Theme => useUIStore((s) => s.theme) -export const useSidebarOpen = (): boolean => useUIStore((s) => s.sidebarOpen) -export const useSidebarCollapsed = (): boolean => - useUIStore((s) => s.sidebarCollapsed) diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/dashboard/dashboard.module.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/dashboard/dashboard.module.scss deleted file mode 100644 index 13c333f1..00000000 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/dashboard/dashboard.module.scss +++ /dev/null @@ -1,4 +0,0 @@ -// =================== -// ©AngelaMos | 2026 -// dashboard.module.scss -// =================== diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/dashboard/index.tsx b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/dashboard/index.tsx deleted file mode 100644 index ca908891..00000000 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/dashboard/index.tsx +++ /dev/null @@ -1,62 +0,0 @@ -/** - * ©AngelaMos | 2026 - * index.tsx - */ - -import styles from './dashboard.module.scss' - -const AVAILABLE_STORES = [ - { - name: 'useUIStore()', - file: 'core/lib/shell.ui.store.ts', - description: 'Theme, sidebar open/collapsed state', - }, -] - -const SUGGESTED_FEATURES = [ - 'Stats and metrics', - 'Recent activity feed', - 'Quick actions', - 'Charts and analytics', - 'Notifications overview', - 'Task/project summary', -] - -export function Component(): React.ReactElement { - return ( -
-
-
-

Welcome

-

- Template page — build your dashboard here -

-
- -
-

Available Stores

-
- {AVAILABLE_STORES.map((store) => ( -
- {store.name} -

{store.description}

- {store.file} -
- ))} -
-
- -
-

Suggested Features

-
    - {SUGGESTED_FEATURES.map((feature) => ( -
  • {feature}
  • - ))} -
-
-
-
- ) -} - -Component.displayName = 'Dashboard' diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/index.tsx b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/index.tsx index b0537d42..3c3ecdea 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/index.tsx +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/index.tsx @@ -3,10 +3,8 @@ // index.tsx // =================== -import styles from './landing.module.scss' - export function Component(): React.ReactElement { - return
+ return
} Component.displayName = 'Landing' diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/landing.module.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/landing.module.scss deleted file mode 100644 index 25d0641c..00000000 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/landing/landing.module.scss +++ /dev/null @@ -1,4 +0,0 @@ -// =================== -// ©AngelaMos | 2026 -// landing.module.scss -// =================== diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/settings/index.tsx b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/settings/index.tsx deleted file mode 100644 index 9c8dc9a5..00000000 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/settings/index.tsx +++ /dev/null @@ -1,56 +0,0 @@ -/** - * ©AngelaMos | 2026 - * index.tsx - */ - -import styles from './settings.module.scss' - -const AVAILABLE_STORES = [ - { - name: 'useUIStore()', - file: 'core/lib/shell.ui.store.ts', - description: 'Theme, sidebar open/collapsed state', - }, -] - -export function Component(): React.ReactElement { - return ( -
-
-
-

Settings

-

- Template page — available stores for building your settings UI -

-
- -
-

Available Stores

-
- {AVAILABLE_STORES.map((store) => ( -
- {store.name} -

{store.description}

-
- {store.file} -
-
- ))} -
-
- -
-

Suggested Features

-
    -
  • Profile form
  • -
  • Theme toggle (dark/light)
  • -
  • Notification settings
  • -
  • Application preferences
  • -
-
-
-
- ) -} - -Component.displayName = 'Settings' diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/settings/settings.module.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/pages/settings/settings.module.scss deleted file mode 100644 index 44cc7af6..00000000 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/pages/settings/settings.module.scss +++ /dev/null @@ -1,4 +0,0 @@ -// =================== -// ©AngelaMos | 2026 -// settings.module.scss -// =================== diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/styles.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/styles.scss index 0881c47d..71d5d98d 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/styles.scss +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/styles.scss @@ -12,12 +12,4 @@ #root { min-height: 100vh; min-height: 100dvh; - display: flex; - flex-direction: column; -} - -.app { - flex: 1; - display: flex; - flex-direction: column; } diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_reset.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_reset.scss index 51c3237b..5eded1e9 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_reset.scss +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_reset.scss @@ -38,8 +38,6 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; - background-color: #fff; - color: #000; } h1, diff --git a/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_tokens.scss b/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_tokens.scss index 4eda05cc..88921cc9 100644 --- a/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_tokens.scss +++ b/PROJECTS/beginner/canary-token-generator/frontend/src/styles/_tokens.scss @@ -71,44 +71,6 @@ $tracking-normal: 0; $tracking-wide: 0.025em; $tracking-wider: 0.05em; -// ============================================================================ -// COLORS -// ============================================================================ -$white: hsl(0, 0%, 100%); -$black: hsl(0, 0%, 0%); - -// Auth -$bg-page: hsl(0, 0%, 10.5%); -$bg-card: hsl(0, 0%, 6.2%); - -// Home/landing -$bg-landing: hsl(0, 0%, 10.8%); - -$bg-default: hsl(0, 0%, 7.1%); -$bg-alternative: hsl(0, 0%, 5.9%); -$bg-surface-75: hsl(0, 0%, 9%); -$bg-surface-100: hsl(0, 0%, 12.2%); -$bg-surface-200: hsl(0, 0%, 14.1%); -$bg-surface-300: hsl(0, 0%, 16.1%); -$bg-control: hsl(0, 0%, 10%); -$bg-selection: hsl(0, 0%, 19.2%); -$bg-overlay: hsl(0, 0%, 14.1%); -$bg-overlay-hover: hsl(0, 0%, 18%); - -$border-muted: hsl(0, 0%, 11.1%); -$border-default: hsl(0, 0%, 18%); -$border-strong: hsl(0, 0%, 22.4%); -$border-stronger: hsl(0, 0%, 27.1%); -$border-control: hsl(0, 0%, 22.4%); - -$text-default: hsl(0, 0%, 98%); -$text-light: hsl(0, 0%, 70.6%); -$text-lighter: hsl(0, 0%, 53.7%); -$text-muted: hsl(0, 0%, 30.2%); - -$error-default: hsl(0, 72%, 51%); -$error-light: hsl(0, 72%, 65%); - // ============================================================================ // BORDER RADIUS // ============================================================================