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.

frontend/docs/RESPONSIVE_DESIGN.md

@@ -0,0 +1,91 @@
+# 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:
+
+```tsx
+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">`
+
+### Responsive Navigation
+
+- 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
+
+1. **Mobile-First Approach**: Start with the mobile layout and progressively enhance for larger screens
+2. **Consistent Patterns**: Use the same responsive patterns throughout the application
+3. **Avoid Fixed Widths**: Use relative units (%, rem) and flexible layouts
+4. **Test on Real Devices**: Verify the responsive design on actual devices, not just browser emulation
+5. **Consider Touch Targets**: Make interactive elements large enough for touch (at least 44x44px)
+6. **Optimize Images**: Use responsive images with appropriate sizes for different devices
+7. **Performance**: Ensure the application performs well on mobile devices with potentially slower connections