= {
+ success: boolean
+ data?: T
+ error?: string
+}
+```
+
+## Styling Guidelines
+
+### Tailwind CSS
+```typescript
+// β
Good - Semantic class combinations
+
+
Title
+ Edit
+
+
+// β Avoid - Too many utility classes in one line
+
+```
+
+### Conditional Classes
+Use the `cn()` utility for conditional classes:
+```typescript
+import { cn } from '@/lib/utils'
+
+// β
Good
+
+ Click me
+
+
+// β Avoid - String concatenation
+
+```
+
+## Error Handling
+
+### Client-Side Errors
+```typescript
+// β
Good - Proper error handling
+async function handleSubmit(data: FormData) {
+ try {
+ const result = await createUser(data)
+
+ if (result.success) {
+ toast({ title: 'Success', description: 'User created successfully' })
+ } else {
+ toast({
+ title: 'Error',
+ description: result.error || 'Something went wrong',
+ variant: 'destructive'
+ })
+ }
+ } catch (error) {
+ console.error('Unexpected error:', error)
+ toast({
+ title: 'Error',
+ description: 'An unexpected error occurred',
+ variant: 'destructive'
+ })
+ }
+}
+```
+
+### Server-Side Errors
+```typescript
+// β
Good - Consistent error handling
+export async function createUser(input: CreateUserInput) {
+ try {
+ // Validation
+ const validatedInput = CreateUserSchema.parse(input)
+
+ // Business logic
+ const user = await db.insert(users).values(validatedInput)
+
+ return { success: true, data: user }
+ } catch (error) {
+ console.error('Create user failed:', error)
+
+ if (error instanceof z.ZodError) {
+ return { success: false, error: 'Invalid input data' }
+ }
+
+ return { success: false, error: 'Failed to create user' }
+ }
+}
+```
+
+## Database Guidelines
+
+### Schema Definitions
+```typescript
+// β
Good - Clear, typed schema
+export const users = pgTable('users', {
+ id: uuid('id').defaultRandom().primaryKey(),
+ name: text('name').notNull(),
+ email: text('email').notNull().unique(),
+ createdAt: timestamp('created_at').defaultNow().notNull(),
+ updatedAt: timestamp('updated_at').defaultNow().notNull(),
+})
+```
+
+### Queries
+```typescript
+// β
Good - Type-safe queries
+const user = await db
+ .select()
+ .from(users)
+ .where(eq(users.id, userId))
+ .limit(1)
+
+// β
Good - Proper error handling
+try {
+ const users = await db.select().from(users)
+ return users
+} catch (error) {
+ console.error('Database query failed:', error)
+ throw new Error('Failed to fetch users')
+}
+```
+
+## Testing Guidelines
+
+### Unit Tests
+```typescript
+// β
Good - Descriptive test names
+describe('UserCard component', () => {
+ it('should display user name and email', () => {
+ const user = { id: '1', name: 'John Doe', email: 'john@example.com' }
+ render(
+
+describe('createUser', () => {
+ beforeEach(() => {
+ jest.clearAllMocks()
+ })
+
+ it('should create user successfully', async () => {
+ const userData = {
+ name: 'John Doe',
+ email: 'john@example.com',
+ }
+
+ const mockUser = { id: '1', ...userData, createdAt: new Date() }
+ mockDb.insert.mockResolvedValue([mockUser])
+
+ const result = await createUser(userData)
+
+ expect(result.success).toBe(true)
+ expect(result.data).toEqual(mockUser)
+ expect(mockDb.insert).toHaveBeenCalledWith(expect.objectContaining(userData))
+ })
+
+ it('should handle validation errors', async () => {
+ const invalidData = {
+ name: '', // Invalid - empty name
+ email: 'invalid-email', // Invalid - not a valid email
+ }
+
+ const result = await createUser(invalidData)
+
+ expect(result.success).toBe(false)
+ expect(result.error).toBe('Invalid input data')
+ expect(mockDb.insert).not.toHaveBeenCalled()
+ })
+})
+```
+
+### Testing Custom Hooks
+
+```typescript
+// __tests__/hooks/use-user-profile.test.tsx
+import { renderHook, act } from '@testing-library/react'
+import { useUserProfile } from '@/hooks/use-user-profile'
+
+describe('useUserProfile', () => {
+ it('should fetch user profile', async () => {
+ const { result } = renderHook(() => useUserProfile('user-1'))
+
+ // Initially loading
+ expect(result.current.loading).toBe(true)
+ expect(result.current.user).toBe(null)
+
+ // Wait for the hook to update
+ await act(async () => {
+ // Wait for async operations to complete
+ })
+
+ expect(result.current.loading).toBe(false)
+ expect(result.current.user).toBeDefined()
+ })
+})
+```
+
+## End-to-End Testing with Playwright
+
+### Test Structure
+
+E2E tests are located in the `e2e/` directory:
+
+```
+e2e/
+βββ auth.spec.ts # Authentication tests
+βββ navigation.spec.ts # Navigation tests
+βββ admin.spec.ts # Admin functionality
+βββ forms.spec.ts # Form validation
+βββ utils/
+ βββ test-helpers.ts # Shared test utilities
+```
+
+### Basic E2E Test
+
+```typescript
+// e2e/auth.spec.ts
+import { test, expect } from '@playwright/test'
+
+test.describe('Authentication', () => {
+ test.beforeEach(async ({ page }) => {
+ // Clear cookies before each test
+ await page.context().clearCookies()
+ })
+
+ test('user can register with valid information', async ({ page }) => {
+ await page.goto('/register')
+
+ // Fill out registration form
+ await page.fill('input[name="name"]', 'John Doe')
+ await page.fill('input[name="email"]', 'john@example.com')
+ await page.fill('input[name="password"]', 'SecurePassword123!')
+ await page.fill('input[name="confirmPassword"]', 'SecurePassword123!')
+
+ // Submit form
+ await page.click('button[type="submit"]')
+
+ // Should redirect to login or dashboard
+ await expect(page).toHaveURL(/\/(login|dashboard)/)
+ })
+
+ test('login form shows validation errors for invalid input', async ({ page }) => {
+ await page.goto('/login')
+
+ // Try to submit empty form
+ await page.click('button[type="submit"]')
+
+ // Should show validation errors
+ await expect(page.locator('text=Email is required')).toBeVisible()
+ await expect(page.locator('text=Password is required')).toBeVisible()
+ })
+
+ test('user can login with valid credentials', async ({ page }) => {
+ await page.goto('/login')
+
+ // Fill login form
+ await page.fill('input[name="email"]', 'existing@example.com')
+ await page.fill('input[name="password"]', 'password123')
+
+ // Submit form
+ await page.click('button[type="submit"]')
+
+ // Should redirect to dashboard
+ await expect(page).toHaveURL('/dashboard')
+ await expect(page.locator('h1')).toContainText('Dashboard')
+ })
+})
+```
+
+### Using Page Object Model
+
+For complex workflows, use the Page Object Model to keep tests maintainable:
+
+```typescript
+// e2e/utils/pages/login-page.ts
+import { Page, Locator } from '@playwright/test'
+
+export class LoginPage {
+ readonly page: Page
+ readonly emailInput: Locator
+ readonly passwordInput: Locator
+ readonly loginButton: Locator
+ readonly errorMessage: Locator
+
+ constructor(page: Page) {
+ this.page = page
+ this.emailInput = page.locator('input[name="email"]')
+ this.passwordInput = page.locator('input[name="password"]')
+ this.loginButton = page.locator('button[type="submit"]')
+ this.errorMessage = page.locator('[role="alert"]')
+ }
+
+ async goto() {
+ await this.page.goto('/login')
+ }
+
+ async login(email: string, password: string) {
+ await this.emailInput.fill(email)
+ await this.passwordInput.fill(password)
+ await this.loginButton.click()
+ }
+
+ async expectErrorMessage(message: string) {
+ await expect(this.errorMessage).toContainText(message)
+ }
+}
+
+// Using the page object
+test('login with invalid credentials shows error', async ({ page }) => {
+ const loginPage = new LoginPage(page)
+
+ await loginPage.goto()
+ await loginPage.login('invalid@example.com', 'wrongpassword')
+ await loginPage.expectErrorMessage('Invalid credentials')
+})
+```
+
+### Testing with Playwright MCP Tools
+
+Use MCP tools for enhanced testing automation. Our Cursor setup integrates with Playwright MCP for intelligent test generation:
+
+```typescript
+// e2e/advanced-testing.spec.ts
+test('comprehensive form testing with MCP tools', async ({ page }) => {
+ // Navigate to complex form
+ await page.goto('/complex-form')
+
+ // Use MCP tools for intelligent form interaction
+ // The MCP tools can help with:
+ // - Automatic form field detection
+ // - Intelligent test data generation
+ // - Cross-browser consistency validation
+ // - AI-powered selector optimization
+
+ // Fill form using enhanced selectors
+ await page.getByLabel('Full Name').fill('John Doe')
+ await page.getByLabel('Email Address').fill('john@example.com')
+ await page.getByRole('combobox', { name: 'Country' }).selectOption('US')
+
+ // Submit and verify
+ await page.getByRole('button', { name: 'Submit' }).click()
+ await expect(page.getByText('Form submitted successfully')).toBeVisible()
+})
+```
+
+### Using Cursor AI for Test Generation
+
+With Cursor and our rule-based setup, you can generate tests efficiently:
+
+```
+@rules/testing Generate comprehensive E2E tests for the user registration flow
+
+@rules/testing Create unit tests for the UserCard component with all edge cases
+
+@rules/testing Add integration tests for the authentication server actions
+```
+
+## Running Tests
+
+### Unit Tests (Jest)
+
+```bash
+# Run all tests
+pnpm test
+
+# Run tests in watch mode
+pnpm test:watch
+
+# Run tests with coverage
+pnpm test:ci
+
+# Run specific test file
+pnpm test user-card.test.tsx
+
+# Run tests matching a pattern
+pnpm test --testNamePattern="should render"
+```
+
+### E2E Tests (Playwright)
+
+```bash
+# Run all E2E tests
+pnpm test:e2e
+
+# Run tests in UI mode (interactive)
+pnpm test:e2e:ui
+
+# Run tests in headed mode (see browser)
+pnpm test:e2e:headed
+
+# Run specific test file
+pnpm playwright test auth.spec.ts
+
+# Run tests for specific browser
+pnpm playwright test --project=chromium
+
+# Debug tests
+pnpm test:e2e:debug
+```
+
+## Best Practices
+
+### General Testing Principles
+
+1. **Test Behavior, Not Implementation**
+ ```typescript
+ // β
Good - Testing behavior
+ test('should show success message after form submission', () => {
+ // Test what the user sees
+ })
+
+ // β Avoid - Testing implementation details
+ test('should call handleSubmit function', () => {
+ // Testing internal function calls
+ })
+ ```
+
+2. **Use Descriptive Test Names**
+ ```typescript
+ // β
Good - Clear and specific
+ test('should display validation error when email is invalid')
+
+ // β Avoid - Vague
+ test('email validation')
+ ```
+
+3. **Follow AAA Pattern**
+ ```typescript
+ test('should calculate total price correctly', () => {
+ // Arrange
+ const items = [{ price: 10 }, { price: 20 }]
+
+ // Act
+ const total = calculateTotal(items)
+
+ // Assert
+ expect(total).toBe(30)
+ })
+ ```
+
+### Component Testing Best Practices
+
+1. **Test User Interactions**
+ ```typescript
+ // β
Good - Testing user perspective
+ test('should submit form when user clicks submit button', async () => {
+ const mockSubmit = jest.fn()
+ render(
+ Submit
+
+ ```
+
+ ```typescript
+ // Use in tests
+ await page.getByTestId('submit-button').click()
+ ```
+
+## Debugging Tests
+
+### Jest Debugging
+
+1. **Use `console.log` in tests**
+ ```typescript
+ test('debug test', () => {
+ const result = myFunction(input)
+ console.log('Result:', result) // This will show in test output
+ expect(result).toBe(expected)
+ })
+ ```
+
+2. **Use VS Code debugger**
+ - Set breakpoints in test files
+ - Run tests in debug mode
+ - Step through code execution
+
+### Playwright Debugging
+
+1. **Use debug mode**
+ ```bash
+ pnpm playwright test --debug
+ ```
+
+2. **Use page.pause()**
+ ```typescript
+ test('debug test', async ({ page }) => {
+ await page.goto('/login')
+ await page.pause() // Pauses execution for manual inspection
+ // ... rest of test
+ })
+ ```
+
+3. **Take screenshots**
+ ```typescript
+ test('visual debug', async ({ page }) => {
+ await page.goto('/dashboard')
+ await page.screenshot({ path: 'debug-screenshot.png' })
+ })
+ ```
+
+## Common Testing Patterns
+
+### Mocking API Calls
+
+```typescript
+// Mock fetch for unit tests
+global.fetch = jest.fn()
+
+test('should handle API error', async () => {
+ (fetch as jest.Mock).mockRejectedValueOnce(new Error('API Error'))
+
+ const result = await fetchUserData('user-1')
+ expect(result.error).toBe('Failed to fetch user data')
+})
+```
+
+### Testing Error Boundaries
+
+```typescript
+test('should display error message when component throws', () => {
+ const ThrowError = () => {
+ throw new Error('Test error')
+ }
+
+ render(
+
+
+ )
+
+ expect(screen.getByText('Something went wrong')).toBeInTheDocument()
+})
+```
+
+### Testing Form Validation
+
+```typescript
+test('should validate required fields', async () => {
+ render(
+ {children}
+
+
+
+ )
+}
+```
+
+## Testing Issues
+
+### Jest Tests Failing
+```bash
+# Clear Jest cache
+pnpm test --clearCache
+
+# Run specific test
+pnpm test user.test.ts
+
+# Run in watch mode
+pnpm test:watch
+```
+
+### Playwright Tests Failing
+```bash
+# Install browsers
+pnpm playwright install
+
+# Run in headed mode to see what's happening
+pnpm playwright test --headed
+
+# Debug specific test
+pnpm playwright test auth.spec.ts --debug
+```
+
+### Mock Issues
+```typescript
+// Mock external dependencies
+jest.mock('@/lib/api', () => ({
+ fetchUser: jest.fn(),
+}))
+
+// Clear mocks between tests
+beforeEach(() => {
+ jest.clearAllMocks()
+})
+```
+
+## Styling Issues
+
+### Tailwind Not Working
+```bash
+# Check if Tailwind is installed
+pnpm list tailwindcss
+
+# Verify tailwind.config.ts content paths
+content: [
+ "./pages/**/*.{ts,tsx}",
+ "./components/**/*.{ts,tsx}",
+ "./app/**/*.{ts,tsx}",
+]
+
+# Restart dev server after config changes
+```
+
+### CSS Not Loading
+```tsx
+// Check if globals.css is imported in layout
+// app/layout.tsx
+import './globals.css'
+```
+
+### Responsive Issues
+```tsx
+// Check viewport meta tag
+// app/layout.tsx
+
+) {
+ const breakpoints = [
+ { name: 'mobile', width: 375, height: 667 },
+ { name: 'tablet', width: 768, height: 1024 },
+ { name: 'desktop', width: 1280, height: 720 },
+ { name: 'large', width: 1920, height: 1080 },
+ ]
+
+ for (const breakpoint of breakpoints) {
+ await page.setViewportSize({ width: breakpoint.width, height: breakpoint.height })
+ await testFunction(page, breakpoint.name)
+ }
+}
+
+/**
+ * Check for accessibility violations (basic)
+ */
+export async function checkBasicAccessibility(page: Page) {
+ // Check for proper heading structure
+ const h1Count = await page.locator('h1').count()
+ expect(h1Count).toBeLessThanOrEqual(1) // Should have at most one H1
+
+ // Check for alt text on images
+ const images = page.locator('img')
+ const imageCount = await images.count()
+
+ for (let i = 0; i < imageCount; i++) {
+ const img = images.nth(i)
+ const alt = await img.getAttribute('alt')
+ const ariaLabel = await img.getAttribute('aria-label')
+ expect(alt || ariaLabel).toBeTruthy() // Should have alt or aria-label
+ }
+
+ // Check for form labels
+ const inputs = page.locator('input[type="text"], input[type="email"], input[type="password"]')
+ const inputCount = await inputs.count()
+
+ for (let i = 0; i < inputCount; i++) {
+ const input = inputs.nth(i)
+ const id = await input.getAttribute('id')
+ const ariaLabel = await input.getAttribute('aria-label')
+ const ariaLabelledBy = await input.getAttribute('aria-labelledby')
+
+ if (id) {
+ const label = page.locator(`label[for="${id}"]`)
+ const labelExists = (await label.count()) > 0
+ expect(labelExists || ariaLabel || ariaLabelledBy).toBeTruthy()
+ }
+ }
+}
+
+/**
+ * Test keyboard navigation through form elements
+ */
+export async function testKeyboardNavigation(page: Page, expectedElements: string[]) {
+ for (let i = 0; i < expectedElements.length; i++) {
+ await page.keyboard.press('Tab')
+ const focusedElement = page.locator(expectedElements[i])
+ await expect(focusedElement).toBeFocused()
+ }
+}
+
+/**
+ * Fill form with invalid data for validation testing
+ */
+export async function fillFormWithInvalidData(page: Page, formType: 'login' | 'register') {
+ if (formType === 'login') {
+ await page.fill('input[placeholder="Email"]', 'invalid-email')
+ await page.fill('input[placeholder="Password"]', '123') // Too short
+ } else if (formType === 'register') {
+ await page.fill('input[placeholder="Enter your name"]', 'A') // Too short
+ await page.fill('input[placeholder="Enter your email"]', 'invalid-email')
+ await page.fill('input[placeholder="Enter your password"]', '123') // Too short
+ await page.fill('input[placeholder="Confirm your password"]', '456') // Doesn't match
+ }
+}
+
+/**
+ * Wait for loading state to complete
+ */
+export async function waitForLoadingComplete(page: Page) {
+ // Wait for any loading spinners to disappear
+ await page.waitForFunction(
+ () => {
+ const loadingElements = document.querySelectorAll('[data-loading="true"], .loading, .spinner')
+ return loadingElements.length === 0
+ },
+ { timeout: 10000 }
+ )
+}
+
+/**
+ * Generate test user data
+ */
+export function generateTestUser() {
+ const timestamp = Date.now()
+ return {
+ name: `Test User ${timestamp}`,
+ email: `test${timestamp}@example.com`,
+ password: 'TestPassword123!',
+ github: 'https://github.com/testuser',
+ linkedin: 'https://linkedin.com/in/testuser',
+ bio: 'This is a test user bio for e2e testing.',
+ }
+}
+
+/**
+ * Check if element is visible in viewport
+ */
+export async function isElementInViewport(page: Page, selector: string): Promise {
+ return await page.evaluate((sel) => {
+ const element = document.querySelector(sel)
+ if (!element) return false
+
+ const rect = element.getBoundingClientRect()
+ return (
+ rect.top >= 0 &&
+ rect.left >= 0 &&
+ rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+ rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+ )
+ }, selector)
+}
+
+/**
+ * Capture console errors during test execution
+ */
+export function captureConsoleErrors(page: Page): string[] {
+ const errors: string[] = []
+
+ page.on('console', (msg) => {
+ if (msg.type() === 'error') {
+ errors.push(msg.text())
+ }
+ })
+
+ page.on('pageerror', (error) => {
+ errors.push(error.message)
+ })
+
+ return errors
+}
diff --git a/hooks/use-mobile.tsx b/hooks/use-mobile.tsx
new file mode 100644
index 0000000..4331d5c
--- /dev/null
+++ b/hooks/use-mobile.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+ const [isMobile, setIsMobile] = React.useState(undefined)
+
+ React.useEffect(() => {
+ const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+ const onChange = () => {
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+ }
+ mql.addEventListener('change', onChange)
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+ return () => mql.removeEventListener('change', onChange)
+ }, [])
+
+ return !!isMobile
+}
diff --git a/hooks/use-toast.ts b/hooks/use-toast.ts
new file mode 100644
index 0000000..c28e976
--- /dev/null
+++ b/hooks/use-toast.ts
@@ -0,0 +1,189 @@
+'use client'
+
+// Inspired by react-hot-toast library
+import * as React from 'react'
+
+import type { ToastActionElement, ToastProps } from '@/components/ui/toast'
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+ id: string
+ title?: React.ReactNode
+ description?: React.ReactNode
+ action?: ToastActionElement
+}
+
+const actionTypes = {
+ ADD_TOAST: 'ADD_TOAST',
+ UPDATE_TOAST: 'UPDATE_TOAST',
+ DISMISS_TOAST: 'DISMISS_TOAST',
+ REMOVE_TOAST: 'REMOVE_TOAST',
+} as const
+
+let count = 0
+
+function genId() {
+ count = (count + 1) % Number.MAX_SAFE_INTEGER
+ return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+ | {
+ type: ActionType['ADD_TOAST']
+ toast: ToasterToast
+ }
+ | {
+ type: ActionType['UPDATE_TOAST']
+ toast: Partial
+ }
+ | {
+ type: ActionType['DISMISS_TOAST']
+ toastId?: ToasterToast['id']
+ }
+ | {
+ type: ActionType['REMOVE_TOAST']
+ toastId?: ToasterToast['id']
+ }
+
+interface State {
+ toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map>()
+
+const addToRemoveQueue = (toastId: string) => {
+ if (toastTimeouts.has(toastId)) {
+ return
+ }
+
+ const timeout = setTimeout(() => {
+ toastTimeouts.delete(toastId)
+ dispatch({
+ type: 'REMOVE_TOAST',
+ toastId: toastId,
+ })
+ }, TOAST_REMOVE_DELAY)
+
+ toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+ switch (action.type) {
+ case 'ADD_TOAST':
+ return {
+ ...state,
+ toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+ }
+
+ case 'UPDATE_TOAST':
+ return {
+ ...state,
+ toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
+ }
+
+ case 'DISMISS_TOAST': {
+ const { toastId } = action
+
+ // ! Side effects ! - This could be extracted into a dismissToast() action,
+ // but I'll keep it here for simplicity
+ if (toastId) {
+ addToRemoveQueue(toastId)
+ } else {
+ for (const toast of state.toasts) {
+ addToRemoveQueue(toast.id)
+ }
+ }
+
+ return {
+ ...state,
+ toasts: state.toasts.map((t) =>
+ t.id === toastId || toastId === undefined
+ ? {
+ ...t,
+ open: false,
+ }
+ : t
+ ),
+ }
+ }
+ case 'REMOVE_TOAST':
+ if (action.toastId === undefined) {
+ return {
+ ...state,
+ toasts: [],
+ }
+ }
+ return {
+ ...state,
+ toasts: state.toasts.filter((t) => t.id !== action.toastId),
+ }
+ }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+ memoryState = reducer(memoryState, action)
+ for (const listener of listeners) {
+ listener(memoryState)
+ }
+}
+
+type Toast = Omit
+
+function toast({ ...props }: Toast) {
+ const id = genId()
+
+ const update = (props: ToasterToast) =>
+ dispatch({
+ type: 'UPDATE_TOAST',
+ toast: { ...props, id },
+ })
+ const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
+
+ dispatch({
+ type: 'ADD_TOAST',
+ toast: {
+ ...props,
+ id,
+ open: true,
+ onOpenChange: (open) => {
+ if (!open) dismiss()
+ },
+ },
+ })
+
+ return {
+ id: id,
+ dismiss,
+ update,
+ }
+}
+
+function useToast() {
+ const [state, setState] = React.useState(memoryState)
+
+ React.useEffect(() => {
+ listeners.push(setState)
+ return () => {
+ const index = listeners.indexOf(setState)
+ if (index > -1) {
+ listeners.splice(index, 1)
+ }
+ }
+ }, [])
+
+ return {
+ ...state,
+ toast,
+ dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+ }
+}
+
+export { useToast, toast }
diff --git a/jest.config.ts b/jest.config.ts
new file mode 100644
index 0000000..5563deb
--- /dev/null
+++ b/jest.config.ts
@@ -0,0 +1,206 @@
+/**
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+import nextJest from 'next/jest.js'
+
+const createJestConfig = nextJest({
+ // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+ dir: './',
+})
+
+/** @type {import('jest').Config} */
+const config = {
+ // All imported modules in your tests should be mocked automatically
+ // automock: false,
+
+ // Stop running tests after `n` failures
+ // bail: 0,
+
+ // The directory where Jest should store its cached dependency information
+ // cacheDirectory: "/tmp/jest_rs",
+
+ // Automatically clear mock calls, instances, contexts and results before every test
+ clearMocks: true,
+
+ // Indicates whether the coverage information should be collected while executing the test
+ collectCoverage: true,
+
+ // An array of glob patterns indicating a set of files for which coverage information should be collected
+ // collectCoverageFrom: undefined,
+
+ // The directory where Jest should output its coverage files
+ coverageDirectory: 'coverage',
+
+ // An array of regexp pattern strings used to skip coverage collection
+ // coveragePathIgnorePatterns: [
+ // "/node_modules/"
+ // ],
+
+ // Indicates which provider should be used to instrument code for coverage
+ coverageProvider: 'v8',
+
+ // A list of reporter names that Jest uses when writing coverage reports
+ // coverageReporters: [
+ // "json",
+ // "text",
+ // "lcov",
+ // "clover"
+ // ],
+
+ // An object that configures minimum threshold enforcement for coverage results
+ // coverageThreshold: undefined,
+
+ // A path to a custom dependency extractor
+ // dependencyExtractor: undefined,
+
+ // Make calling deprecated APIs throw helpful error messages
+ // errorOnDeprecated: false,
+
+ // The default configuration for fake timers
+ // fakeTimers: {
+ // "enableGlobally": false
+ // },
+
+ // Force coverage collection from ignored files using an array of glob patterns
+ // forceCoverageMatch: [],
+
+ // A path to a module which exports an async function that is triggered once before all test suites
+ // globalSetup: undefined,
+
+ // A path to a module which exports an async function that is triggered once after all test suites
+ // globalTeardown: undefined,
+
+ // A set of global variables that need to be available in all test environments
+ // globals: {},
+
+ // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
+ // maxWorkers: "50%",
+
+ // An array of directory names to be searched recursively up from the requiring module's location
+ // moduleDirectories: [
+ // "node_modules"
+ // ],
+
+ // An array of file extensions your modules use
+ // moduleFileExtensions: [
+ // "js",
+ // "mjs",
+ // "cjs",
+ // "jsx",
+ // "ts",
+ // "tsx",
+ // "json",
+ // "node"
+ // ],
+
+ // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+ // moduleNameMapper: {},
+ moduleNameMapper: {
+ '^@/(.*)$': '/$1', // Adjust `/src` based on your project's structure
+ },
+ // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+ // modulePathIgnorePatterns: [],
+
+ // Activates notifications for test results
+ // notify: false,
+
+ // An enum that specifies notification mode. Requires { notify: true }
+ // notifyMode: "failure-change",
+
+ // A preset that is used as a base for Jest's configuration
+ // preset: undefined,
+
+ // Run tests from one or more projects
+ // projects: undefined,
+
+ // Use this configuration option to add custom reporters to Jest
+ // reporters: undefined,
+
+ // Automatically reset mock state before every test
+ // resetMocks: false,
+
+ // Reset the module registry before running each individual test
+ // resetModules: false,
+
+ // A path to a custom resolver
+ // resolver: undefined,
+
+ // Automatically restore mock state and implementation before every test
+ // restoreMocks: false,
+
+ // The root directory that Jest should scan for tests and modules within
+ // rootDir: undefined,
+
+ // A list of paths to directories that Jest should use to search for files in
+ // roots: [
+ // ""
+ // ],
+
+ // Allows you to use a custom runner instead of Jest's default test runner
+ // runner: "jest-runner",
+
+ // The paths to modules that run some code to configure or set up the testing environment before each test
+ // setupFiles: [],
+
+ // A list of paths to modules that run some code to configure or set up the testing framework before each test
+ // setupFilesAfterEnv: [],
+ setupFilesAfterEnv: ['/jest.setup.ts'],
+
+ // The number of seconds after which a test is considered as slow and reported as such in the results.
+ // slowTestThreshold: 5,
+
+ // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+ // snapshotSerializers: [],
+
+ // The test environment that will be used for testing
+ testEnvironment: 'jsdom',
+
+ // Options that will be passed to the testEnvironment
+ // testEnvironmentOptions: {},
+
+ // Adds a location field to test results
+ // testLocationInResults: false,
+
+ // The glob patterns Jest uses to detect test files
+ // testMatch: [
+ // "**/__tests__/**/*.[jt]s?(x)",
+ // "**/?(*.)+(spec|test).[tj]s?(x)"
+ // ],
+
+ // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+ testPathIgnorePatterns: ['/node_modules/', '/e2e/'],
+
+ // The regexp pattern or array of patterns that Jest uses to detect test files
+ // testRegex: [],
+
+ // This option allows the use of a custom results processor
+ // testResultsProcessor: undefined,
+
+ // This option allows use of a custom test runner
+ // testRunner: "jest-circus/runner",
+
+ // A map from regular expressions to paths to transformers
+ // transform: undefined,
+
+ // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+ // transformIgnorePatterns: [
+ // "/node_modules/",
+ // "\\.pnp\\.[^\\/]+$"
+ // ],
+
+ // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+ // unmockedModulePathPatterns: undefined,
+
+ // Indicates whether each individual test should be reported during the run
+ // verbose: undefined,
+
+ // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+ // watchPathIgnorePatterns: [],
+
+ // Whether to use watchman for file crawling
+ // watchman: true,
+}
+
+// module.exports = config;
+export default createJestConfig(config)
diff --git a/jest.setup.ts b/jest.setup.ts
new file mode 100644
index 0000000..c44951a
--- /dev/null
+++ b/jest.setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom'
diff --git a/lib/constants.ts b/lib/constants.ts
new file mode 100644
index 0000000..6690321
--- /dev/null
+++ b/lib/constants.ts
@@ -0,0 +1,99 @@
+// Application constants for codac learning management system
+
+// User roles and permissions
+export const USER_ROLES = {
+ STUDENT: 'student',
+ ALUMNI: 'alumni',
+ MENTOR: 'mentor',
+ ADMIN: 'admin',
+} as const
+
+// Post and content statuses
+export const POST_STATUS = {
+ DRAFT: 'draft',
+ PUBLISHED: 'published',
+ ARCHIVED: 'archived',
+} as const
+
+export const COURSE_STATUS = {
+ DRAFT: 'draft',
+ PUBLISHED: 'published',
+ ARCHIVED: 'archived',
+} as const
+
+export const ASSIGNMENT_STATUS = {
+ PENDING: 'pending',
+ SUBMITTED: 'submitted',
+ GRADED: 'graded',
+ RETURNED: 'returned',
+} as const
+
+// File upload limits
+export const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5MB in bytes
+export const MAX_IMAGE_SIZE = 2 * 1024 * 1024 // 2MB in bytes
+
+// Default values
+export const DEFAULT_AVATAR_URL = '/images/user.png'
+export const DEFAULT_PAGE_SIZE = 20
+export const DEFAULT_ASSIGNMENT_POINTS = 100
+
+// Application limits
+export const MAX_COURSE_TITLE_LENGTH = 100
+export const MAX_POST_TITLE_LENGTH = 200
+export const MAX_BIO_LENGTH = 500
+export const MAX_COMMENT_LENGTH = 1000
+
+// Time constants
+export const SESSION_DURATION = 30 * 24 * 60 * 60 * 1000 // 30 days in milliseconds
+export const ASSIGNMENT_REMINDER_DAYS = 3
+
+// Navigation menu items
+export const MAIN_NAVIGATION = [
+ { title: 'Dashboard', href: '/dashboard', icon: 'Home' },
+ { title: 'Learning', href: '/learning', icon: 'BookOpen' },
+ { title: 'Community', href: '/community', icon: 'Users' },
+ { title: 'Mentorship', href: '/mentorship', icon: 'UserCheck' },
+ { title: 'Career', href: '/career', icon: 'TrendingUp' },
+ { title: 'Settings', href: '/settings', icon: 'Settings' },
+] as const
+
+// Achievement categories
+export const ACHIEVEMENT_CATEGORIES = {
+ LEARNING: 'learning',
+ COMMUNITY: 'community',
+ MENTORSHIP: 'mentorship',
+ CAREER: 'career',
+ SPECIAL: 'special',
+} as const
+
+// Email templates
+export const EMAIL_TEMPLATES = {
+ WELCOME: 'welcome',
+ ASSIGNMENT_DUE: 'assignment_due',
+ MENTOR_REQUEST: 'mentor_request',
+ ACHIEVEMENT_EARNED: 'achievement_earned',
+} as const
+
+// API endpoints
+export const API_ENDPOINTS = {
+ USERS: '/api/users',
+ COURSES: '/api/courses',
+ ASSIGNMENTS: '/api/assignments',
+ POSTS: '/api/posts',
+ ACHIEVEMENTS: '/api/achievements',
+ MENTORSHIPS: '/api/mentorships',
+} as const
+
+// Database table names (for consistency with schema)
+export const TABLES = {
+ USERS: 'user',
+ COHORTS: 'cohort',
+ COURSES: 'course',
+ ASSIGNMENTS: 'assignment',
+ SUBMISSIONS: 'submission',
+ POSTS: 'post',
+ COMMENTS: 'comment',
+ ACHIEVEMENTS: 'achievement',
+ USER_ACHIEVEMENTS: 'user_achievement',
+ MENTORSHIPS: 'mentorship',
+} as const
diff --git a/lib/utils.ts b/lib/utils.ts
new file mode 100644
index 0000000..d32b0fe
--- /dev/null
+++ b/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/middleware.ts b/middleware.ts
new file mode 100644
index 0000000..19c44c6
--- /dev/null
+++ b/middleware.ts
@@ -0,0 +1,9 @@
+import { authConfig } from 'app/auth.config'
+import NextAuth from 'next-auth'
+
+export default NextAuth(authConfig).auth
+
+export const config = {
+ // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
+ matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
+}
diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 0000000..1b3be08
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,5 @@
+/// {
+ data: T | null
+ error: string | null
+ success: boolean
+}
+
+// Form input types
+export interface CreateUserInput {
+ name: string
+ email: string
+ password: string
+ role?: UserRole
+ cohortId?: string
+}
+
+export interface UpdateUserInput {
+ name?: string
+ bio?: string
+ github?: string
+ linkedin?: string
+ portfolio?: string
+}
+
+export interface CreateCourseInput {
+ title: string
+ description?: string
+ content?: Value
+ cohortId?: string
+ instructorId?: string
+}
+
+export interface CreatePostInput {
+ title: string
+ content?: Value
+ tags?: string[]
+ status?: PostStatus
+}
+
+// Dashboard and analytics types
+export interface DashboardStats {
+ totalStudents: number
+ totalCourses: number
+ totalAlumni: number
+ completionRate: number
+ activeUsers: number
+ recentActivity: ActivityItem[]
+}
+
+export interface ActivityItem {
+ id: string
+ type: 'enrollment' | 'course_update' | 'assignment_submitted' | 'achievement_earned'
+ description: string
+ timestamp: Date
+ userId?: string
+ userName?: string
+}