Framework Best Practices

Frontend Best Practices

1. Framework: Routing

Using expo-router allows you to manage navigation with built-in abstractions instead of manually handling screen state. This follows React Native conventions, supports nested screens, back navigation, and deep linking, and avoids reinventing routing logic. Components used in expo router are the following: Stack, useRouter, Tabs, usePathname, Link, useFocusEffect, useLocalSearchParams, type {Href}

Code Implementation

in frontend/app/(tabs)/_layout.tsx

import { Tabs, usePathname, useRouter } from "expo-router";

2. Framework: UI Components

By using @/components/ui, we're taking advantage of a consistent, reusable set of prebuilt interface components across the application. This abstraction makes UI development easier since it provides the benefit of consistency in style, it avoids duplicated code, and it ensures visual consistency. The components utilize modern React Native design best practices and make developing interfaces faster. The components also prevent developers from having to build a UI component from scratch every time.

Code Implementation

in frontend/app/(tabs)/dashboard.tsx

import { Badge, Button, Icon, Text } from "@/components/ui";

3. Framework: Responsive Layouts (useWindowDimensions)

Using useWindowDimensions allows the UI to adapt dynamically to different screen sizes on web and mobile platforms. This avoids hardcoding dimensions, follows React Native best practices, and ensures consistent layouts across devices.

Code Implementation

in frontend/hooks/use-breakpoint.ts

import { useWindowDimensions } from "react-native";

---

Backend Best Practices

1. Framework:

Code Implementation

2. Framework:

Code Implementation

3. Framework:

Code Implementation

N8N Best Practices

1. Framework:

Code Implementation

2. Framework:

Code Implementation

3. Framework:

Code Implementation