#63 chunk application by page (#84)

* feat: converted into monorepo for root package.json management

* fix: update github workflows

* fix: rename frontend package to frontend for filtering

* fix: workflows to use correct pnpm filtering

* fix: workflows for uses clause

* feat: upgrade react-router to v7 & dynamic chunking

Author: amoreaulemay

frontend/package.json

@@ -15,6 +15,7 @@
     "prepare": "pnpm -w lefthook install"
   },
   "dependencies": {
+    "@loadable/component": "^5.16.4",
     "@radix-ui/react-dialog": "^1.1.5",
     "@radix-ui/react-dropdown-menu": "^2.1.5",
     "@radix-ui/react-navigation-menu": "^1.2.4",
@@ -32,13 +33,14 @@
     "lucide-react": "^0.474.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^7.1.5",
+    "react-router": "^7.1.5",
     "recharts": "^2.15.1",
     "tailwind-merge": "^3.0.1",
     "tailwindcss": "^4.0.3",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@types/loadable__component": "^5.13.9",
     "@types/node": "^22.13.0",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",

frontend/src/App.tsx

@@ -1,15 +1,18 @@
 import { COLLECTION_ID, DATABASE_ID, getDatabase } from '@/lib/Auth'
 import { getUser } from '@/lib/Auth.ts'
 import type { CollectionRow } from '@/types'
+import loadable from '@loadable/component'
 import { type Models, Query } from 'appwrite'
 import { useEffect, useState } from 'react'
-import { Route, Routes } from 'react-router-dom'
+import { Route, Routes } from 'react-router'
 import { Header } from './components/ui/Header.tsx'
 import { Toaster } from './components/ui/toaster.tsx'
-import { Collection } from './pages/collection/Collection.tsx'
-import { Overview } from './pages/overview/Overview.tsx'
-import { Trade } from './pages/trade/Trade.tsx'
-import { Verify } from './pages/verify/Verify.tsx'
+
+// Lazy import for chunking
+const Overview = loadable(() => import('./pages/overview/Overview.tsx'))
+const Verify = loadable(() => import('./pages/verify/Verify.tsx'))
+const Collection = loadable(() => import('./pages/collection/Collection.tsx'))
+const Trade = loadable(() => import('./pages/trade/Trade.tsx'))
 
 function App() {
   const [user, setUser] = useState<Models.User<Models.Preferences> | null>(null)

frontend/src/components/ui/Header.tsx

@@ -7,7 +7,7 @@ import { logout } from '@/lib/Auth.ts'
 import type { Models } from 'appwrite'
 import { ChevronRight } from 'lucide-react'
 import type { FC } from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 
 interface Props {
   user: Models.User<Models.Preferences> | null

frontend/src/main.tsx

@@ -1,6 +1,6 @@
-import { StrictMode } from 'react'
+import { StrictMode, Suspense } from 'react'
 import { createRoot } from 'react-dom/client'
-import { HashRouter } from 'react-router-dom'
+import { HashRouter } from 'react-router'
 import App from './App.tsx'
 import './index.css'
 
@@ -11,8 +11,10 @@ if (!root) {
 
 createRoot(root).render(
   <StrictMode>
-    <HashRouter>
-      <App />
-    </HashRouter>
+    <Suspense fallback={<div>Loading...</div>}>
+      <HashRouter>
+        <App />
+      </HashRouter>
+    </Suspense>
   </StrictMode>,
 )

frontend/src/pages/collection/Collection.tsx

@@ -9,11 +9,13 @@ interface Props {
   setOwnedCards: (cards: CollectionRow[]) => void
 }
 
-export const Collection: FC<Props> = ({ user, ownedCards, setOwnedCards }) => {
+const Collection: FC<Props> = ({ user, ownedCards, setOwnedCards }) => {
   if (user) {
     // TODO: Refactor that cards still show without a user, but prompts for a login if you are not logged in yet.
     return <Cards user={user} ownedCards={ownedCards} setOwnedCards={setOwnedCards} />
   }
 
   return null
 }
+
+export default Collection

frontend/src/pages/overview/Overview.tsx

@@ -10,7 +10,7 @@ interface Props {
   ownedCards: CollectionRow[]
 }
 
-export const Overview: FC<Props> = ({ user, ownedCards }) => {
+const Overview: FC<Props> = ({ user, ownedCards }) => {
   const ownedCardsCount = ownedCards.reduce((total, card) => total + card.amount_owned, 0)
   if (user) {
     return (
@@ -128,3 +128,5 @@ const GradientCard: FC<GradientCardProps> = ({ title, paragraph, className }) =>
     </div>
   )
 }
+
+export default Overview

frontend/src/pages/trade/Trade.tsx

@@ -9,7 +9,7 @@ interface Props {
   ownedCards: CollectionRow[]
 }
 
-export function Trade({ user, ownedCards }: Props) {
+function Trade({ user, ownedCards }: Props) {
   const lookingForTradeCards = () => {
     const allCards = [...a1Cards, ...a2Cards, ...a1aCards, ...paCards]
     const missingCards = allCards.filter((ac) => ownedCards.findIndex((oc) => oc.card_id === ac.card_id) === -1)
@@ -45,3 +45,5 @@ export function Trade({ user, ownedCards }: Props) {
 
   return null
 }
+
+export default Trade

frontend/src/pages/verify/Verify.tsx

@@ -1,7 +1,7 @@
+import { login } from '@/lib/Auth.ts'
 import { useEffect, useState } from 'react'
-import { login } from '../../lib/Auth.ts'
 
-export const Verify = () => {
+const Verify = () => {
   const [errorLoggingIn, setErrorLoggingIn] = useState(false)
 
   useEffect(() => {
@@ -26,3 +26,5 @@ export const Verify = () => {
     </div>
   )
 }
+
+export default Verify

frontend/tsconfig.app.json

@@ -17,6 +17,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
+    "composite": true,
+    "forceConsistentCasingInFileNames": true,
 
     "baseUrl": ".",
     "paths": {

frontend/tsconfig.json

@@ -2,6 +2,8 @@
   "files": [],
   "references": [{ "path": "./tsconfig.app.json" }],
   "compilerOptions": {
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
     "paths": {
       "@assets/*": ["./assets/*"],