Avnyr cd5ad2e1e4 feat: implement API service, middleware, and authentication context

- Added `lib/api.ts` to centralize API communication for authentication, projects, persons, tags, and groups.
- Introduced `middleware.ts` to handle route protection based on authentication and roles.
- Created `auth-context.tsx` to manage authentication state with `AuthProvider` and `useAuth` hook.
- Updated `package.json` to include `swr` for data fetching.
- Enhanced project documentation (`RESPONSIVE_DESIGN.md` and `README.md`) with responsive design and architecture details.

2025-05-16 14:43:56 +02:00

3.1 KiB

Raw Blame History

Responsive Design Patterns

This document outlines the responsive design patterns used in the application to ensure a consistent user experience across different devices and screen sizes.

Breakpoints

The application uses the following breakpoints, based on Tailwind CSS defaults:

sm: 640px and up (small devices like large phones and small tablets)
md: 768px and up (medium devices like tablets)
lg: 1024px and up (large devices like desktops)
xl: 1280px and up (extra large devices)
2xl: 1536px and up (very large screens)

Viewport Configuration

The application uses the following viewport configuration in the root layout:

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 1,
  userScalable: true,
};

This ensures proper scaling on mobile devices while allowing users to zoom if needed.

Layout Patterns

Responsive Container

Use container class with responsive padding: px-4 md:px-6
Example: <div className="container px-4 md:px-6">

Responsive Flexbox

Stack elements vertically on small screens, horizontally on larger screens
Example: <div className="flex flex-col sm:flex-row">

Responsive Grid

Single column on small screens, multiple columns on larger screens
Example: <div className="grid sm:grid-cols-2 lg:grid-cols-3">

Responsive Spacing

Less padding on small screens, more on larger screens
Example: <main className="p-4 sm:p-6">

Component Patterns

Responsive Typography

Smaller font sizes on mobile, larger on desktop
Example: <h1 className="text-2xl sm:text-3xl font-bold">

Responsive Buttons

Full-width on small screens, auto-width on larger screens
Example: <Button className="w-full sm:w-auto">

Responsive Tables

Card layout on small screens, table layout on larger screens
Hide less important columns on small screens
Add horizontal scrolling for tables that don't fit
Example: See the projects page implementation

Responsive Forms

Stack form actions on small screens, side-by-side on larger screens
Adjust button order for mobile-first experience
Example: <CardFooter className="flex flex-col sm:flex-row gap-2">

Use a sidebar that collapses to an icon or off-canvas menu on small screens
Use a dropdown or hamburger menu for mobile navigation
Example: See the Sidebar component implementation

Best Practices

Mobile-First Approach: Start with the mobile layout and progressively enhance for larger screens
Consistent Patterns: Use the same responsive patterns throughout the application
Avoid Fixed Widths: Use relative units (%, rem) and flexible layouts
Test on Real Devices: Verify the responsive design on actual devices, not just browser emulation
Consider Touch Targets: Make interactive elements large enough for touch (at least 44x44px)
Optimize Images: Use responsive images with appropriate sizes for different devices
Performance: Ensure the application performs well on mobile devices with potentially slower connections

3.1 KiB Raw Blame History