Fix TypeScript errors for image support in Week 2 tutorial tasks

.gitignore

@@ -0,0 +1,179 @@
+# Dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Build outputs
+build/
+dist/
+out/
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Dependency directories
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+public
+
+# Storybook build outputs
+.out
+.storybook-out
+
+# Temporary folders
+tmp/
+temp/
+
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# IDE files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# MongoDB data
+data/ 

DEPLOYMENT_CHECKLIST.md

@@ -0,0 +1,150 @@
+# 🚀 Hugging Face Spaces Deployment Checklist
+
+## ✅ Pre-Deployment Setup
+
+### 1. MongoDB Atlas Database
+- [ ] Create MongoDB Atlas account
+- [ ] Create a new cluster (free tier)
+- [ ] Create database user with read/write permissions
+- [ ] Get connection string
+- [ ] Test connection locally
+
+### 2. Hugging Face Account
+- [ ] Create Hugging Face account
+- [ ] Enable Spaces feature
+- [ ] Verify account permissions
+
+## 🏗️ Backend Deployment
+
+### 1. Create Backend Space
+- [ ] Go to https://huggingface.co/spaces
+- [ ] Click "Create new Space"
+- [ ] Choose "Docker" as SDK
+- [ ] Name: `your-username/transcreation-backend`
+- [ ] Set to "Public" or "Private"
+
+### 2. Upload Backend Files
+- [ ] Upload all files from `deploy/backend/`
+- [ ] Verify Dockerfile is in root of Space
+- [ ] Verify package.json is present
+
+### 3. Configure Environment Variables
+- [ ] Go to Settings → Repository secrets
+- [ ] Add `MONGODB_URI`: `mongodb+srv://username:password@cluster.mongodb.net/transcreation-sandbox`
+- [ ] Add `NODE_ENV`: `production`
+- [ ] Add `PORT`: `5000`
+
+### 4. Deploy Backend
+- [ ] Wait for build to complete
+- [ ] Check logs for any errors
+- [ ] Test health endpoint: `https://your-username-transcreation-backend.hf.space/health`
+- [ ] Test API endpoint: `https://your-username-transcreation-backend.hf.space/api/health`
+
+## 🎨 Frontend Deployment
+
+### 1. Create Frontend Space
+- [ ] Go to https://huggingface.co/spaces
+- [ ] Click "Create new Space"
+- [ ] Choose "Docker" as SDK
+- [ ] Name: `your-username/transcreation-frontend`
+- [ ] Set to "Public" or "Private"
+
+### 2. Upload Frontend Files
+- [ ] Upload all files from `deploy/frontend/`
+- [ ] Verify Dockerfile is in root of Space
+- [ ] Verify nginx.conf is present
+
+### 3. Configure Environment Variables
+- [ ] Go to Settings → Repository secrets
+- [ ] Add `REACT_APP_API_URL`: `https://your-username-transcreation-backend.hf.space/api`
+
+### 4. Deploy Frontend
+- [ ] Wait for build to complete
+- [ ] Check logs for any errors
+- [ ] Test frontend URL: `https://your-username-transcreation-frontend.hf.space`
+
+## 🧪 Testing
+
+### 1. Backend Testing
+- [ ] Health check: `https://your-backend-url/health`
+- [ ] API health: `https://your-backend-url/api/health`
+- [ ] Database connection working
+- [ ] CORS headers present
+
+### 2. Frontend Testing
+- [ ] Page loads without errors
+- [ ] Can navigate between pages
+- [ ] API calls work (check browser console)
+- [ ] Login functionality works
+- [ ] All features accessible
+
+### 3. Integration Testing
+- [ ] Frontend can connect to backend
+- [ ] User registration/login works
+- [ ] Tutorial tasks load
+- [ ] Weekly practice loads
+- [ ] Voting system works
+- [ ] Admin features work (if admin user)
+
+## 🔧 Troubleshooting
+
+### Common Issues
+
+1. **Backend Build Fails**
+   - Check Dockerfile syntax
+   - Verify all dependencies in package.json
+   - Check environment variables
+
+2. **Frontend Build Fails**
+   - Check React build process
+   - Verify nginx.conf syntax
+   - Check environment variables
+
+3. **Database Connection Issues**
+   - Verify MongoDB Atlas connection string
+   - Check network access settings
+   - Verify database user permissions
+
+4. **CORS Issues**
+   - Check backend CORS configuration
+   - Verify frontend API URL
+   - Check browser console for errors
+
+5. **Environment Variables Not Working**
+   - Verify variable names match exactly
+   - Check for typos in values
+   - Restart Space after adding variables
+
+## 📞 Support
+
+If you encounter issues:
+1. Check Hugging Face Spaces logs
+2. Verify all environment variables
+3. Test locally with Docker Compose first
+4. Check MongoDB Atlas connection
+5. Review browser console for frontend errors
+
+## 🎉 Success Indicators
+
+- [ ] Backend responds to health checks
+- [ ] Frontend loads without errors
+- [ ] Users can register and login
+- [ ] Tutorial tasks and weekly practice load
+- [ ] Voting system works
+- [ ] Admin features accessible
+- [ ] No console errors in browser
+- [ ] All API endpoints responding
+
+## 🔗 Final URLs
+
+- **Backend**: `https://your-username-transcreation-backend.hf.space`
+- **Frontend**: `https://your-username-transcreation-frontend.hf.space`
+- **API Base**: `https://your-username-transcreation-backend.hf.space/api`
+
+## 📝 Notes
+
+- Keep MongoDB Atlas connection string secure
+- Monitor Hugging Face Spaces usage limits
+- Set up monitoring for both Spaces
+- Consider setting up custom domain later
+- Regular backups of MongoDB data recommended 

Dockerfile

@@ -0,0 +1,32 @@
+# Use Node.js 18 Alpine for smaller image size
+FROM node:18-alpine
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY server/package*.json ./
+
+# Install dependencies
+RUN npm ci --only=production
+
+# Copy server source code
+COPY server/ ./
+
+# Create a non-root user
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S nodejs -u 1001
+
+# Change ownership of the app directory
+RUN chown -R nodejs:nodejs /app
+USER nodejs
+
+# Expose port
+EXPOSE 5000
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD curl -f http://localhost:5000/api/health || exit 1
+
+# Start the application
+CMD ["npm", "start"] 

README.md

@@ -0,0 +1,127 @@
+# Cultural Shift Sandbox
+
+A transcreation platform for cultural translation and adaptation exercises.
+
+## 🚀 Deployment to Hugging Face Spaces
+
+### Prerequisites
+
+1. **MongoDB Atlas Database**
+   - Create a free MongoDB Atlas account
+   - Create a new cluster
+   - Get your connection string
+
+2. **Hugging Face Account**
+   - Create a Hugging Face account
+   - Enable Spaces feature
+
+### Deployment Steps
+
+#### 1. Backend Deployment
+
+1. **Create a new Space on Hugging Face:**
+   - Go to [Hugging Face Spaces](https://huggingface.co/spaces)
+   - Click "Create new Space"
+   - Choose "Docker" as the SDK
+   - Name it: `your-username/transcreation-backend`
+
+2. **Configure Environment Variables:**
+   - Go to Settings → Repository secrets
+   - Add: `MONGODB_URI` with your MongoDB Atlas connection string
+
+3. **Upload Files:**
+   - Upload the `Dockerfile` (root level)
+   - Upload the entire `server/` folder
+   - Upload `package.json` and `package-lock.json` from server/
+
+#### 2. Frontend Deployment
+
+1. **Create another Space:**
+   - Name it: `your-username/transcreation-frontend`
+   - Choose "Docker" as the SDK
+
+2. **Configure Environment Variables:**
+   - Add: `REACT_APP_API_URL` with your backend Space URL
+   - Example: `https://your-username-transcreation-backend.hf.space`
+
+3. **Upload Files:**
+   - Upload the `client/Dockerfile`
+   - Upload the `nginx.conf`
+   - Upload the entire `client/` folder
+
+### Environment Variables
+
+#### Backend (Required)
+```env
+MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/transcreation-sandbox
+NODE_ENV=production
+PORT=5000
+```
+
+#### Frontend (Required)
+```env
+REACT_APP_API_URL=https://your-backend-space-url.hf.space/api
+```
+
+### Local Development
+
+```bash
+# Install dependencies
+npm install
+cd client && npm install
+cd ../server && npm install
+
+# Start development servers
+npm run dev  # Starts both frontend and backend
+```
+
+### Docker Local Testing
+
+```bash
+# Build and run with Docker Compose
+docker-compose up --build
+
+# Access the application
+# Frontend: http://localhost
+# Backend: http://localhost:5000
+```
+
+## 📁 Project Structure
+
+```
+├── client/                 # React frontend
+│   ├── src/
+│   │   ├── components/    # Reusable components
+│   │   ├── pages/        # Page components
+│   │   ├── services/     # API services
+│   │   └── contexts/     # React contexts
+│   └── public/           # Static assets
+├── server/                # Node.js backend
+│   ├── routes/           # API routes
+│   ├── models/           # MongoDB models
+│   └── index.js          # Server entry point
+├── Dockerfile            # Backend Docker config
+├── client/Dockerfile     # Frontend Docker config
+├── nginx.conf           # Nginx configuration
+└── docker-compose.yml   # Local development setup
+```
+
+## 🔧 Features
+
+- **User Authentication**: Login/logout with role-based access
+- **Tutorial Tasks**: Week-based tutorial exercises
+- **Weekly Practice**: Cultural adaptation exercises
+- **Voting System**: Peer voting on submissions
+- **Admin Panel**: Content management for instructors
+- **Real-time Updates**: Live submission tracking
+
+## 🛠️ Tech Stack
+
+- **Frontend**: React, TypeScript, Tailwind CSS
+- **Backend**: Node.js, Express, MongoDB
+- **Deployment**: Hugging Face Spaces, Docker
+- **Database**: MongoDB Atlas
+
+## 📝 License
+
+This project is for educational purposes. 

client/Dockerfile

@@ -0,0 +1,32 @@
+# Build stage
+FROM node:18-alpine AS build
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY client/package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source code
+COPY client/ ./
+
+# Build the app
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Copy built app to nginx
+COPY --from=build /app/build /usr/share/nginx/html
+
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Expose port
+EXPOSE 80
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"] 

client/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "transcreation-sandbox-client",
+  "version": "1.0.0",
+  "description": "Frontend for Transcreation Sandbox",
+  "private": true,
+  "dependencies": {
+    "@types/node": "^16.18.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5",
+    "axios": "^1.6.2",
+    "react-query": "^3.39.3",
+    "react-hook-form": "^7.48.2",
+    "react-hot-toast": "^2.4.1",
+    "lucide-react": "^0.294.0",
+    "clsx": "^2.0.0",
+    "tailwindcss": "^3.3.6",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "@headlessui/react": "^1.7.17",
+    "@heroicons/react": "^2.0.18",
+    "framer-motion": "^10.16.16",
+    "react-markdown": "^9.0.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "@types/react-syntax-highlighter": "^15.5.11"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "proxy": "http://localhost:5000"
+} 

client/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+} 

client/src/App.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import Layout from './components/Layout';
+import Home from './pages/Home';
+import Login from './pages/Login';
+import Dashboard from './pages/Dashboard';
+import SearchTexts from './pages/SearchTexts';
+import TutorialTasks from './pages/TutorialTasks';
+import WeeklyPractice from './pages/WeeklyPractice';
+import VoteResults from './pages/VoteResults';
+import Manage from './pages/Profile';
+
+const App: React.FC = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/login" element={<Login />} />
+      <Route 
+        path="/dashboard" 
+        element={
+          <Layout>
+            <Dashboard />
+          </Layout>
+        } 
+      />
+      <Route 
+        path="/search" 
+        element={
+          <Layout>
+            <SearchTexts />
+          </Layout>
+        } 
+      />
+      <Route 
+        path="/tutorial-tasks" 
+        element={
+          <Layout>
+            <TutorialTasks />
+          </Layout>
+        } 
+      />
+      <Route 
+        path="/weekly-practice" 
+        element={
+          <Layout>
+            <WeeklyPractice />
+          </Layout>
+        } 
+      />
+      <Route 
+        path="/votes" 
+        element={
+          <Layout>
+            <VoteResults />
+          </Layout>
+        } 
+      />
+      <Route 
+        path="/manage" 
+        element={
+          <Layout>
+            <Manage />
+          </Layout>
+        } 
+      />
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+};
+
+export default App; 

client/src/components/Layout.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { 
+  HomeIcon, 
+  AcademicCapIcon,
+  BookOpenIcon,
+  HandThumbUpIcon,
+  UserIcon,
+  ArrowRightOnRectangleIcon
+} from '@heroicons/react/24/outline';
+
+interface User {
+  name: string;
+  email: string;
+  role: string;
+}
+
+const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const location = useLocation();
+  const userData = localStorage.getItem('user');
+  const user: User | null = userData ? JSON.parse(userData) : null;
+
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    window.location.href = '/';
+  };
+
+  const navigation = [
+    { name: 'Home', href: '/dashboard', icon: HomeIcon },
+    { name: 'Tutorial Tasks', href: '/tutorial-tasks', icon: AcademicCapIcon },
+    { name: 'Weekly Practice', href: '/weekly-practice', icon: BookOpenIcon },
+    { name: 'Votes', href: '/votes', icon: HandThumbUpIcon },
+  ];
+
+  // Add Manage link for admin users
+  if (user?.role === 'admin') {
+    navigation.push({ name: 'Manage', href: '/manage', icon: UserIcon });
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Navigation */}
+      <nav className="bg-white shadow-sm border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between h-16">
+            <div className="flex">
+              <div className="flex-shrink-0 flex items-center">
+                <Link to="/dashboard" className="text-xl font-bold text-indigo-600">
+                  Transcreation
+                </Link>
+              </div>
+              <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
+                {navigation.map((item) => {
+                  const isActive = location.pathname === item.href;
+                  return (
+                    <Link
+                      key={item.name}
+                      to={item.href}
+                      className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium ${
+                        isActive
+                          ? 'border-indigo-500 text-gray-900'
+                          : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
+                      }`}
+                    >
+                      <item.icon className="h-4 w-4 mr-1" />
+                      {item.name}
+                    </Link>
+                  );
+                })}
+              </div>
+            </div>
+            <div className="flex items-center">
+              {user && (
+                <div className="flex items-center space-x-4">
+                  <span className="text-sm text-gray-700">
+                    Welcome, {user.name}
+                  </span>
+                  <button
+                    onClick={handleLogout}
+                    className="text-gray-500 hover:text-gray-700 flex items-center"
+                  >
+                    <ArrowRightOnRectangleIcon className="h-4 w-4 mr-1" />
+                    Logout
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      {/* Mobile Navigation */}
+      <div className="sm:hidden">
+        <div className="pt-2 pb-3 space-y-1">
+          {navigation.map((item) => {
+            const isActive = location.pathname === item.href;
+            return (
+              <Link
+                key={item.name}
+                to={item.href}
+                className={`block pl-3 pr-4 py-2 border-l-4 text-base font-medium ${
+                  isActive
+                    ? 'bg-indigo-50 border-indigo-500 text-indigo-700'
+                    : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800'
+                }`}
+              >
+                <div className="flex items-center">
+                  <item.icon className="h-4 w-4 mr-2" />
+                  {item.name}
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <main>{children}</main>
+    </div>
+  );
+};
+
+export default Layout; 

client/src/components/LoadingSpinner.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const LoadingSpinner: React.FC = () => {
+  return (
+    <div className="flex items-center justify-center">
+      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+      <span className="ml-2 text-gray-600">Loading...</span>
+    </div>
+  );
+};
+
+export default LoadingSpinner; 

client/src/contexts/AuthContext.tsx

@@ -0,0 +1,128 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { api } from '../services/api';
+
+interface User {
+  id: string;
+  username: string;
+  email: string;
+  role: 'student' | 'instructor' | 'admin';
+  targetCultures: string[];
+  nativeLanguage?: string;
+}
+
+interface AuthContextType {
+  user: User | null;
+  loading: boolean;
+  login: (email: string, password: string) => Promise<void>;
+  register: (userData: RegisterData) => Promise<void>;
+  logout: () => void;
+  updateProfile: (data: Partial<User>) => Promise<void>;
+}
+
+interface RegisterData {
+  username: string;
+  email: string;
+  password: string;
+  role?: 'student' | 'instructor' | 'admin';
+  targetCultures?: string[];
+  nativeLanguage?: string;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Check for stored token on app load
+    const token = localStorage.getItem('token');
+    if (token) {
+      api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+      fetchUser();
+    } else {
+      setLoading(false);
+    }
+  }, []);
+
+  const fetchUser = async () => {
+    try {
+      const response = await api.get('/api/auth/profile');
+      setUser(response.data);
+    } catch (error) {
+      console.error('Failed to fetch user:', error);
+      localStorage.removeItem('token');
+      delete api.defaults.headers.common['Authorization'];
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const login = async (email: string, password: string) => {
+    try {
+      const response = await api.post('/api/auth/login', { email, password });
+      const { token, user } = response.data;
+      
+      localStorage.setItem('token', token);
+      api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+      setUser(user);
+    } catch (error: any) {
+      throw new Error(error.response?.data?.error || 'Login failed');
+    }
+  };
+
+  const register = async (userData: RegisterData) => {
+    try {
+      const response = await api.post('/api/auth/register', userData);
+      const { token, user } = response.data;
+      
+      localStorage.setItem('token', token);
+      api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+      setUser(user);
+    } catch (error: any) {
+      throw new Error(error.response?.data?.error || 'Registration failed');
+    }
+  };
+
+  const logout = () => {
+    localStorage.removeItem('token');
+    delete api.defaults.headers.common['Authorization'];
+    setUser(null);
+  };
+
+  const updateProfile = async (data: Partial<User>) => {
+    try {
+      const response = await api.put('/api/auth/profile', data);
+      setUser(response.data.user);
+    } catch (error: any) {
+      throw new Error(error.response?.data?.error || 'Profile update failed');
+    }
+  };
+
+  const value: AuthContextType = {
+    user,
+    loading,
+    login,
+    register,
+    logout,
+    updateProfile,
+  };
+
+  return (
+    <AuthContext.Provider value={value}>
+      {children}
+    </AuthContext.Provider>
+  );
+}; 

client/src/index.css

@@ -0,0 +1,152 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    font-family: 'Inter', system-ui, sans-serif;
+  }
+}
+
+@layer components {
+  .btn-primary {
+    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
+  }
+  
+  .btn-secondary {
+    @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
+  }
+  
+  .btn-danger {
+    @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
+  }
+  
+  .input-field {
+    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
+  }
+  
+  .card {
+    @apply bg-white rounded-lg shadow-md border border-gray-200 p-6;
+  }
+  
+  .highlight-cultural {
+    @apply bg-yellow-100 border-b-2 border-yellow-400 px-1 rounded;
+  }
+  
+  .text-gradient {
+    @apply bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent;
+  }
+  
+  .font-smiley {
+    font-family: 'SF Pro Display', 'Segoe UI', 'Roboto', 'Inter', system-ui, sans-serif;
+    font-weight: 400; /* Regular for submissions and briefs */
+  }
+  
+  .font-source-text {
+    font-family: 'SF Pro Display', 'Segoe UI', 'Roboto', 'Inter', system-ui, sans-serif;
+    font-weight: 500; /* Medium for source texts */
+  }
+}
+
+@layer utilities {
+  .line-clamp-1 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+  }
+  
+  .line-clamp-2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+  
+  .line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* Animation classes */
+.fade-in {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.slide-in {
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+/* Cultural element highlighting */
+.cultural-element {
+  position: relative;
+  cursor: help;
+}
+
+.cultural-element:hover::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #1f2937;
+  color: white;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 14px;
+  white-space: nowrap;
+  z-index: 1000;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.cultural-element:hover::before {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: #1f2937;
+  z-index: 1000;
+} 

client/src/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+); 

client/src/pages/CreateSubmission.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useParams, Link } from 'react-router-dom';
+
+const CreateSubmission: React.FC = () => {
+  const { id } = useParams();
+
+  return (
+    <div className="px-4 sm:px-6 lg:px-8">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-gray-900">Create Transcreation</h1>
+        <p className="mt-2 text-gray-600">Submit your creative translation for this text</p>
+      </div>
+      
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-lg font-medium text-gray-900 mb-4">Text ID: {id}</h2>
+        <p className="text-gray-600 mb-4">
+          This page will contain a form for creating transcreations, including fields for the translated text, 
+          cultural adaptations, explanations, and target culture selection.
+        </p>
+        
+        <div className="flex space-x-3">
+          <Link
+            to={`/text/${id}`}
+            className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+          >
+            Back to Text
+          </Link>
+          <Link
+            to="/submissions"
+            className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+          >
+            View My Submissions
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateSubmission; 

client/src/pages/Dashboard.tsx

@@ -0,0 +1,175 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { 
+  AcademicCapIcon, 
+  BookOpenIcon, 
+  HandThumbUpIcon,
+  UserIcon,
+  ChartBarIcon
+} from '@heroicons/react/24/outline';
+
+interface User {
+  name: string;
+  email: string;
+  role: string;
+}
+
+const Dashboard: React.FC = () => {
+  const [user, setUser] = useState<User | null>(null);
+  const [isFirstLogin, setIsFirstLogin] = useState(false);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const userData = localStorage.getItem('user');
+    if (userData) {
+      const userObj = JSON.parse(userData);
+      setUser(userObj);
+      
+      // Check if this is the first login
+      const loginHistory = localStorage.getItem('loginHistory');
+      if (!loginHistory || !JSON.parse(loginHistory)[userObj.email]) {
+        setIsFirstLogin(true);
+      }
+    } else {
+      navigate('/login');
+    }
+  }, [navigate]);
+
+  const getGreeting = () => {
+    if (!user) return '';
+    return isFirstLogin ? `Welcome, ${user.name}!` : `Welcome back, ${user.name}!`;
+  };
+
+  const getRoleDisplay = () => {
+    if (!user) return '';
+    return user.role === 'admin' ? 'Admin' : 'Student';
+  };
+
+  const quickActions = [
+    {
+      name: 'Tutorial Tasks',
+      description: 'Complete weekly tutorial tasks',
+      href: '/tutorial-tasks',
+      icon: AcademicCapIcon,
+      color: 'bg-blue-500'
+    },
+    {
+      name: 'Weekly Practice',
+      description: 'Practice with weekly examples',
+      href: '/weekly-practice',
+      icon: BookOpenIcon,
+      color: 'bg-green-500'
+    },
+    {
+      name: 'Vote Results',
+      description: 'View and vote on translations',
+      href: '/votes',
+      icon: HandThumbUpIcon,
+      color: 'bg-purple-500'
+    }
+  ];
+
+  if (!user) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900">{getGreeting()}</h1>
+              <p className="text-gray-600 mt-2">
+                Ready to practice your translation skills?
+              </p>
+            </div>
+            <div className="flex items-center space-x-3">
+              <span className="text-sm text-gray-600">{getRoleDisplay()}</span>
+              {user.role === 'admin' && (
+                <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
+                  Admin
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Quick Actions */}
+        <div className="mb-8">
+          <h2 className="text-lg font-medium text-gray-900 mb-4">Quick Actions</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {quickActions.map((action) => (
+              <Link
+                key={action.name}
+                to={action.href}
+                className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow"
+              >
+                <div className="flex items-center">
+                  <div className={`p-3 rounded-lg ${action.color}`}>
+                    <action.icon className="h-6 w-6 text-white" />
+                  </div>
+                  <div className="ml-4">
+                    <h3 className="text-lg font-medium text-gray-900">{action.name}</h3>
+                    <p className="text-gray-600">{action.description}</p>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        {/* Admin Panel (only for admin users) */}
+        {user.role === 'admin' && (
+          <div className="mb-8">
+            <h2 className="text-lg font-medium text-gray-900 mb-4">Admin Panel</h2>
+            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+              <div className="flex items-center mb-4">
+                <UserIcon className="h-6 w-6 text-gray-600 mr-3" />
+                <h3 className="text-lg font-medium text-gray-900">System Management</h3>
+              </div>
+              <p className="text-gray-600 mb-4">
+                Manage users, content, and system settings.
+              </p>
+              <Link
+                to="/manage"
+                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
+              >
+                Go to Manage
+              </Link>
+            </div>
+          </div>
+        )}
+
+        {/* Overview */}
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+          <div className="flex items-center mb-4">
+            <ChartBarIcon className="h-6 w-6 text-gray-600 mr-3" />
+            <h3 className="text-lg font-medium text-gray-900">Course Overview</h3>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div className="text-center">
+              <div className="text-2xl font-bold text-indigo-600">6</div>
+              <div className="text-sm text-gray-600">Weeks</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-bold text-green-600">2</div>
+              <div className="text-sm text-gray-600">Task Types</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-bold text-purple-600">Voting</div>
+              <div className="text-sm text-gray-600">Peer Review</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard; 

client/src/pages/Home.tsx

@@ -0,0 +1,171 @@
+import React, { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import {
+  AcademicCapIcon,
+  UsersIcon,
+  LightBulbIcon,
+  DocumentTextIcon
+} from '@heroicons/react/24/outline';
+
+interface User {
+  name: string;
+  email: string;
+  role?: string;
+}
+
+const Home: React.FC = () => {
+  const [user, setUser] = useState<User | null>(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Check if user is already logged in
+    const userData = localStorage.getItem('user');
+    const token = localStorage.getItem('token');
+    
+    if (userData && token) {
+      setUser(JSON.parse(userData));
+    }
+  }, []);
+
+  const handleGetStarted = () => {
+    if (user) {
+      // User is already logged in, redirect to dashboard
+      navigate('/dashboard');
+    } else {
+      // User is not logged in, redirect to login
+      navigate('/login');
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden">
+        <div className="max-w-7xl mx-auto">
+          <div className="relative z-10 pb-8 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
+            <main className="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
+              <div className="sm:text-center lg:text-left">
+                <h1 className="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
+                  <span className="block text-gradient">Transcreation</span>
+                  <span className="block text-indigo-600">Sandbox</span>
+                </h1>
+                <p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
+                  A practice platform for translation students to work with puns and wordplay examples. 
+                  Enter your student email to start practicing transcreation skills.
+                </p>
+                <div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
+                  <div className="rounded-md shadow">
+                    <button
+                      onClick={handleGetStarted}
+                      className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10"
+                    >
+                      {user ? 'Continue to Dashboard' : 'Get Started'}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+
+      {/* Features Section */}
+      <div className="py-12 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="lg:text-center">
+            <h2 className="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>
+            <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+              Practice translation skills
+            </p>
+            <p className="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
+              Work with puns and wordplay examples, submit translations, and vote on peer submissions.
+            </p>
+          </div>
+
+          <div className="mt-10">
+            <dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
+              <div className="relative">
+                <dt>
+                  <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                    <AcademicCapIcon className="h-6 w-6" aria-hidden="true" />
+                  </div>
+                  <p className="ml-16 text-lg leading-6 font-medium text-gray-900">
+                    Practice Examples
+                  </p>
+                </dt>
+                <dd className="mt-2 ml-16 text-base text-gray-500">
+                  Work with curated puns and wordplay examples in English and Chinese 
+                  for translation practice.
+                </dd>
+              </div>
+
+              <div className="relative">
+                <dt>
+                  <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                    <DocumentTextIcon className="h-6 w-6" aria-hidden="true" />
+                  </div>
+                  <p className="ml-16 text-lg leading-6 font-medium text-gray-900">
+                    Submit Translations
+                  </p>
+                </dt>
+                <dd className="mt-2 ml-16 text-base text-gray-500">
+                  Submit your translations for practice examples and track your progress.
+                </dd>
+              </div>
+
+              <div className="relative">
+                <dt>
+                  <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                    <UsersIcon className="h-6 w-6" aria-hidden="true" />
+                  </div>
+                  <p className="ml-16 text-lg leading-6 font-medium text-gray-900">
+                    Peer Voting
+                  </p>
+                </dt>
+                <dd className="mt-2 ml-16 text-base text-gray-500">
+                  Vote on anonymous student translations and see how your work compares.
+                </dd>
+              </div>
+
+              <div className="relative">
+                <dt>
+                  <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                    <LightBulbIcon className="h-6 w-6" aria-hidden="true" />
+                  </div>
+                  <p className="ml-16 text-lg leading-6 font-medium text-gray-900">
+                    Cultural Guidance
+                  </p>
+                </dt>
+                <dd className="mt-2 ml-16 text-base text-gray-500">
+                  Highlight culturally sensitive elements in source texts and provide 
+                  reference examples for comparison.
+                </dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+      </div>
+
+      {/* CTA Section */}
+      <div className="bg-indigo-700">
+        <div className="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
+          <h2 className="text-3xl font-extrabold text-white sm:text-4xl">
+            <span className="block">Ready to start?</span>
+            <span className="block">Begin your translation practice.</span>
+          </h2>
+          <p className="mt-4 text-lg leading-6 text-indigo-200">
+            Enter your student email to access the translation practice tools.
+          </p>
+          <button
+            onClick={handleGetStarted}
+            className="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto"
+          >
+            {user ? 'Continue to Dashboard' : 'Get Started'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Home; 

client/src/pages/Login.tsx

@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+// Pre-loaded user details
+const PREDEFINED_USERS = {
+  'mche0278@student.monash.edu': { name: 'Michelle Chen', email: 'mche0278@student.monash.edu' },
+  'zfan0011@student.monash.edu': { name: 'Fang Zhou', email: 'zfan0011@student.monash.edu' },
+  'yfuu0071@student.monash.edu': { name: 'Fu Yitong', email: 'yfuu0071@student.monash.edu' },
+  'hhan0022@student.monash.edu': { name: 'Han Heyang', email: 'hhan0022@student.monash.edu' },
+  'ylei0024@student.monash.edu': { name: 'Lei Yang', email: 'ylei0024@student.monash.edu' },
+  'wlii0217@student.monash.edu': { name: 'Li Wenhui', email: 'wlii0217@student.monash.edu' },
+  'zlia0091@student.monash.edu': { name: 'Liao Zhixin', email: 'zlia0091@student.monash.edu' },
+  'hmaa0054@student.monash.edu': { name: 'Ma Huachen', email: 'hmaa0054@student.monash.edu' },
+  'csun0059@student.monash.edu': { name: 'Sun Chongkai', email: 'csun0059@student.monash.edu' },
+  'pwon0030@student.monash.edu': { name: 'Wong Prisca Si-Heng', email: 'pwon0030@student.monash.edu' },
+  'zxia0017@student.monash.edu': { name: 'Xia Zechen', email: 'zxia0017@student.monash.edu' },
+  'lyou0021@student.monash.edu': { name: 'You Lianxiang', email: 'lyou0021@student.monash.edu' },
+  'wzhe0034@student.monash.edu': { name: 'Zheng Weijie', email: 'wzhe0034@student.monash.edu' },
+  'szhe0055@student.monash.edu': { name: 'Zheng Siyuan', email: 'szhe0055@student.monash.edu' },
+  'xzhe0055@student.monash.edu': { name: 'Zheng Xiang', email: 'xzhe0055@student.monash.edu' },
+  'hongchang.yu@monash.edu': { name: 'Tristan', email: 'hongchang.yu@monash.edu' }
+};
+
+const Login: React.FC = () => {
+  const [email, setEmail] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      // Always use backend for login and user info
+      const response = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email })
+      });
+      const data = await response.json();
+      if (data.success) {
+        localStorage.setItem('token', data.token);
+        localStorage.setItem('user', JSON.stringify(data.user));
+        // Track login history
+        const loginHistory = JSON.parse(localStorage.getItem('loginHistory') || '{}');
+        const isFirstLogin = !loginHistory[email];
+        if (isFirstLogin) {
+          loginHistory[email] = { firstLogin: true, lastLogin: new Date().toISOString() };
+        } else {
+          loginHistory[email] = { firstLogin: false, lastLogin: new Date().toISOString() };
+        }
+        localStorage.setItem('loginHistory', JSON.stringify(loginHistory));
+        navigate('/dashboard');
+      } else {
+        setError('Login failed. Please try again.');
+      }
+    } catch (error: any) {
+      console.error('Login error:', error);
+      setError('Login failed. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">
+            Welcome to Transcreation Sandbox
+          </h1>
+          <p className="text-gray-600">
+            Enter your student email address to continue
+          </p>
+        </div>
+        
+        {error && (
+          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
+            {error}
+          </div>
+        )}
+
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
+              Student Email Address
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              className="appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+              placeholder="your.email@student.monash.edu"
+              value={email}
+              onChange={(e) => {
+                setEmail(e.target.value);
+                if (error) setError('');
+              }}
+            />
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isLoading ? (
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+              ) : (
+                'Continue'
+              )}
+            </button>
+          </div>
+        </form>
+
+        <div className="text-center">
+          <p className="text-xs text-gray-500">
+            If you're not a student, you can still enter any email address to access as a visitor.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login; 

client/src/pages/Profile.tsx

@@ -0,0 +1,1661 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import {
+  UsersIcon,
+  DocumentTextIcon,
+  ChartBarIcon,
+  CogIcon,
+  UserGroupIcon,
+  AcademicCapIcon,
+  ShieldCheckIcon
+} from '@heroicons/react/24/outline';
+
+interface User {
+  name: string;
+  email: string;
+  role?: string;
+}
+
+interface SystemStats {
+  totalUsers: number;
+  practiceExamples: number;
+  totalSubmissions: number;
+  activeSessions: number;
+}
+
+interface PracticeExample {
+  _id: string;
+  title: string;
+  content: string;
+  sourceLanguage: string;
+  sourceCulture: string;
+  culturalElements: any[];
+  difficulty: string;
+  createdAt: string;
+}
+
+interface TutorialTask {
+  _id: string;
+  title: string;
+  content: string;
+  sourceLanguage: string;
+  sourceCulture: string;
+  weekNumber: number;
+  difficulty: string;
+  culturalElements: any[];
+  translationBrief?: string;
+  createdAt: string;
+}
+
+interface WeeklyPractice {
+  _id: string;
+  title: string;
+  content: string;
+  sourceLanguage: string;
+  sourceCulture: string;
+  weekNumber: number;
+  difficulty: string;
+  culturalElements: any[];
+  translationBrief?: string;
+  createdAt: string;
+}
+
+const Manage: React.FC = () => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [stats, setStats] = useState<SystemStats | null>(null);
+  const [statsLoading, setStatsLoading] = useState(true);
+  const [examples, setExamples] = useState<PracticeExample[]>([]);
+  const [examplesLoading, setExamplesLoading] = useState(false);
+  const [tutorialTasks, setTutorialTasks] = useState<TutorialTask[]>([]);
+  const [tutorialTasksLoading, setTutorialTasksLoading] = useState(false);
+  const [weeklyPractice, setWeeklyPractice] = useState<WeeklyPractice[]>([]);
+  const [weeklyPracticeLoading, setWeeklyPracticeLoading] = useState(false);
+  const [users, setUsers] = useState<User[]>([]);
+  const [usersLoading, setUsersLoading] = useState(false);
+  const [showAddUser, setShowAddUser] = useState(false);
+  const [showAddExample, setShowAddExample] = useState(false);
+  const [showAddTutorialTask, setShowAddTutorialTask] = useState(false);
+  const [showAddWeeklyPractice, setShowAddWeeklyPractice] = useState(false);
+  const [showAddTranslationBrief, setShowAddTranslationBrief] = useState(false);
+  const [editingUser, setEditingUser] = useState<User | null>(null);
+  const [editingExample, setEditingExample] = useState<PracticeExample | null>(null);
+  const [editingTutorialTask, setEditingTutorialTask] = useState<TutorialTask | null>(null);
+  const [editingWeeklyPractice, setEditingWeeklyPractice] = useState<WeeklyPractice | null>(null);
+  const [newUser, setNewUser] = useState({ name: '', email: '', role: 'student' });
+  const [newExample, setNewExample] = useState({ 
+    title: '', 
+    content: '', 
+    sourceLanguage: 'English', 
+    sourceCulture: 'American', 
+    difficulty: 'intermediate' 
+  });
+  const [newTutorialTask, setNewTutorialTask] = useState({
+    title: '',
+    content: '',
+    sourceLanguage: 'English',
+    sourceCulture: 'American',
+    weekNumber: 1,
+    difficulty: 'intermediate'
+  });
+  const [newWeeklyPractice, setNewWeeklyPractice] = useState({
+    title: '',
+    content: '',
+    sourceLanguage: 'English',
+    sourceCulture: 'American',
+    weekNumber: 1,
+    difficulty: 'intermediate'
+  });
+  const [newTranslationBrief, setNewTranslationBrief] = useState({
+    weekNumber: 1,
+    translationBrief: '',
+    type: 'tutorial' // 'tutorial' or 'weekly-practice'
+  });
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const userData = localStorage.getItem('user');
+    if (userData) {
+      const user = JSON.parse(userData);
+      setUser(user);
+      
+      // Redirect non-admin users to dashboard
+      if (user.role !== 'admin') {
+        navigate('/dashboard');
+        return;
+      }
+    } else {
+      navigate('/login');
+      return;
+    }
+    setLoading(false);
+  }, [navigate]);
+
+  const fetchAdminStats = useCallback(async () => {
+    try {
+      setStatsLoading(true);
+      const token = localStorage.getItem('token');
+      const userData = localStorage.getItem('user');
+      const user = userData ? JSON.parse(userData) : null;
+      
+      const response = await fetch('/api/auth/admin/stats', {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+          'user-role': user?.role || 'student'
+        }
+      });
+      
+      if (response.ok) {
+        const data = await response.json();
+        setStats(data.stats);
+      }
+    } catch (error) {
+      console.error('Failed to fetch admin stats:', error);
+    } finally {
+      setStatsLoading(false);
+    }
+  }, []);
+
+  const fetchPracticeExamples = useCallback(async () => {
+    try {
+      setExamplesLoading(true);
+      const token = localStorage.getItem('token');
+      const userData = localStorage.getItem('user');
+      const user = userData ? JSON.parse(userData) : null;
+      
+      const response = await fetch('/api/auth/admin/practice-examples', {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+          'user-role': user?.role || 'student'
+        }
+      });
+      
+      if (response.ok) {
+        const data = await response.json();
+        setExamples(data.examples);
+      }
+    } catch (error) {
+      console.error('Failed to fetch practice examples:', error);
+    } finally {
+      setExamplesLoading(false);
+    }
+  }, []);
+
+  const fetchUsers = useCallback(async () => {
+    try {
+      setUsersLoading(true);
+      const token = localStorage.getItem('token');
+      const response = await fetch('/api/auth/admin/users', {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+      
+      if (response.ok) {
+        const data = await response.json();
+        setUsers(data.users);
+      }
+    } catch (error) {
+      console.error('Failed to fetch users:', error);
+    } finally {
+      setUsersLoading(false);
+    }
+  }, []);
+
+  const fetchTutorialTasks = useCallback(async () => {
+    try {
+      setTutorialTasksLoading(true);
+      const token = localStorage.getItem('token');
+      const response = await fetch('/api/auth/admin/tutorial-tasks', {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+      
+      if (response.ok) {
+        const data = await response.json();
+        setTutorialTasks(data.tutorialTasks);
+      }
+    } catch (error) {
+      console.error('Failed to fetch tutorial tasks:', error);
+    } finally {
+      setTutorialTasksLoading(false);
+    }
+  }, []);
+
+  const fetchWeeklyPractice = useCallback(async () => {
+    try {
+      setWeeklyPracticeLoading(true);
+      const token = localStorage.getItem('token');
+      const response = await fetch('/api/auth/admin/weekly-practice', {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+      
+      if (response.ok) {
+        const data = await response.json();
+        setWeeklyPractice(data.weeklyPractice);
+      }
+    } catch (error) {
+      console.error('Failed to fetch weekly practice:', error);
+    } finally {
+      setWeeklyPracticeLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (user?.role === 'admin') {
+      fetchAdminStats();
+      fetchPracticeExamples();
+      fetchTutorialTasks();
+      fetchWeeklyPractice();
+      fetchUsers();
+    }
+  }, [user, fetchAdminStats, fetchPracticeExamples, fetchTutorialTasks, fetchWeeklyPractice, fetchUsers]);
+
+  const addUser = async () => {
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch('/api/auth/admin/users', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(newUser)
+      });
+      
+      if (response.ok) {
+        setNewUser({ name: '', email: '', role: 'student' });
+        setShowAddUser(false);
+        await fetchUsers();
+        alert('User added successfully!');
+      } else {
+        const error = await response.json();
+        alert(`Failed to add user: ${error.error}`);
+      }
+    } catch (error) {
+      console.error('Failed to add user:', error);
+      alert('Failed to add user');
+    }
+  };
+
+  const updateUser = async (email: string, updates: Partial<User>) => {
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch(`/api/auth/admin/users/${email}`, {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(updates)
+      });
+      
+      if (response.ok) {
+        setEditingUser(null);
+        await fetchUsers();
+        alert('User updated successfully!');
+      } else {
+        const error = await response.json();
+        alert(`Failed to update user: ${error.error}`);
+      }
+    } catch (error) {
+      console.error('Failed to update user:', error);
+      alert('Failed to update user');
+    }
+  };
+
+  const deleteUser = async (email: string) => {
+    if (!window.confirm('Are you sure you want to delete this user?')) return;
+    
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch(`/api/auth/admin/users/${email}`, {
+        method: 'DELETE',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+      
+      if (response.ok) {
+        await fetchUsers();
+        alert('User deleted successfully!');
+      } else {
+        const error = await response.json();
+        alert(`Failed to delete user: ${error.error}`);
+      }
+    } catch (error) {
+      console.error('Failed to delete user:', error);
+      alert('Failed to delete user');
+    }
+  };
+
+  const addExample = async () => {
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch('/api/auth/admin/practice-examples', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(newExample)
+      });
+      
+      if (response.ok) {
+        setNewExample({ 
+          title: '', 
+          content: '', 
+          sourceLanguage: 'English', 
+          sourceCulture: 'American', 
+          difficulty: 'intermediate' 
+        });
+        setShowAddExample(false);
+        await fetchPracticeExamples();
+        alert('Example added successfully!');
+      } else {
+        const error = await response.json();
+        alert(`Failed to add example: ${error.error}`);
+      }
+    } catch (error) {
+      console.error('Failed to add example:', error);
+      alert('Failed to add example');
+    }
+  };
+
+  const updateExample = async (id: string, updates: Partial<PracticeExample>) => {
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch(`/api/auth/admin/practice-examples/${id}`, {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(updates)
+      });
+      
+      if (response.ok) {
+        setEditingExample(null);
+        await fetchPracticeExamples();
+        alert('Example updated successfully!');
+      } else {
+        const error = await response.json();
+        alert(`Failed to update example: ${error.error}`);
+      }
+    } catch (error) {
+      console.error('Failed to update example:', error);
+      alert('Failed to update example');
+    }
+  };
+
+  const deleteExample = async (id: string) => {
+    if (!window.confirm('Are you sure you want to delete this example?')) return;
+    
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch(`/api/auth/admin/practice-examples/${id}`, {
+        method: 'DELETE',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+      
+      if (response.ok) {
+        await fetchPracticeExamples();
+        alert('Example deleted successfully!');
+      } else {
+        const error = await response.json();
+        alert(`Failed to delete example: ${error.error}`);
+      }
+    } catch (error) {
+      console.error('Failed to delete example:', error);
+      alert('Failed to delete example');
+    }
+  };
+
+  // Tutorial Tasks CRUD
+  const addTutorialTask = async () => {
+    try {
+      const token = localStorage.getItem('token');
+      const userData = localStorage.getItem('user');
+      const user = userData ? JSON.parse(userData) : null;
+      
+      const response = await fetch('/api/auth/admin/tutorial-tasks', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+          'user-role': user?.role || 'student'
+        },
+        body: JSON.stringify(newTutorialTask)
+      });
+      
+      if (response.ok) {
+        setNewTutorialTask({
+          title: '',
+          content: '',
+          sourceLanguage: 'English',
+          sourceCulture: 'American',
+          weekNumber: 1,
+          difficulty: 'intermediate'
+        });
+        setShowAddTutorialTask(false);
+        await fetchTutorialTasks();
+        alert('Tutorial task added successfully!');
+      } else {
+        const error = await response.json();
+        alert(`Failed to add tutorial task: ${error.error}`);
+      }
+    } catch (error) {
+      console.error('Failed to add tutorial task:', error);
+      alert('Failed to add tutorial task');
+    }
+  };
+
+  const updateTutorialTask = async (id: string, updates: Partial<TutorialTask>) => {
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch(`/api/auth/admin/tutorial-tasks/${id}`, {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(updates)
+      });
+      
+      if (response.ok) {
+        setEditingTutorialTask(null);
+        await fetchTutorialTasks();
+        alert('Tutorial task updated successfully!');
+      } else {
+        const error = await response.json();
+        alert(`Failed to update tutorial task: ${error.error}`);
+      }
+    } catch (error) {
+      console.error('Failed to update tutorial task:', error);
+      alert('Failed to update tutorial task');
+    }
+  };
+
+  const deleteTutorialTask = async (id: string) => {
+    if (!window.confirm('Are you sure you want to delete this tutorial task?')) return;
+    
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch(`/api/auth/admin/tutorial-tasks/${id}`, {
+        method: 'DELETE',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+      
+      if (response.ok) {
+        await fetchTutorialTasks();
+        alert('Tutorial task deleted successfully!');
+      } else {
+        const error = await response.json();
+        alert(`Failed to delete tutorial task: ${error.error}`);
+      }
+    } catch (error) {
+      console.error('Failed to delete tutorial task:', error);
+      alert('Failed to delete tutorial task');
+    }
+  };
+
+  // Weekly Practice CRUD
+  const addWeeklyPractice = async () => {
+    try {
+      const token = localStorage.getItem('token');
+      const userData = localStorage.getItem('user');
+      const user = userData ? JSON.parse(userData) : null;
+      
+      const response = await fetch('/api/auth/admin/weekly-practice', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+          'user-role': user?.role || 'student'
+        },
+        body: JSON.stringify(newWeeklyPractice)
+      });
+      
+      if (response.ok) {
+        setNewWeeklyPractice({
+          title: '',
+          content: '',
+          sourceLanguage: 'English',
+          sourceCulture: 'American',
+          weekNumber: 1,
+          difficulty: 'intermediate'
+        });
+        setShowAddWeeklyPractice(false);
+        await fetchWeeklyPractice();
+        alert('Weekly practice added successfully!');
+      } else {
+        const error = await response.json();
+        alert(`Failed to add weekly practice: ${error.error}`);
+      }
+    } catch (error) {
+      console.error('Failed to add weekly practice:', error);
+      alert('Failed to add weekly practice');
+    }
+  };
+
+  const updateWeeklyPractice = async (id: string, updates: Partial<WeeklyPractice>) => {
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch(`/api/auth/admin/weekly-practice/${id}`, {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(updates)
+      });
+      
+      if (response.ok) {
+        setEditingWeeklyPractice(null);
+        await fetchWeeklyPractice();
+        alert('Weekly practice updated successfully!');
+      } else {
+        const error = await response.json();
+        alert(`Failed to update weekly practice: ${error.error}`);
+      }
+    } catch (error) {
+      console.error('Failed to update weekly practice:', error);
+      alert('Failed to update weekly practice');
+    }
+  };
+
+  const deleteWeeklyPractice = async (id: string) => {
+    if (!window.confirm('Are you sure you want to delete this weekly practice?')) return;
+    
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch(`/api/auth/admin/weekly-practice/${id}`, {
+        method: 'DELETE',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+      
+      if (response.ok) {
+        await fetchWeeklyPractice();
+        alert('Weekly practice deleted successfully!');
+      } else {
+        const error = await response.json();
+        alert(`Failed to delete weekly practice: ${error.error}`);
+      }
+    } catch (error) {
+      console.error('Failed to delete weekly practice:', error);
+      alert('Failed to delete weekly practice');
+    }
+  };
+
+  const addTranslationBrief = async () => {
+    try {
+      const token = localStorage.getItem('token');
+      const userData = localStorage.getItem('user');
+      const user = userData ? JSON.parse(userData) : null;
+      
+      const response = await fetch('/api/auth/admin/translation-brief', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+          'user-role': user?.role || 'student'
+        },
+        body: JSON.stringify(newTranslationBrief)
+      });
+      
+      if (response.ok) {
+        setShowAddTranslationBrief(false);
+        setNewTranslationBrief({
+          weekNumber: 1,
+          translationBrief: '',
+          type: 'tutorial'
+        });
+        alert('Translation brief added successfully!');
+      } else {
+        const error = await response.json();
+        alert(`Failed to add translation brief: ${error.error}`);
+      }
+    } catch (error) {
+      console.error('Failed to add translation brief:', error);
+      alert('Failed to add translation brief');
+    }
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    window.location.href = '/';
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
+      </div>
+    );
+  }
+
+  if (!user || user.role !== 'admin') {
+    return null; // Will redirect in useEffect
+  }
+
+  return (
+    <div className="px-4 sm:px-6 lg:px-8">
+      <div className="mb-8">
+        <div className="flex justify-between items-center">
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900">Manage</h1>
+            <p className="mt-2 text-gray-600">Admin panel for system management</p>
+          </div>
+          <div className="flex items-center space-x-4">
+            <span className="text-sm text-gray-500">
+              Admin • {user.email}
+            </span>
+            <button
+              onClick={handleLogout}
+              className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+            >
+              Logout
+            </button>
+          </div>
+        </div>
+      </div>
+      
+      {/* Admin Management Sections */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+        {/* User Management */}
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="flex items-center mb-4">
+            <UsersIcon className="h-8 w-8 text-purple-600 mr-3" />
+            <h2 className="text-lg font-medium text-gray-900">User Management</h2>
+          </div>
+          <p className="text-gray-600 mb-4">
+            Manage student accounts, roles, and permissions.
+          </p>
+          <div className="space-y-2 mb-4">
+            <div className="flex items-center text-sm text-gray-500">
+              <div className="w-2 h-2 bg-purple-600 rounded-full mr-3"></div>
+              {usersLoading ? 'Loading users...' : `${users.length} registered users`}
+            </div>
+            <div className="flex items-center text-sm text-gray-500">
+              <div className="w-2 h-2 bg-purple-600 rounded-full mr-3"></div>
+              {users.filter(u => u.role === 'admin').length} admin users
+            </div>
+            <div className="flex items-center text-sm text-gray-500">
+              <div className="w-2 h-2 bg-purple-600 rounded-full mr-3"></div>
+              {users.filter(u => u.role === 'student').length} student users
+            </div>
+          </div>
+          <div className="space-y-2">
+            <button 
+              onClick={() => setShowAddUser(!showAddUser)}
+              className="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+            >
+              {showAddUser ? 'Cancel' : 'Add User'}
+            </button>
+            <button 
+              onClick={fetchUsers}
+              className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium ml-2"
+            >
+              Refresh
+            </button>
+          </div>
+          
+          {/* Add User Form */}
+          {showAddUser && (
+            <div className="mt-4 p-4 bg-gray-50 rounded-md">
+              <h4 className="text-sm font-medium text-gray-900 mb-3">Add New User:</h4>
+              <div className="space-y-3">
+                <input
+                  type="text"
+                  placeholder="Name"
+                  value={newUser.name}
+                  onChange={(e) => setNewUser({...newUser, name: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                />
+                <input
+                  type="email"
+                  placeholder="Email"
+                  value={newUser.email}
+                  onChange={(e) => setNewUser({...newUser, email: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                />
+                <select
+                  value={newUser.role}
+                  onChange={(e) => setNewUser({...newUser, role: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                >
+                  <option value="student">Student</option>
+                  <option value="admin">Admin</option>
+                </select>
+                <button
+                  onClick={addUser}
+                  className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                >
+                  Add User
+                </button>
+              </div>
+            </div>
+          )}
+          
+          {/* Users List */}
+          {users.length > 0 && (
+            <div className="mt-4 max-h-60 overflow-y-auto">
+              <h4 className="text-sm font-medium text-gray-900 mb-2">Registered Users:</h4>
+              <div className="space-y-2">
+                {users.map((user) => (
+                  <div key={user.email} className="bg-gray-50 p-3 rounded-md">
+                    <div className="flex justify-between items-center">
+                      <div className="flex-1">
+                        <p className="text-sm font-medium text-gray-900">{user.name}</p>
+                        <p className="text-xs text-gray-600">{user.email}</p>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <span className={`text-xs px-2 py-1 rounded ${
+                          user.role === 'admin' 
+                            ? 'bg-red-100 text-red-800' 
+                            : 'bg-green-100 text-green-800'
+                        }`}>
+                          {user.role}
+                        </span>
+                        <button
+                          onClick={() => setEditingUser(user)}
+                          className="text-blue-600 hover:text-blue-800 text-xs"
+                        >
+                          Edit
+                        </button>
+                        {user.email !== 'hongchang.yu@monash.edu' && (
+                          <button
+                            onClick={() => deleteUser(user.email)}
+                            className="text-red-600 hover:text-red-800 text-xs"
+                          >
+                            Delete
+                          </button>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+          
+          {/* Edit User Modal */}
+          {editingUser && (
+            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+              <div className="bg-white p-6 rounded-lg max-w-md w-full mx-4">
+                <h3 className="text-lg font-medium text-gray-900 mb-4">Edit User</h3>
+                <div className="space-y-3">
+                  <input
+                    type="text"
+                    placeholder="Name"
+                    value={editingUser.name}
+                    onChange={(e) => setEditingUser({...editingUser, name: e.target.value})}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                  />
+                  <input
+                    type="email"
+                    placeholder="Email"
+                    value={editingUser.email}
+                    disabled
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100"
+                  />
+                  <select
+                    value={editingUser.role}
+                    onChange={(e) => setEditingUser({...editingUser, role: e.target.value})}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                  >
+                    <option value="student">Student</option>
+                    <option value="admin">Admin</option>
+                  </select>
+                  <div className="flex space-x-2">
+                    <button
+                      onClick={() => updateUser(editingUser.email, editingUser)}
+                      className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                    >
+                      Update
+                    </button>
+                    <button
+                      onClick={() => setEditingUser(null)}
+                      className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Content Management */}
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="flex items-center mb-4">
+            <DocumentTextIcon className="h-8 w-8 text-blue-600 mr-3" />
+            <h2 className="text-lg font-medium text-gray-900">Content Management</h2>
+          </div>
+          <p className="text-gray-600 mb-4">
+            Manage practice examples and content.
+          </p>
+          <div className="space-y-2 mb-4">
+            <div className="flex items-center text-sm text-gray-500">
+              <div className="w-2 h-2 bg-blue-600 rounded-full mr-3"></div>
+              {examplesLoading ? 'Loading examples...' : `${examples.length} practice examples`}
+            </div>
+            <div className="flex items-center text-sm text-gray-500">
+              <div className="w-2 h-2 bg-blue-600 rounded-full mr-3"></div>
+              Edit existing content
+            </div>
+          </div>
+          <div className="space-y-2">
+            <button 
+              onClick={() => setShowAddExample(!showAddExample)}
+              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+            >
+              {showAddExample ? 'Cancel' : 'Add Example'}
+            </button>
+            <button 
+              onClick={fetchPracticeExamples}
+              className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium ml-2"
+            >
+              Refresh
+            </button>
+          </div>
+
+          {/* Initialize Content Section */}
+          <div className="mt-6 p-4 bg-gray-50 rounded-md">
+            <h4 className="text-sm font-medium text-gray-900 mb-3">Initialize Content:</h4>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Practice Examples (Week 1)</label>
+                <button
+                  onClick={async () => {
+                    try {
+                      const token = localStorage.getItem('token');
+                      const response = await fetch('/api/search/initialize-practice-examples', {
+                        method: 'POST',
+                        headers: {
+                          'Authorization': `Bearer ${token}`,
+                          'Content-Type': 'application/json'
+                        }
+                      });
+                      if (response.ok) {
+                        alert('Practice examples initialized successfully!');
+                        await fetchPracticeExamples();
+                      } else {
+                        alert('Failed to initialize practice examples');
+                      }
+                    } catch (error) {
+                      alert('Failed to initialize practice examples');
+                    }
+                  }}
+                  className="w-full bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded-md text-xs font-medium"
+                >
+                  Initialize Week 1 Practice
+                </button>
+              </div>
+              
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Tutorial Tasks</label>
+                <div className="flex space-x-1">
+                  {[1, 2, 3, 4, 5, 6].map(week => (
+                    <button
+                      key={week}
+                      onClick={async () => {
+                        try {
+                          const token = localStorage.getItem('token');
+                          const response = await fetch(`/api/search/initialize-tutorial-tasks/${week}`, {
+                            method: 'POST',
+                            headers: {
+                              'Authorization': `Bearer ${token}`,
+                              'Content-Type': 'application/json'
+                            }
+                          });
+                          if (response.ok) {
+                            alert(`Tutorial tasks for Week ${week} initialized successfully!`);
+                          } else {
+                            alert(`Failed to initialize tutorial tasks for Week ${week}`);
+                          }
+                        } catch (error) {
+                          alert(`Failed to initialize tutorial tasks for Week ${week}`);
+                        }
+                      }}
+                      className="flex-1 bg-blue-600 hover:bg-blue-700 text-white px-2 py-2 rounded-md text-xs font-medium"
+                    >
+                      W{week}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Weekly Practice</label>
+                <div className="flex space-x-1">
+                  {[2, 3, 4, 5, 6].map(week => (
+                    <button
+                      key={week}
+                      onClick={async () => {
+                        try {
+                          const token = localStorage.getItem('token');
+                          const response = await fetch(`/api/search/initialize-weekly-practice/${week}`, {
+                            method: 'POST',
+                            headers: {
+                              'Authorization': `Bearer ${token}`,
+                              'Content-Type': 'application/json'
+                            }
+                          });
+                          if (response.ok) {
+                            alert(`Weekly practice for Week ${week} initialized successfully!`);
+                          } else {
+                            alert(`Failed to initialize weekly practice for Week ${week}`);
+                          }
+                        } catch (error) {
+                          alert(`Failed to initialize weekly practice for Week ${week}`);
+                        }
+                      }}
+                      className="flex-1 bg-purple-600 hover:bg-purple-700 text-white px-2 py-2 rounded-md text-xs font-medium"
+                    >
+                      W{week}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          {/* Practice Examples List */}
+          {examples.length > 0 && (
+            <div className="mt-4 max-h-60 overflow-y-auto">
+              <h4 className="text-sm font-medium text-gray-900 mb-2">Current Examples:</h4>
+              <div className="space-y-2">
+                {examples.map((example) => (
+                  <div key={example._id} className="bg-gray-50 p-3 rounded-md">
+                    <div className="flex justify-between items-start">
+                      <div className="flex-1">
+                        <p className="text-sm font-medium text-gray-900">{example.title}</p>
+                        <p className="text-xs text-gray-600 mt-1 line-clamp-2">{example.content}</p>
+                        <div className="flex items-center mt-1 space-x-2">
+                          <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
+                            {example.sourceLanguage}
+                          </span>
+                          <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">
+                            {example.difficulty}
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex items-center space-x-2 ml-2">
+                        <button
+                          onClick={() => setEditingExample(example)}
+                          className="text-blue-600 hover:text-blue-800 text-xs"
+                        >
+                          Edit
+                        </button>
+                        <button
+                          onClick={() => deleteExample(example._id)}
+                          className="text-red-600 hover:text-red-800 text-xs"
+                        >
+                          Delete
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+          
+          {/* Add Example Form */}
+          {showAddExample && (
+            <div className="mt-4 p-4 bg-gray-50 rounded-md">
+              <h4 className="text-sm font-medium text-gray-900 mb-3">Add New Example:</h4>
+              <div className="space-y-3">
+                <input
+                  type="text"
+                  placeholder="Title"
+                  value={newExample.title}
+                  onChange={(e) => setNewExample({...newExample, title: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                />
+                <textarea
+                  placeholder="Content"
+                  value={newExample.content}
+                  onChange={(e) => setNewExample({...newExample, content: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                  rows={3}
+                />
+                <div className="grid grid-cols-2 gap-2">
+                  <select
+                    value={newExample.sourceLanguage}
+                    onChange={(e) => setNewExample({...newExample, sourceLanguage: e.target.value})}
+                    className="px-3 py-2 border border-gray-300 rounded-md"
+                  >
+                    <option value="English">English</option>
+                    <option value="Chinese">Chinese</option>
+                  </select>
+                  <select
+                    value={newExample.difficulty}
+                    onChange={(e) => setNewExample({...newExample, difficulty: e.target.value})}
+                    className="px-3 py-2 border border-gray-300 rounded-md"
+                  >
+                    <option value="beginner">Beginner</option>
+                    <option value="intermediate">Intermediate</option>
+                    <option value="advanced">Advanced</option>
+                  </select>
+                </div>
+                <button
+                  onClick={addExample}
+                  className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                >
+                  Add Example
+                </button>
+              </div>
+            </div>
+          )}
+          
+          {/* Edit Example Modal */}
+          {editingExample && (
+            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+              <div className="bg-white p-6 rounded-lg max-w-md w-full mx-4 max-h-96 overflow-y-auto">
+                <h3 className="text-lg font-medium text-gray-900 mb-4">Edit Example</h3>
+                <div className="space-y-3">
+                  <input
+                    type="text"
+                    placeholder="Title"
+                    value={editingExample.title}
+                    onChange={(e) => setEditingExample({...editingExample, title: e.target.value})}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                  />
+                  <textarea
+                    placeholder="Content"
+                    value={editingExample.content}
+                    onChange={(e) => setEditingExample({...editingExample, content: e.target.value})}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                    rows={3}
+                  />
+                  <div className="grid grid-cols-2 gap-2">
+                    <select
+                      value={editingExample.sourceLanguage}
+                      onChange={(e) => setEditingExample({...editingExample, sourceLanguage: e.target.value})}
+                      className="px-3 py-2 border border-gray-300 rounded-md"
+                    >
+                      <option value="English">English</option>
+                      <option value="Chinese">Chinese</option>
+                    </select>
+                    <select
+                      value={editingExample.difficulty}
+                      onChange={(e) => setEditingExample({...editingExample, difficulty: e.target.value})}
+                      className="px-3 py-2 border border-gray-300 rounded-md"
+                    >
+                      <option value="beginner">Beginner</option>
+                      <option value="intermediate">Intermediate</option>
+                      <option value="advanced">Advanced</option>
+                    </select>
+                  </div>
+                  <div className="flex space-x-2">
+                    <button
+                      onClick={() => updateExample(editingExample._id, editingExample)}
+                      className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                    >
+                      Update
+                    </button>
+                    <button
+                      onClick={() => setEditingExample(null)}
+                      className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Tutorial Tasks Management */}
+      <div className="bg-white rounded-lg shadow p-6 mb-6">
+        <div className="flex items-center mb-4">
+          <AcademicCapIcon className="h-8 w-8 text-green-600 mr-3" />
+          <h2 className="text-lg font-medium text-gray-900">Tutorial Tasks Management</h2>
+        </div>
+        <p className="text-gray-600 mb-4">
+          Manage tutorial tasks for each week.
+        </p>
+        <div className="space-y-2 mb-4">
+          <div className="flex items-center text-sm text-gray-500">
+            <div className="w-2 h-2 bg-green-600 rounded-full mr-3"></div>
+            {tutorialTasksLoading ? 'Loading tutorial tasks...' : `${tutorialTasks.length} tutorial tasks`}
+          </div>
+          <div className="flex items-center text-sm text-gray-500">
+            <div className="w-2 h-2 bg-green-600 rounded-full mr-3"></div>
+            Edit existing tutorial tasks
+          </div>
+        </div>
+        <div className="space-y-2">
+          <button 
+            onClick={() => setShowAddTutorialTask(!showAddTutorialTask)}
+            className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+          >
+            {showAddTutorialTask ? 'Cancel' : 'Add Tutorial Task'}
+          </button>
+          <button 
+            onClick={() => setShowAddTranslationBrief(!showAddTranslationBrief)}
+            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium ml-2"
+          >
+            {showAddTranslationBrief ? 'Cancel' : 'Add Translation Brief'}
+          </button>
+          <button 
+            onClick={fetchTutorialTasks}
+            className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium ml-2"
+          >
+            Refresh
+          </button>
+        </div>
+
+        {/* Tutorial Tasks List */}
+        {tutorialTasks.length > 0 && (
+          <div className="mt-4 max-h-60 overflow-y-auto">
+            <h4 className="text-sm font-medium text-gray-900 mb-2">Current Tutorial Tasks:</h4>
+            <div className="space-y-2">
+              {tutorialTasks.map((task) => (
+                <div key={task._id} className="bg-gray-50 p-3 rounded-md">
+                  <div className="flex justify-between items-start">
+                    <div className="flex-1">
+                      <p className="text-sm font-medium text-gray-900">{task.title}</p>
+                      <p className="text-xs text-gray-600 mt-1 line-clamp-2">{task.content}</p>
+                      <div className="flex items-center mt-1 space-x-2">
+                        <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">
+                          Week {task.weekNumber}
+                        </span>
+                        <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
+                          {task.sourceLanguage}
+                        </span>
+                        <span className="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">
+                          {task.difficulty}
+                        </span>
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-2 ml-2">
+                      <button
+                        onClick={() => setEditingTutorialTask(task)}
+                        className="text-blue-600 hover:text-blue-800 text-xs"
+                      >
+                        Edit
+                      </button>
+                      <button
+                        onClick={() => deleteTutorialTask(task._id)}
+                        className="text-red-600 hover:text-red-800 text-xs"
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Add Tutorial Task Form */}
+        {showAddTutorialTask && (
+          <div className="mt-4 p-4 bg-gray-50 rounded-md">
+            <h4 className="text-sm font-medium text-gray-900 mb-3">Add New Tutorial Task:</h4>
+            <div className="space-y-3">
+              <input
+                type="text"
+                placeholder="Title"
+                value={newTutorialTask.title}
+                onChange={(e) => setNewTutorialTask({...newTutorialTask, title: e.target.value})}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              />
+              <textarea
+                placeholder="Content"
+                value={newTutorialTask.content}
+                onChange={(e) => setNewTutorialTask({...newTutorialTask, content: e.target.value})}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                rows={3}
+              />
+              <div className="grid grid-cols-3 gap-2">
+                <select
+                  value={newTutorialTask.sourceLanguage}
+                  onChange={(e) => setNewTutorialTask({...newTutorialTask, sourceLanguage: e.target.value})}
+                  className="px-3 py-2 border border-gray-300 rounded-md"
+                >
+                  <option value="English">English</option>
+                  <option value="Chinese">Chinese</option>
+                </select>
+                <select
+                  value={newTutorialTask.weekNumber}
+                  onChange={(e) => setNewTutorialTask({...newTutorialTask, weekNumber: parseInt(e.target.value)})}
+                  className="px-3 py-2 border border-gray-300 rounded-md"
+                >
+                  {[1, 2, 3, 4, 5, 6].map(week => (
+                    <option key={week} value={week}>Week {week}</option>
+                  ))}
+                </select>
+                <select
+                  value={newTutorialTask.difficulty}
+                  onChange={(e) => setNewTutorialTask({...newTutorialTask, difficulty: e.target.value})}
+                  className="px-3 py-2 border border-gray-300 rounded-md"
+                >
+                  <option value="beginner">Beginner</option>
+                  <option value="intermediate">Intermediate</option>
+                  <option value="advanced">Advanced</option>
+                </select>
+              </div>
+              <button
+                onClick={addTutorialTask}
+                className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+              >
+                Add Tutorial Task
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Add Translation Brief Form */}
+        {showAddTranslationBrief && (
+          <div className="mt-4 p-4 bg-gray-50 rounded-md">
+            <h4 className="text-sm font-medium text-gray-900 mb-3">Add Translation Brief:</h4>
+            <div className="space-y-3">
+              <select
+                value={newTranslationBrief.type}
+                onChange={(e) => setNewTranslationBrief({...newTranslationBrief, type: e.target.value})}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              >
+                <option value="tutorial">Tutorial Tasks</option>
+                <option value="weekly-practice">Weekly Practice</option>
+              </select>
+              <select
+                value={newTranslationBrief.weekNumber}
+                onChange={(e) => setNewTranslationBrief({...newTranslationBrief, weekNumber: parseInt(e.target.value)})}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              >
+                {[1, 2, 3, 4, 5, 6].map(week => (
+                  <option key={week} value={week}>Week {week}</option>
+                ))}
+              </select>
+              <textarea
+                placeholder="Translation Brief"
+                value={newTranslationBrief.translationBrief}
+                onChange={(e) => setNewTranslationBrief({...newTranslationBrief, translationBrief: e.target.value})}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                rows={4}
+              />
+              <button
+                onClick={addTranslationBrief}
+                className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+              >
+                Add Translation Brief
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Edit Tutorial Task Modal */}
+        {editingTutorialTask && (
+          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+            <div className="bg-white p-6 rounded-lg max-w-md w-full mx-4 max-h-96 overflow-y-auto">
+              <h3 className="text-lg font-medium text-gray-900 mb-4">Edit Tutorial Task</h3>
+              <div className="space-y-3">
+                <input
+                  type="text"
+                  placeholder="Title"
+                  value={editingTutorialTask.title}
+                  onChange={(e) => setEditingTutorialTask({...editingTutorialTask, title: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                />
+                <textarea
+                  placeholder="Content"
+                  value={editingTutorialTask.content}
+                  onChange={(e) => setEditingTutorialTask({...editingTutorialTask, content: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                  rows={3}
+                />
+                <div className="grid grid-cols-3 gap-2">
+                  <select
+                    value={editingTutorialTask.sourceLanguage}
+                    onChange={(e) => setEditingTutorialTask({...editingTutorialTask, sourceLanguage: e.target.value})}
+                    className="px-3 py-2 border border-gray-300 rounded-md"
+                  >
+                    <option value="English">English</option>
+                    <option value="Chinese">Chinese</option>
+                  </select>
+                  <select
+                    value={editingTutorialTask.weekNumber}
+                    onChange={(e) => setEditingTutorialTask({...editingTutorialTask, weekNumber: parseInt(e.target.value)})}
+                    className="px-3 py-2 border border-gray-300 rounded-md"
+                  >
+                    {[1, 2, 3, 4, 5, 6].map(week => (
+                      <option key={week} value={week}>Week {week}</option>
+                    ))}
+                  </select>
+                  <select
+                    value={editingTutorialTask.difficulty}
+                    onChange={(e) => setEditingTutorialTask({...editingTutorialTask, difficulty: e.target.value})}
+                    className="px-3 py-2 border border-gray-300 rounded-md"
+                  >
+                    <option value="beginner">Beginner</option>
+                    <option value="intermediate">Intermediate</option>
+                    <option value="advanced">Advanced</option>
+                  </select>
+                </div>
+                <div className="flex space-x-2">
+                  <button
+                    onClick={() => updateTutorialTask(editingTutorialTask._id, editingTutorialTask)}
+                    className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                  >
+                    Update
+                  </button>
+                  <button
+                    onClick={() => setEditingTutorialTask(null)}
+                    className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Weekly Practice Management */}
+      <div className="bg-white rounded-lg shadow p-6 mb-6">
+        <div className="flex items-center mb-4">
+          <ShieldCheckIcon className="h-8 w-8 text-purple-600 mr-3" />
+          <h2 className="text-lg font-medium text-gray-900">Weekly Practice Management</h2>
+        </div>
+        <p className="text-gray-600 mb-4">
+          Manage weekly practice tasks for each week.
+        </p>
+        <div className="space-y-2 mb-4">
+          <div className="flex items-center text-sm text-gray-500">
+            <div className="w-2 h-2 bg-purple-600 rounded-full mr-3"></div>
+            {weeklyPracticeLoading ? 'Loading weekly practice...' : `${weeklyPractice.length} weekly practice tasks`}
+          </div>
+          <div className="flex items-center text-sm text-gray-500">
+            <div className="w-2 h-2 bg-purple-600 rounded-full mr-3"></div>
+            Edit existing weekly practice tasks
+          </div>
+        </div>
+        <div className="space-y-2">
+          <button 
+            onClick={() => setShowAddWeeklyPractice(!showAddWeeklyPractice)}
+            className="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+          >
+            {showAddWeeklyPractice ? 'Cancel' : 'Add Weekly Practice'}
+          </button>
+          <button 
+            onClick={() => setShowAddTranslationBrief(!showAddTranslationBrief)}
+            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium ml-2"
+          >
+            {showAddTranslationBrief ? 'Cancel' : 'Add Translation Brief'}
+          </button>
+          <button 
+            onClick={fetchWeeklyPractice}
+            className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium ml-2"
+          >
+            Refresh
+          </button>
+        </div>
+
+        {/* Weekly Practice List */}
+        {weeklyPractice.length > 0 && (
+          <div className="mt-4 max-h-60 overflow-y-auto">
+            <h4 className="text-sm font-medium text-gray-900 mb-2">Current Weekly Practice:</h4>
+            <div className="space-y-2">
+              {weeklyPractice.map((practice) => (
+                <div key={practice._id} className="bg-gray-50 p-3 rounded-md">
+                  <div className="flex justify-between items-start">
+                    <div className="flex-1">
+                      <p className="text-sm font-medium text-gray-900">{practice.title}</p>
+                      <p className="text-xs text-gray-600 mt-1 line-clamp-2">{practice.content}</p>
+                      <div className="flex items-center mt-1 space-x-2">
+                        <span className="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">
+                          Week {practice.weekNumber}
+                        </span>
+                        <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
+                          {practice.sourceLanguage}
+                        </span>
+                        <span className="text-xs bg-orange-100 text-orange-800 px-2 py-1 rounded">
+                          {practice.difficulty}
+                        </span>
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-2 ml-2">
+                      <button
+                        onClick={() => setEditingWeeklyPractice(practice)}
+                        className="text-blue-600 hover:text-blue-800 text-xs"
+                      >
+                        Edit
+                      </button>
+                      <button
+                        onClick={() => deleteWeeklyPractice(practice._id)}
+                        className="text-red-600 hover:text-red-800 text-xs"
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Add Weekly Practice Form */}
+        {showAddWeeklyPractice && (
+          <div className="mt-4 p-4 bg-gray-50 rounded-md">
+            <h4 className="text-sm font-medium text-gray-900 mb-3">Add New Weekly Practice:</h4>
+            <div className="space-y-3">
+              <input
+                type="text"
+                placeholder="Title"
+                value={newWeeklyPractice.title}
+                onChange={(e) => setNewWeeklyPractice({...newWeeklyPractice, title: e.target.value})}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              />
+              <textarea
+                placeholder="Content"
+                value={newWeeklyPractice.content}
+                onChange={(e) => setNewWeeklyPractice({...newWeeklyPractice, content: e.target.value})}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                rows={3}
+              />
+              <div className="grid grid-cols-3 gap-2">
+                <select
+                  value={newWeeklyPractice.sourceLanguage}
+                  onChange={(e) => setNewWeeklyPractice({...newWeeklyPractice, sourceLanguage: e.target.value})}
+                  className="px-3 py-2 border border-gray-300 rounded-md"
+                >
+                  <option value="English">English</option>
+                  <option value="Chinese">Chinese</option>
+                </select>
+                <select
+                  value={newWeeklyPractice.weekNumber}
+                  onChange={(e) => setNewWeeklyPractice({...newWeeklyPractice, weekNumber: parseInt(e.target.value)})}
+                  className="px-3 py-2 border border-gray-300 rounded-md"
+                >
+                  {[1, 2, 3, 4, 5, 6].map(week => (
+                    <option key={week} value={week}>Week {week}</option>
+                  ))}
+                </select>
+                <select
+                  value={newWeeklyPractice.difficulty}
+                  onChange={(e) => setNewWeeklyPractice({...newWeeklyPractice, difficulty: e.target.value})}
+                  className="px-3 py-2 border border-gray-300 rounded-md"
+                >
+                  <option value="beginner">Beginner</option>
+                  <option value="intermediate">Intermediate</option>
+                  <option value="advanced">Advanced</option>
+                </select>
+              </div>
+              <button
+                onClick={addWeeklyPractice}
+                className="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+              >
+                Add Weekly Practice
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Edit Weekly Practice Modal */}
+        {editingWeeklyPractice && (
+          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+            <div className="bg-white p-6 rounded-lg max-w-md w-full mx-4 max-h-96 overflow-y-auto">
+              <h3 className="text-lg font-medium text-gray-900 mb-4">Edit Weekly Practice</h3>
+              <div className="space-y-3">
+                <input
+                  type="text"
+                  placeholder="Title"
+                  value={editingWeeklyPractice.title}
+                  onChange={(e) => setEditingWeeklyPractice({...editingWeeklyPractice, title: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                />
+                <textarea
+                  placeholder="Content"
+                  value={editingWeeklyPractice.content}
+                  onChange={(e) => setEditingWeeklyPractice({...editingWeeklyPractice, content: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                  rows={3}
+                />
+                <div className="grid grid-cols-3 gap-2">
+                  <select
+                    value={editingWeeklyPractice.sourceLanguage}
+                    onChange={(e) => setEditingWeeklyPractice({...editingWeeklyPractice, sourceLanguage: e.target.value})}
+                    className="px-3 py-2 border border-gray-300 rounded-md"
+                  >
+                    <option value="English">English</option>
+                    <option value="Chinese">Chinese</option>
+                  </select>
+                  <select
+                    value={editingWeeklyPractice.weekNumber}
+                    onChange={(e) => setEditingWeeklyPractice({...editingWeeklyPractice, weekNumber: parseInt(e.target.value)})}
+                    className="px-3 py-2 border border-gray-300 rounded-md"
+                  >
+                    {[1, 2, 3, 4, 5, 6].map(week => (
+                      <option key={week} value={week}>Week {week}</option>
+                    ))}
+                  </select>
+                  <select
+                    value={editingWeeklyPractice.difficulty}
+                    onChange={(e) => setEditingWeeklyPractice({...editingWeeklyPractice, difficulty: e.target.value})}
+                    className="px-3 py-2 border border-gray-300 rounded-md"
+                  >
+                    <option value="beginner">Beginner</option>
+                    <option value="intermediate">Intermediate</option>
+                    <option value="advanced">Advanced</option>
+                  </select>
+                </div>
+                <div className="flex space-x-2">
+                  <button
+                    onClick={() => updateWeeklyPractice(editingWeeklyPractice._id, editingWeeklyPractice)}
+                    className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                  >
+                    Update
+                  </button>
+                  <button
+                    onClick={() => setEditingWeeklyPractice(null)}
+                    className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Quick Stats */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-lg font-medium text-gray-900 mb-4">Quick Stats</h2>
+        {statsLoading ? (
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+            {[1, 2, 3, 4].map((i) => (
+              <div key={i} className="bg-gray-50 p-4 rounded-lg animate-pulse">
+                <div className="flex items-center">
+                  <div className="h-6 w-6 bg-gray-300 rounded mr-2"></div>
+                  <div>
+                    <div className="h-4 bg-gray-300 rounded w-20 mb-2"></div>
+                    <div className="h-6 bg-gray-300 rounded w-8"></div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <div className="bg-purple-50 p-4 rounded-lg">
+              <div className="flex items-center">
+                <UserGroupIcon className="h-6 w-6 text-purple-600 mr-2" />
+                <div>
+                  <p className="text-sm text-purple-600">Total Users</p>
+                  <p className="text-2xl font-bold text-purple-900">{stats?.totalUsers || 0}</p>
+                </div>
+              </div>
+            </div>
+            <div className="bg-blue-50 p-4 rounded-lg">
+              <div className="flex items-center">
+                <AcademicCapIcon className="h-6 w-6 text-blue-600 mr-2" />
+                <div>
+                  <p className="text-sm text-blue-600">Practice Examples</p>
+                  <p className="text-2xl font-bold text-blue-900">{stats?.practiceExamples || 0}</p>
+                </div>
+              </div>
+            </div>
+            <div className="bg-green-50 p-4 rounded-lg">
+              <div className="flex items-center">
+                <DocumentTextIcon className="h-6 w-6 text-green-600 mr-2" />
+                <div>
+                  <p className="text-sm text-green-600">Submissions</p>
+                  <p className="text-2xl font-bold text-green-900">{stats?.totalSubmissions || 0}</p>
+                </div>
+              </div>
+            </div>
+            <div className="bg-orange-50 p-4 rounded-lg">
+              <div className="flex items-center">
+                <ShieldCheckIcon className="h-6 w-6 text-orange-600 mr-2" />
+                <div>
+                  <p className="text-sm text-orange-600">Active Sessions</p>
+                  <p className="text-2xl font-bold text-orange-900">{stats?.activeSessions || 0}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="mt-6">
+        <Link
+          to="/dashboard"
+          className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+        >
+          Back to Dashboard
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Manage; 

client/src/pages/Register.tsx

@@ -0,0 +1,238 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
+import { api } from '../services/api';
+
+const Register: React.FC = () => {
+  const [formData, setFormData] = useState({
+    username: '',
+    email: '',
+    password: '',
+    confirmPassword: '',
+    role: 'student',
+    nativeLanguage: '',
+    targetCultures: [] as string[]
+  });
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const navigate = useNavigate();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+    // Clear error when user starts typing
+    if (error) setError('');
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (formData.password !== formData.confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    if (formData.password.length < 6) {
+      setError('Password must be at least 6 characters long');
+      return;
+    }
+
+    setIsLoading(true);
+    setError('');
+
+    try {
+      const response = await api.post('/auth/register', {
+        username: formData.username,
+        email: formData.email,
+        password: formData.password,
+        role: formData.role,
+        nativeLanguage: formData.nativeLanguage,
+        targetCultures: formData.targetCultures
+      });
+
+      // Store token
+      localStorage.setItem('token', response.data.token);
+      
+      // Navigate to dashboard
+      navigate('/dashboard');
+    } catch (error: any) {
+      console.error('Registration error:', error);
+      if (error.response?.data?.error) {
+        setError(error.response.data.error);
+      } else {
+        setError('Registration failed. Please try again.');
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div>
+          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+            Create your account
+          </h2>
+          <p className="mt-2 text-center text-sm text-gray-600">
+            Or{' '}
+            <Link
+              to="/login"
+              className="font-medium text-indigo-600 hover:text-indigo-500"
+            >
+              sign in to your existing account
+            </Link>
+          </p>
+        </div>
+        
+        {error && (
+          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
+            {error}
+          </div>
+        )}
+
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="username" className="block text-sm font-medium text-gray-700">
+                Username
+              </label>
+              <input
+                id="username"
+                name="username"
+                type="text"
+                required
+                className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                placeholder="Enter your username"
+                value={formData.username}
+                onChange={handleChange}
+              />
+            </div>
+
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                Email address
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                placeholder="Enter your email"
+                value={formData.email}
+                onChange={handleChange}
+              />
+            </div>
+
+            <div>
+              <label htmlFor="role" className="block text-sm font-medium text-gray-700">
+                Role
+              </label>
+              <select
+                id="role"
+                name="role"
+                className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                value={formData.role}
+                onChange={handleChange}
+              >
+                <option value="student">Student</option>
+                <option value="instructor">Instructor</option>
+                <option value="admin">Admin</option>
+              </select>
+            </div>
+
+            <div>
+              <label htmlFor="nativeLanguage" className="block text-sm font-medium text-gray-700">
+                Native Language
+              </label>
+              <input
+                id="nativeLanguage"
+                name="nativeLanguage"
+                type="text"
+                className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                placeholder="e.g., English, Spanish, French"
+                value={formData.nativeLanguage}
+                onChange={handleChange}
+              />
+            </div>
+
+            <div className="relative">
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type={showPassword ? 'text' : 'password'}
+                autoComplete="new-password"
+                required
+                className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                placeholder="Enter your password"
+                value={formData.password}
+                onChange={handleChange}
+              />
+              <button
+                type="button"
+                className="absolute inset-y-0 right-0 pr-3 flex items-center top-6"
+                onClick={() => setShowPassword(!showPassword)}
+              >
+                {showPassword ? (
+                  <EyeSlashIcon className="h-5 w-5 text-gray-400" />
+                ) : (
+                  <EyeIcon className="h-5 w-5 text-gray-400" />
+                )}
+              </button>
+            </div>
+
+            <div className="relative">
+              <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700">
+                Confirm Password
+              </label>
+              <input
+                id="confirmPassword"
+                name="confirmPassword"
+                type={showConfirmPassword ? 'text' : 'password'}
+                autoComplete="new-password"
+                required
+                className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                placeholder="Confirm your password"
+                value={formData.confirmPassword}
+                onChange={handleChange}
+              />
+              <button
+                type="button"
+                className="absolute inset-y-0 right-0 pr-3 flex items-center top-6"
+                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+              >
+                {showConfirmPassword ? (
+                  <EyeSlashIcon className="h-5 w-5 text-gray-400" />
+                ) : (
+                  <EyeIcon className="h-5 w-5 text-gray-400" />
+                )}
+              </button>
+            </div>
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isLoading ? 'Creating account...' : 'Create account'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Register; 

client/src/pages/SearchTexts.tsx

@@ -0,0 +1,383 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  MagnifyingGlassIcon, 
+  GlobeAltIcon,
+  AcademicCapIcon,
+  FunnelIcon,
+  PencilIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+  ClockIcon
+} from '@heroicons/react/24/outline';
+import { api } from '../services/api';
+
+interface SearchFilters {
+  sourceLanguage: string;
+}
+
+interface UserSubmission {
+  _id: string;
+  transcreation: string;
+  explanation: string;
+  status: 'pending' | 'approved' | 'rejected' | 'submitted';
+  createdAt: string;
+  score?: number;
+  voteCounts?: {
+    1: number;
+    2: number;
+    3: number;
+  };
+}
+
+const SearchTexts: React.FC = () => {
+  const [filters, setFilters] = useState<SearchFilters>({
+    sourceLanguage: ''
+  });
+  const [isSearching, setIsSearching] = useState(false);
+  const [searchResults, setSearchResults] = useState<any[]>([]);
+  const [error, setError] = useState('');
+  const [translations, setTranslations] = useState<{[key: string]: string}>({});
+  const [userSubmissions, setUserSubmissions] = useState<{[key: string]: UserSubmission[]}>({});
+  const [loadingSubmissions, setLoadingSubmissions] = useState(false);
+
+  // Fetch user's submissions when examples are loaded
+  useEffect(() => {
+    if (searchResults.length > 0) {
+      fetchUserSubmissions();
+    }
+  }, [searchResults]);
+
+  const fetchUserSubmissions = async () => {
+    setLoadingSubmissions(true);
+    try {
+      const token = localStorage.getItem('token');
+      if (!token) return;
+
+      const response = await fetch('/api/submissions/my-submissions', {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        const submissionsByExample: {[key: string]: UserSubmission[]} = {};
+        
+        data.submissions.forEach((submission: UserSubmission & { sourceTextId: any }) => {
+          const exampleId = submission.sourceTextId?._id || submission.sourceTextId;
+          if (exampleId) {
+            if (!submissionsByExample[exampleId]) {
+              submissionsByExample[exampleId] = [];
+            }
+            submissionsByExample[exampleId].push(submission);
+          }
+        });
+        
+        setUserSubmissions(submissionsByExample);
+      }
+    } catch (error) {
+      console.error('Error fetching submissions:', error);
+    } finally {
+      setLoadingSubmissions(false);
+    }
+  };
+
+  const handleSearch = async () => {
+    setIsSearching(true);
+    setError('');
+    
+    try {
+      const response = await api.post('/search/auto-search', filters);
+      setSearchResults(response.data.results || []);
+    } catch (error: any) {
+      console.error('Search error:', error);
+      if (error.response?.data?.error) {
+        setError(error.response.data.error);
+      } else {
+        setError('Search failed. Please try again.');
+      }
+    } finally {
+      setIsSearching(false);
+    }
+  };
+
+  const handleFilterChange = (field: keyof SearchFilters, value: string) => {
+    setFilters(prev => ({
+      ...prev,
+      [field]: value
+    }));
+    // Clear error when user changes filters
+    if (error) setError('');
+  };
+
+  const handleTranslationChange = (id: string, value: string) => {
+    setTranslations(prev => ({
+      ...prev,
+      [id]: value
+    }));
+  };
+
+  const handleTranscreate = async (id: string) => {
+    const translation = translations[id];
+    if (!translation || !translation.trim()) {
+      alert('Please enter a translation before submitting.');
+      return;
+    }
+
+    try {
+      const token = localStorage.getItem('token');
+      if (!token) {
+        alert('Please log in to submit translations.');
+        return;
+      }
+
+      const result = searchResults.find(r => r.id === id);
+      if (!result) {
+        alert('Example not found.');
+        return;
+      }
+
+      // Submit translation to backend
+      const response = await fetch('/api/submissions', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          sourceTextId: id,
+          targetCulture: result.sourceCulture,
+          targetLanguage: result.sourceLanguage === 'English' ? 'Chinese' : 'English',
+          transcreation: translation.trim(),
+          explanation: 'Practice translation submission',
+          isAnonymous: true
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      
+      // Clear the translation input
+      setTranslations(prev => ({
+        ...prev,
+        [id]: ''
+      }));
+
+      // Refresh user's submissions to show the new one
+      await fetchUserSubmissions();
+
+      alert('Translation submitted successfully! It will be available for voting.');
+    } catch (error) {
+      console.error('Error submitting translation:', error);
+      alert('Failed to submit translation. Please try again.');
+    }
+  };
+
+  return (
+    <div className="px-4 sm:px-6 lg:px-8">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-gray-900">Practice</h1>
+        <p className="mt-2 text-gray-600">
+          In-class practice examples for puns and wordplay in English and Chinese
+        </p>
+      </div>
+
+      {/* Search Filters */}
+      <div className="bg-white rounded-lg shadow p-6 mb-8">
+        <div className="flex items-center mb-4">
+          <FunnelIcon className="h-5 w-5 text-indigo-400 mr-2" />
+          <h2 className="text-lg font-medium text-gray-900">Language Filter</h2>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="sourceLanguage" className="block text-sm font-medium text-gray-700 mb-2">
+              Language
+            </label>
+            <select
+              id="sourceLanguage"
+              value={filters.sourceLanguage}
+              onChange={(e) => handleFilterChange('sourceLanguage', e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+            >
+              <option value="">All Languages</option>
+              <option value="English">English</option>
+              <option value="Chinese">Chinese</option>
+            </select>
+          </div>
+        </div>
+
+        <div className="mt-6">
+          <button
+            onClick={handleSearch}
+            disabled={isSearching}
+            className="w-full md:w-auto bg-indigo-600 text-white px-6 py-2 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+          >
+            {isSearching ? (
+              <>
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                Loading...
+              </>
+            ) : (
+              <>
+                <MagnifyingGlassIcon className="h-4 w-4 mr-2" />
+                Show Examples
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Error Message */}
+      {error && (
+        <div className="bg-red-50 border border-red-200 rounded-md p-4 mb-6">
+          <div className="flex">
+            <div className="flex-shrink-0">
+              <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+              </svg>
+            </div>
+            <div className="ml-3">
+              <h3 className="text-sm font-medium text-red-800">Search Error</h3>
+              <div className="mt-2 text-sm text-red-700">{error}</div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Search Results */}
+      {searchResults.length > 0 && (
+        <div className="bg-white rounded-lg shadow">
+          <div className="px-6 py-4 border-b border-gray-200">
+            <div className="flex items-center justify-between">
+              <h3 className="text-lg font-medium text-gray-900">
+                Practice Examples ({searchResults.length})
+              </h3>
+            </div>
+          </div>
+          
+          <div className="divide-y divide-gray-200">
+            {searchResults.map((result) => (
+              <div key={result.id} className="p-6">
+                <div className="flex-1">
+                  <div className="text-gray-700 mb-4 whitespace-pre-wrap text-lg leading-relaxed">
+                    {result.content}
+                  </div>
+                  
+                  {/* Translation Input - Only show if user hasn't submitted yet */}
+                  {loadingSubmissions ? (
+                    <div className="mb-4 p-4 bg-gray-50 rounded-md">
+                      <div className="flex items-center">
+                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-indigo-600 mr-2"></div>
+                        <span className="text-sm text-gray-600">Loading your submissions...</span>
+                      </div>
+                    </div>
+                  ) : (!userSubmissions[result.id] || userSubmissions[result.id].length === 0) ? (
+                    <div className="mb-4">
+                      <label htmlFor={`translation-${result.id}`} className="block text-sm font-medium text-gray-700 mb-2">
+                        Your Translation:
+                      </label>
+                      <textarea
+                        id={`translation-${result.id}`}
+                        value={translations[result.id] || ''}
+                        onChange={(e) => handleTranslationChange(result.id, e.target.value)}
+                        placeholder="Enter your translation here..."
+                        className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                        rows={3}
+                      />
+                    </div>
+                  ) : (
+                    <div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-md">
+                      <div className="flex items-center">
+                        <CheckCircleIcon className="h-5 w-5 text-green-500 mr-2" />
+                        <span className="text-sm font-medium text-green-800">Translation Submitted</span>
+                      </div>
+                      <p className="text-sm text-green-600 mt-1">
+                        You have already submitted a translation for this example.
+                      </p>
+                    </div>
+                  )}
+
+                  {/* Transcreate Button - Only show if user hasn't submitted yet */}
+                  {!loadingSubmissions && (!userSubmissions[result.id] || userSubmissions[result.id].length === 0) && (
+                    <button
+                      onClick={() => handleTranscreate(result.id)}
+                      className="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 flex items-center"
+                    >
+                      <PencilIcon className="h-4 w-4 mr-2" />
+                      Transcreate It
+                    </button>
+                  )}
+
+                  {/* User's Previous Translations */}
+                  {!loadingSubmissions && userSubmissions[result.id] && userSubmissions[result.id].length > 0 && (
+                    <div className="mt-6 border-t border-gray-200 pt-4">
+                      <h4 className="text-sm font-medium text-gray-900 mb-3">Your Translation:</h4>
+                      <div className="space-y-3">
+                        {userSubmissions[result.id].map((submission) => (
+                          <div key={submission._id} className="bg-indigo-50 rounded-lg p-4 border border-indigo-200">
+                            <div className="flex items-start justify-between">
+                              <div className="flex-1">
+                                <p className="text-gray-900 mb-2 font-medium">{submission.transcreation}</p>
+                                <div className="flex items-center space-x-4 text-sm text-gray-500">
+                                  <span className="flex items-center">
+                                    {submission.status === 'approved' && (
+                                      <CheckCircleIcon className="h-4 w-4 text-green-500 mr-1" />
+                                    )}
+                                    {submission.status === 'rejected' && (
+                                      <XCircleIcon className="h-4 w-4 text-red-500 mr-1" />
+                                    )}
+                                    {submission.status === 'pending' && (
+                                      <ClockIcon className="h-4 w-4 text-yellow-500 mr-1" />
+                                    )}
+                                    {submission.status === 'submitted' && (
+                                      <ClockIcon className="h-4 w-4 text-blue-500 mr-1" />
+                                    )}
+                                    {submission.status.charAt(0).toUpperCase() + submission.status.slice(1)}
+                                  </span>
+
+                                  {submission.voteCounts && (
+                                    <span className="bg-gray-100 text-gray-800 px-2 py-1 rounded text-xs font-medium">
+                                      Votes: {submission.voteCounts[1] || 0} 1st, {submission.voteCounts[2] || 0} 2nd, {submission.voteCounts[3] || 0} 3rd
+                                    </span>
+                                  )}
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* No Results */}
+      {searchResults.length === 0 && !isSearching && !error && (
+        <div className="bg-white rounded-lg shadow p-8 text-center">
+          <AcademicCapIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+          <h3 className="text-lg font-medium text-gray-900 mb-2">No examples found</h3>
+          <p className="text-gray-600 mb-4">
+            Try adjusting your language filter or click "Show Examples" to see all available practice examples.
+          </p>
+          <button
+            onClick={handleSearch}
+            className="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+          >
+            Show All Examples
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SearchTexts; 

client/src/pages/Submissions.tsx

@@ -0,0 +1,302 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { ClockIcon, CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/outline';
+
+interface Submission {
+  _id: string;
+  sourceTextId: {
+    _id: string;
+    content: string;
+    sourceLanguage: string;
+    sourceCulture: string;
+  } | null;
+  transcreation: string;
+  explanation: string;
+  culturalAdaptations: string[];
+  status: 'pending' | 'approved' | 'rejected' | 'submitted';
+  createdAt: string;
+  score?: number;
+  voteCounts?: {
+    1: number;
+    2: number;
+    3: number;
+  };
+}
+
+const Submissions: React.FC = () => {
+  const { id } = useParams();
+  const [submissions, setSubmissions] = useState<Submission[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedSubmission, setSelectedSubmission] = useState<Submission | null>(null);
+
+  useEffect(() => {
+    fetchSubmissions();
+  }, []);
+
+  const fetchSubmissions = async () => {
+    try {
+      setLoading(true);
+      const token = localStorage.getItem('token');
+      
+      if (!token) {
+        setError('Authentication required');
+        return;
+      }
+
+      const response = await fetch('/api/submissions/my-submissions', {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch submissions');
+      }
+
+      const data = await response.json();
+      setSubmissions(data.submissions || []);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch submissions');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'approved':
+        return <CheckCircleIcon className="h-5 w-5 text-green-500" />;
+      case 'rejected':
+        return <XCircleIcon className="h-5 w-5 text-red-500" />;
+      default:
+        return <ClockIcon className="h-5 w-5 text-yellow-500" />;
+    }
+  };
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case 'approved':
+        return 'Approved';
+      case 'rejected':
+        return 'Rejected';
+      default:
+        return 'Pending';
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  if (id && selectedSubmission) {
+    return (
+      <div className="px-4 sm:px-6 lg:px-8">
+        <div className="mb-8">
+          <h1 className="text-2xl font-bold text-gray-900">Submission Details</h1>
+          <p className="mt-2 text-gray-600">View detailed submission information</p>
+        </div>
+        
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="mb-6">
+            <h2 className="text-lg font-medium text-gray-900 mb-4">Original Text</h2>
+            <div className="bg-gray-50 p-4 rounded-md">
+              <p className="text-gray-900">{selectedSubmission.sourceTextId?.content || 'Original text not available'}</p>
+              <div className="mt-2 text-sm text-gray-500">
+                {selectedSubmission.sourceTextId ? `${selectedSubmission.sourceTextId.sourceLanguage} • ${selectedSubmission.sourceTextId.sourceCulture}` : 'Language/Culture not available'}
+              </div>
+            </div>
+          </div>
+
+          <div className="mb-6">
+            <h2 className="text-lg font-medium text-gray-900 mb-4">Your Translation</h2>
+            <div className="bg-blue-50 p-4 rounded-md">
+              <p className="text-gray-900">{selectedSubmission.transcreation}</p>
+            </div>
+          </div>
+
+          <div className="mb-6">
+            <h2 className="text-lg font-medium text-gray-900 mb-4">Explanation</h2>
+            <div className="bg-gray-50 p-4 rounded-md">
+              <p className="text-gray-900">{selectedSubmission.explanation}</p>
+            </div>
+          </div>
+
+          {selectedSubmission.culturalAdaptations.length > 0 && (
+            <div className="mb-6">
+              <h2 className="text-lg font-medium text-gray-900 mb-4">Cultural Adaptations</h2>
+              <div className="bg-gray-50 p-4 rounded-md">
+                <ul className="list-disc list-inside space-y-1">
+                  {selectedSubmission.culturalAdaptations.map((adaptation, index) => (
+                    <li key={index} className="text-gray-900">{adaptation}</li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          )}
+
+          {selectedSubmission.voteCounts && (
+            <div className="mb-6">
+              <h2 className="text-lg font-medium text-gray-900 mb-4">Voting Results</h2>
+              <div className="bg-gray-50 p-4 rounded-md">
+                <div className="flex items-center space-x-4">
+                  {selectedSubmission.voteCounts && (
+                    <div className="flex space-x-4">
+                      <div>
+                        <span className="text-sm text-gray-500">1st place:</span>
+                        <span className="ml-1 font-medium">{selectedSubmission.voteCounts[1]}</span>
+                      </div>
+                      <div>
+                        <span className="text-sm text-gray-500">2nd place:</span>
+                        <span className="ml-1 font-medium">{selectedSubmission.voteCounts[2]}</span>
+                      </div>
+                      <div>
+                        <span className="text-sm text-gray-500">3rd place:</span>
+                        <span className="ml-1 font-medium">{selectedSubmission.voteCounts[3]}</span>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+
+          <div className="flex space-x-3">
+            <button
+              onClick={() => setSelectedSubmission(null)}
+              className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+            >
+              Back to Submissions
+            </button>
+            <Link
+              to="/dashboard"
+              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+            >
+              Back to Home
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="px-4 sm:px-6 lg:px-8">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-gray-900">Submissions</h1>
+        <p className="mt-2 text-gray-600">View and manage your transcreations</p>
+      </div>
+      
+      {loading ? (
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="flex items-center justify-center py-8">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+            <span className="ml-3 text-gray-600">Loading submissions...</span>
+          </div>
+        </div>
+      ) : error ? (
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="text-center py-8">
+            <p className="text-red-600 mb-4">{error}</p>
+            <button
+              onClick={fetchSubmissions}
+              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+            >
+              Try Again
+            </button>
+          </div>
+        </div>
+      ) : submissions.length === 0 ? (
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="text-center py-8">
+            <p className="text-gray-600 mb-4">You haven't made any submissions yet.</p>
+            <Link
+              to="/practice"
+              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+            >
+              Start Practicing
+            </Link>
+          </div>
+        </div>
+      ) : (
+        <div className="bg-white rounded-lg shadow">
+          <div className="px-6 py-4 border-b border-gray-200">
+            <h2 className="text-lg font-medium text-gray-900">All Submissions ({submissions.length})</h2>
+          </div>
+          <div className="divide-y divide-gray-200">
+            {submissions.map((submission) => (
+              <div key={submission._id} className="px-6 py-4 hover:bg-gray-50">
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <div className="flex items-center space-x-3 mb-2">
+                      {getStatusIcon(submission.status)}
+                      <span className={`text-sm font-medium ${
+                        submission.status === 'approved' ? 'text-green-600' :
+                        submission.status === 'rejected' ? 'text-red-600' : 'text-yellow-600'
+                      }`}>
+                        {getStatusText(submission.status)}
+                      </span>
+                      <span className="text-sm text-gray-500">
+                        {formatDate(submission.createdAt)}
+                      </span>
+                    </div>
+                    
+                    <div className="mb-3">
+                      <h3 className="text-sm font-medium text-gray-900 mb-1">Original Text:</h3>
+                      <p className="text-sm text-gray-600 line-clamp-2">
+                        {submission.sourceTextId?.content || 'Original text not available'}
+                      </p>
+                    </div>
+                    
+                    <div className="mb-3">
+                      <h3 className="text-sm font-medium text-gray-900 mb-1">Your Translation:</h3>
+                      <p className="text-sm text-gray-600 line-clamp-2">
+                        {submission.transcreation}
+                      </p>
+                    </div>
+
+                    {submission.voteCounts && (
+                      <div className="flex items-center space-x-4 text-sm">
+                            <span className="text-gray-500">Votes:</span>
+                            <span className="font-medium">
+                              {submission.voteCounts[1]}st, {submission.voteCounts[2]}nd, {submission.voteCounts[3]}rd
+                            </span>
+                      </div>
+                    )}
+                  </div>
+                  
+                  <div className="ml-4 flex-shrink-0">
+                    <button
+                      onClick={() => setSelectedSubmission(submission)}
+                      className="text-blue-600 hover:text-blue-800 text-sm font-medium"
+                    >
+                      View Details
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      
+      <div className="mt-6">
+        <Link
+          to="/dashboard"
+          className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+        >
+          Back to Home
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Submissions; 

client/src/pages/TextDetail.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useParams, Link } from 'react-router-dom';
+
+const TextDetail: React.FC = () => {
+  const { id } = useParams();
+
+  return (
+    <div className="px-4 sm:px-6 lg:px-8">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-gray-900">Text Details</h1>
+        <p className="mt-2 text-gray-600">View and analyze culturally rich text</p>
+      </div>
+      
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-lg font-medium text-gray-900 mb-4">Text ID: {id}</h2>
+        <p className="text-gray-600 mb-4">
+          This page will show detailed information about the selected text, including cultural elements, 
+          context, and professional reference examples.
+        </p>
+        
+        <div className="flex space-x-3">
+          <Link
+            to={`/text/${id}/submit`}
+            className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+          >
+            Create Transcreation
+          </Link>
+          <Link
+            to="/search"
+            className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+          >
+            Back to Search
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TextDetail; 

client/src/pages/TutorialTasks.tsx

@@ -0,0 +1,1115 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api } from '../services/api';
+import { 
+  AcademicCapIcon, 
+  DocumentTextIcon, 
+  CheckCircleIcon,
+  ClockIcon,
+  ArrowRightIcon,
+  PencilIcon,
+  XMarkIcon,
+  CheckIcon,
+  PlusIcon,
+  TrashIcon
+} from '@heroicons/react/24/outline';
+
+interface TutorialTask {
+  _id: string;
+  content: string;
+  weekNumber: number;
+  translationBrief?: string;
+  imageUrl?: string;
+  imageAlt?: string;
+}
+
+interface TutorialWeek {
+  weekNumber: number;
+  translationBrief?: string;
+  tasks: TutorialTask[];
+}
+
+interface UserSubmission {
+  _id: string;
+  transcreation: string;
+  status: string;
+  score: number;
+  groupNumber?: number;
+  isOwner?: boolean;
+  userId?: {
+    _id: string;
+    username: string;
+  };
+  voteCounts: {
+    '1': number;
+    '2': number;
+    '3': number;
+  };
+}
+
+const TutorialTasks: React.FC = () => {
+  const [selectedWeek, setSelectedWeek] = useState<number>(1);
+  const [tutorialTasks, setTutorialTasks] = useState<TutorialTask[]>([]);
+  const [tutorialWeek, setTutorialWeek] = useState<TutorialWeek | null>(null);
+  const [userSubmissions, setUserSubmissions] = useState<{[key: string]: UserSubmission[]}>({});
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState<{[key: string]: boolean}>({});
+  const [translationText, setTranslationText] = useState<{[key: string]: string}>({});
+  const [selectedGroups, setSelectedGroups] = useState<{[key: string]: number}>({});
+  const [expandedSections, setExpandedSections] = useState<{[key: string]: boolean}>({});
+
+  const [editingTask, setEditingTask] = useState<string | null>(null);
+  const [editingBrief, setEditingBrief] = useState<{[key: number]: boolean}>({});
+  const [addingTask, setAddingTask] = useState<boolean>(false);
+  const [editForm, setEditForm] = useState<{
+    content: string;
+    translationBrief: string;
+    imageUrl: string;
+    imageAlt: string;
+  }>({
+    content: '',
+    translationBrief: '',
+    imageUrl: '',
+    imageAlt: ''
+  });
+  const [saving, setSaving] = useState(false);
+  const navigate = useNavigate();
+
+  const weeks = [1, 2, 3, 4, 5, 6];
+
+  const toggleExpanded = (taskId: string) => {
+    setExpandedSections(prev => ({
+      ...prev,
+      [taskId]: !prev[taskId]
+    }));
+  };
+
+  const fetchUserSubmissions = useCallback(async (tasks: TutorialTask[]) => {
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch('/api/submissions/my-submissions', {
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        
+        const groupedSubmissions: {[key: string]: UserSubmission[]} = {};
+        
+        // Initialize all tasks with empty arrays
+        tasks.forEach(task => {
+          groupedSubmissions[task._id] = [];
+        });
+        
+        // Then populate with actual submissions
+        tasks.forEach(task => {
+          const taskSubmissions = data.submissions.filter((sub: any) => 
+            sub.sourceTextId && sub.sourceTextId._id === task._id
+          );
+          if (taskSubmissions.length > 0) {
+            groupedSubmissions[task._id] = taskSubmissions;
+          }
+        });
+                  
+        setUserSubmissions(groupedSubmissions);
+      }
+    } catch (error) {
+      console.error('Error fetching user submissions:', error);
+    }
+  }, []);
+
+  const fetchTutorialTasks = useCallback(async () => {
+    try {
+      setLoading(true);
+      const token = localStorage.getItem('token');
+      const response = await fetch(`/api/search/tutorial-tasks/${selectedWeek}`, {
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+
+      if (response.ok) {
+        const tasks = await response.json();
+        setTutorialTasks(tasks);
+        
+        // Organize tasks into week structure
+        if (tasks.length > 0) {
+          const translationBrief = tasks[0].translationBrief;
+          const tutorialWeekData: TutorialWeek = {
+            weekNumber: selectedWeek,
+            translationBrief: translationBrief,
+            tasks: tasks
+          };
+          setTutorialWeek(tutorialWeekData);
+        } else {
+          setTutorialWeek(null);
+        }
+        
+        await fetchUserSubmissions(tasks);
+      } else {
+        console.error('Failed to fetch tutorial tasks');
+      }
+    } catch (error) {
+      console.error('Error fetching tutorial tasks:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [selectedWeek, fetchUserSubmissions]);
+
+  useEffect(() => {
+    const user = localStorage.getItem('user');
+    if (!user) {
+      navigate('/login');
+      return;
+    }
+    fetchTutorialTasks();
+  }, [fetchTutorialTasks, navigate]);
+
+  // Refresh submissions when user changes (after login/logout)
+  useEffect(() => {
+    const user = localStorage.getItem('user');
+    if (user && tutorialTasks.length > 0) {
+      fetchUserSubmissions(tutorialTasks);
+    }
+  }, [tutorialTasks, fetchUserSubmissions]);
+
+  const handleSubmitTranslation = async (taskId: string) => {
+    if (!translationText[taskId]?.trim()) {
+      alert('Please provide a translation');
+      return;
+    }
+
+    if (!selectedGroups[taskId]) {
+      alert('Please select a group');
+      return;
+    }
+
+    try {
+      setSubmitting({ ...submitting, [taskId]: true });
+      const token = localStorage.getItem('token');
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      const response = await fetch('/api/submissions', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          sourceTextId: taskId,
+          transcreation: translationText[taskId],
+          groupNumber: selectedGroups[taskId],
+          culturalAdaptations: [],
+          username: user.name || 'Unknown'
+        })
+      });
+
+      if (response.ok) {
+        const result = await response.json();
+        console.log('Submission created successfully:', result);
+   
+        setTranslationText({ ...translationText, [taskId]: '' });
+        setSelectedGroups({ ...selectedGroups, [taskId]: 0 });
+        await fetchUserSubmissions(tutorialTasks);
+      } else {
+        const error = await response.json();
+        console.error('Failed to submit translation:', error);
+
+      }
+    } catch (error) {
+      console.error('Error submitting translation:', error);
+      
+    } finally {
+      setSubmitting({ ...submitting, [taskId]: false });
+    }
+  };
+
+  const [editingSubmission, setEditingSubmission] = useState<{id: string, text: string} | null>(null);
+  const [editSubmissionText, setEditSubmissionText] = useState('');
+
+  const handleEditSubmission = async (submissionId: string, currentText: string) => {
+    setEditingSubmission({ id: submissionId, text: currentText });
+    setEditSubmissionText(currentText);
+  };
+
+  const saveEditedSubmission = async () => {
+    if (!editingSubmission || !editSubmissionText.trim()) return;
+
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch(`/api/submissions/${editingSubmission.id}`, {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          transcreation: editSubmissionText
+        })
+      });
+
+      if (response.ok) {
+  
+        setEditingSubmission(null);
+        setEditSubmissionText('');
+        await fetchUserSubmissions(tutorialTasks);
+      } else {
+        const error = await response.json();
+
+      }
+    } catch (error) {
+      console.error('Error updating translation:', error);
+
+    }
+  };
+
+  const cancelEditSubmission = () => {
+    setEditingSubmission(null);
+    setEditSubmissionText('');
+  };
+
+  const handleDeleteSubmission = async (submissionId: string) => {
+
+
+    try {
+      const response = await api.delete(`/submissions/${submissionId}`);
+
+      if (response.status === 200) {
+  
+        await fetchUserSubmissions(tutorialTasks);
+      } else {
+
+      }
+    } catch (error) {
+      console.error('Error deleting submission:', error);
+
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'approved':
+        return <CheckCircleIcon className="h-5 w-5 text-green-500" />;
+      case 'pending':
+        return <ClockIcon className="h-5 w-5 text-yellow-500" />;
+      default:
+        return <ClockIcon className="h-5 w-5 text-gray-500" />;
+    }
+  };
+
+  const startEditing = (task: TutorialTask) => {
+    setEditingTask(task._id);
+    setEditForm({
+      content: task.content,
+      translationBrief: task.translationBrief || '',
+      imageUrl: task.imageUrl || '',
+      imageAlt: task.imageAlt || ''
+    });
+  };
+
+  const startEditingBrief = () => {
+    setEditingBrief(prev => ({ ...prev, [selectedWeek]: true }));
+    setEditForm({
+      content: '',
+      translationBrief: tutorialWeek?.translationBrief || '',
+      imageUrl: '',
+      imageAlt: ''
+    });
+  };
+
+  const startAddingBrief = () => {
+    setEditingBrief(prev => ({ ...prev, [selectedWeek]: true }));
+    setEditForm({
+      content: '',
+      translationBrief: '',
+      imageUrl: '',
+      imageAlt: ''
+    });
+  };
+
+  const removeBrief = async () => {
+
+    
+    try {
+      setSaving(true);
+      const token = localStorage.getItem('token');
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      
+      // Check if user is admin
+      if (user.role !== 'admin') {
+  
+        return;
+      }
+
+      const response = await fetch(`/api/auth/admin/tutorial-brief/${selectedWeek}`, {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+          'user-role': user.role
+        },
+        body: JSON.stringify({
+          translationBrief: '',
+          weekNumber: selectedWeek
+        })
+      });
+
+      if (response.ok) {
+        await fetchTutorialTasks();
+
+      } else {
+        const error = await response.json();
+        
+      }
+    } catch (error) {
+      console.error('Failed to remove translation brief:', error);
+      
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const cancelEditing = () => {
+    setEditingTask(null);
+    setEditingBrief(prev => ({ ...prev, [selectedWeek]: false }));
+    setEditForm({
+      content: '',
+      translationBrief: '',
+      imageUrl: '',
+      imageAlt: ''
+    });
+  };
+
+  const saveTask = async () => {
+    if (!editingTask) return;
+    
+    try {
+      setSaving(true);
+      const token = localStorage.getItem('token');
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      
+      // Check if user is admin
+      if (user.role !== 'admin') {
+
+        return;
+      }
+
+      const response = await fetch(`/api/auth/admin/tutorial-tasks/${editingTask}`, {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+          'user-role': user.role
+        },
+        body: JSON.stringify({
+          ...editForm,
+          weekNumber: selectedWeek
+        })
+      });
+
+      if (response.ok) {
+        await fetchTutorialTasks();
+        setEditingTask(null);
+
+      } else {
+        const error = await response.json();
+        
+      }
+    } catch (error) {
+      console.error('Failed to update tutorial task:', error);
+      
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const saveBrief = async () => {
+    try {
+      setSaving(true);
+      const token = localStorage.getItem('token');
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      
+      // Check if user is admin
+      if (user.role !== 'admin') {
+
+        return;
+      }
+
+      const response = await fetch(`/api/auth/admin/tutorial-brief/${selectedWeek}`, {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+          'user-role': user.role
+        },
+        body: JSON.stringify({
+          translationBrief: editForm.translationBrief,
+          weekNumber: selectedWeek
+        })
+      });
+
+      if (response.ok) {
+        await fetchTutorialTasks();
+        setEditingBrief(prev => ({ ...prev, [selectedWeek]: false }));
+
+      } else {
+        const error = await response.json();
+        
+      }
+    } catch (error) {
+      console.error('Failed to update translation brief:', error);
+      
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const startAddingTask = () => {
+    setAddingTask(true);
+    setEditForm({
+      content: '',
+      translationBrief: '',
+      imageUrl: '',
+      imageAlt: ''
+    });
+  };
+
+  const cancelAddingTask = () => {
+    setAddingTask(false);
+    setEditForm({
+      content: '',
+      translationBrief: '',
+      imageUrl: '',
+      imageAlt: ''
+    });
+  };
+
+  const saveNewTask = async () => {
+    try {
+      setSaving(true);
+      const token = localStorage.getItem('token');
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      
+      // Check if user is admin
+      if (user.role !== 'admin') {
+
+        return;
+      }
+
+      if (!editForm.content.trim()) {
+
+        return;
+      }
+
+      const response = await fetch('/api/auth/admin/tutorial-tasks', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+          'user-role': user.role
+        },
+        body: JSON.stringify({
+          title: `Week ${selectedWeek} Tutorial Task`,
+          content: editForm.content,
+          sourceLanguage: 'English',
+          weekNumber: selectedWeek,
+          category: 'tutorial'
+        })
+      });
+
+      if (response.ok) {
+        await fetchTutorialTasks();
+        setAddingTask(false);
+
+      } else {
+        const error = await response.json();
+        
+      }
+    } catch (error) {
+      console.error('Failed to add tutorial task:', error);
+      
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const deleteTask = async (taskId: string) => {
+
+    
+    try {
+      const token = localStorage.getItem('token');
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      
+      // Check if user is admin
+      if (user.role !== 'admin') {
+
+        return;
+      }
+
+      const response = await fetch(`/api/auth/admin/tutorial-tasks/${taskId}`, {
+        method: 'DELETE',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'user-role': user.role
+        }
+      });
+
+      if (response.ok) {
+        await fetchTutorialTasks();
+
+      } else {
+        const error = await response.json();
+        
+      }
+    } catch (error) {
+      console.error('Failed to delete tutorial task:', error);
+      
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 py-8">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
+            <p className="mt-4 text-gray-600">Loading tutorial tasks...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-center mb-4">
+            <AcademicCapIcon className="h-8 w-8 text-indigo-900 mr-3" />
+            <h1 className="text-3xl font-bold text-gray-900">Tutorial Tasks</h1>
+          </div>
+          <p className="text-gray-600">
+            Complete weekly tutorial tasks with your group to practice collaborative translation skills.
+          </p>
+        </div>
+
+        {/* Week Selector */}
+        <div className="mb-6">
+          <div className="flex space-x-2 overflow-x-auto pb-2">
+            {weeks.map((week) => (
+              <button
+                key={week}
+                onClick={() => setSelectedWeek(week)}
+                className={`px-4 py-2 rounded-lg font-medium whitespace-nowrap ${
+                  selectedWeek === week
+                    ? 'bg-indigo-600 text-white'
+                    : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-300'
+                }`}
+              >
+                Week {week}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Translation Brief - Shown once at the top */}
+        {tutorialWeek && tutorialWeek.translationBrief ? (
+          <div className="bg-white rounded-lg p-6 mb-8 border border-gray-200 shadow-sm">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center space-x-3">
+                <div className="bg-indigo-600 rounded-lg p-2">
+                  <DocumentTextIcon className="h-5 w-5 text-white" />
+                </div>
+                <h3 className="text-indigo-900 font-semibold text-xl">Translation Brief</h3>
+              </div>
+              {JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
+                <div className="flex items-center space-x-2">
+                  {editingBrief[selectedWeek] ? (
+                    <>
+                      <button
+                        onClick={saveBrief}
+                        disabled={saving}
+                        className="bg-indigo-500 hover:bg-indigo-600 text-white px-3 py-1 rounded-md transition-colors duration-200 text-sm"
+                      >
+                        {saving ? (
+                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                        ) : (
+                          <CheckIcon className="h-4 w-4" />
+                        )}
+                      </button>
+                      <button
+                        onClick={cancelEditing}
+                        className="bg-gray-500 hover:bg-gray-600 text-white px-3 py-1 rounded-md transition-colors duration-200 text-sm"
+                      >
+                        <XMarkIcon className="h-4 w-4" />
+                      </button>
+                    </>
+                  ) : (
+                    <>
+                      <button
+                        onClick={startEditingBrief}
+                        className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-md transition-colors duration-200 text-sm"
+                      >
+                        <PencilIcon className="h-4 w-4" />
+                      </button>
+                      <button
+                        onClick={() => removeBrief()}
+                        className="bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1 rounded-md transition-colors duration-200 text-sm"
+                      >
+                        <TrashIcon className="h-4 w-4" />
+                      </button>
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+            {editingBrief[selectedWeek] ? (
+              <textarea
+                value={editForm.translationBrief}
+                onChange={(e) => setEditForm({ ...editForm, translationBrief: e.target.value })}
+                className="w-full p-4 border border-gray-300 rounded-lg text-gray-900 leading-relaxed text-base bg-white focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                rows={6}
+                placeholder="Enter translation brief..."
+              />
+            ) : (
+                                    <p className="text-gray-900 leading-relaxed text-lg font-smiley">{tutorialWeek.translationBrief}</p>
+            )}
+            <div className="mt-4 p-3 bg-indigo-50 rounded-lg">
+              <p className="text-indigo-900 text-sm">
+                <strong>Note:</strong> Tutorial tasks are completed as group submissions. Each group should collaborate to create a single translation per task.
+              </p>
+            </div>
+          </div>
+        ) : (
+          // Show add brief button when no brief exists
+          JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
+            <div className="bg-white rounded-lg p-6 mb-8 border border-gray-200 border-dashed shadow-sm">
+              <div className="flex items-center justify-between mb-4">
+                              <div className="flex items-center space-x-3">
+                <div className="bg-indigo-100 rounded-lg p-2">
+                  <DocumentTextIcon className="h-5 w-5 text-indigo-900" />
+                </div>
+                <h3 className="text-indigo-900 font-semibold text-xl">Translation Brief</h3>
+              </div>
+                <button
+                  onClick={startAddingBrief}
+                  className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium flex items-center space-x-2 shadow-sm"
+                >
+                  <PlusIcon className="h-5 w-5" />
+                  <span className="font-medium">Add Brief</span>
+                </button>
+              </div>
+              {editingBrief[selectedWeek] && (
+                <div className="space-y-4">
+                  <textarea
+                    value={editForm.translationBrief}
+                    onChange={(e) => setEditForm({ ...editForm, translationBrief: e.target.value })}
+                    className="w-full p-4 border border-gray-300 rounded-lg text-gray-900 leading-relaxed text-base bg-white focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                    rows={6}
+                    placeholder="Enter translation brief..."
+                  />
+                  <div className="flex justify-end space-x-2">
+                    <button
+                      onClick={saveBrief}
+                      disabled={saving}
+                      className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium flex items-center space-x-2 shadow-sm"
+                    >
+                      {saving ? (
+                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                      ) : (
+                        <>
+                          <CheckIcon className="h-5 w-5" />
+                          <span className="font-medium">Save Brief</span>
+                        </>
+                      )}
+                    </button>
+                    <button
+                      onClick={cancelEditing}
+                      className="bg-gray-500 hover:bg-gray-600 text-white px-6 py-3 rounded-lg font-medium flex items-center space-x-2 shadow-sm"
+                    >
+                      <XMarkIcon className="h-5 w-5" />
+                      <span className="font-medium">Cancel</span>
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          )
+        )}
+
+        {/* Tutorial Tasks */}
+        <div className="space-y-6">
+          {/* Add New Tutorial Task Section */}
+          {JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
+            <div className="mb-8">
+              {addingTask ? (
+                <div className="bg-white rounded-lg p-6 border border-gray-200 shadow-sm">
+                  <div className="flex items-center space-x-3 mb-4">
+                    <div className="bg-gray-100 rounded-lg p-2">
+                      <PlusIcon className="h-4 w-4 text-gray-600" />
+                    </div>
+                    <h4 className="text-gray-900 font-semibold text-lg">New Tutorial Task</h4>
+                  </div>
+                  <div className="space-y-4">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Task Content *
+                      </label>
+                      <textarea
+                        value={editForm.content}
+                        onChange={(e) => setEditForm({ ...editForm, content: e.target.value })}
+                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"
+                        rows={4}
+                        placeholder="Enter tutorial task content..."
+                      />
+                    </div>
+                  </div>
+                  <div className="flex justify-end space-x-2 mt-4">
+                    <button
+                      onClick={saveTask}
+                      disabled={saving}
+                      className="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center space-x-2 text-sm"
+                    >
+                      {saving ? (
+                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                      ) : (
+                        <>
+                          <CheckIcon className="h-4 w-4" />
+                          <span>Save Task</span>
+                        </>
+                      )}
+                    </button>
+                    <button
+                      onClick={cancelAddingTask}
+                      className="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center space-x-2 text-sm"
+                    >
+                      <XMarkIcon className="h-4 w-4" />
+                      <span>Cancel</span>
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <div className="bg-white rounded-lg p-6 border border-gray-200 border-dashed shadow-sm">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-3">
+                      <div className="bg-gray-100 rounded-lg p-2">
+                        <PlusIcon className="h-5 w-5 text-gray-600" />
+                      </div>
+                      <div>
+                        <h3 className="text-lg font-semibold text-indigo-900">Add New Tutorial Task</h3>
+                        <p className="text-gray-600 text-sm">Create a new tutorial task for Week {selectedWeek}</p>
+                      </div>
+                    </div>
+                    <button
+                      onClick={startAddingTask}
+                      className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium flex items-center space-x-2 shadow-sm"
+                    >
+                      <PlusIcon className="h-5 w-5" />
+                      <span className="font-medium">Add Task</span>
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {tutorialTasks.length === 0 && !addingTask ? (
+            <div className="text-center py-12">
+              <DocumentTextIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+              <h3 className="text-lg font-medium text-gray-900 mb-2">
+                No tutorial tasks available
+              </h3>
+              <p className="text-gray-600">
+                Tutorial tasks for Week {selectedWeek} haven't been set up yet.
+              </p>
+            </div>
+          ) : (
+            tutorialTasks.map((task) => (
+              <div key={task._id} className="bg-white rounded-xl shadow-lg border border-gray-100 p-8 hover:shadow-xl transition-shadow duration-300">
+                <div className="mb-6">
+                  <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center space-x-3">
+                      <div className="bg-indigo-100 rounded-full p-2">
+                        <DocumentTextIcon className="h-5 w-5 text-indigo-900" />
+                      </div>
+                      <div>
+                        <h3 className="text-lg font-semibold text-gray-900">Source Text #{tutorialTasks.indexOf(task) + 1}</h3>
+                      </div>
+                    </div>
+                    {JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
+                      <div className="flex items-center space-x-2">
+                        {editingTask === task._id ? (
+                          <>
+                            <button
+                              onClick={saveTask}
+                              disabled={saving}
+                              className="bg-green-100 hover:bg-green-200 text-green-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                            >
+                              {saving ? (
+                                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-green-600"></div>
+                              ) : (
+                                <CheckIcon className="h-4 w-4" />
+                              )}
+                            </button>
+                            <button
+                              onClick={cancelEditing}
+                              className="bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                            >
+                              <XMarkIcon className="h-4 w-4" />
+                            </button>
+                          </>
+                        ) : (
+                          <>
+                            <button
+                              onClick={() => startEditing(task)}
+                              className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-md transition-colors duration-200 text-sm"
+                            >
+                              <PencilIcon className="h-4 w-4" />
+                            </button>
+                            <button
+                              onClick={() => deleteTask(task._id)}
+                              className="bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                            >
+                              <TrashIcon className="h-4 w-4" />
+                            </button>
+                          </>
+                        )}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Content - Clean styling */}
+                  <div className="bg-gradient-to-r from-indigo-50 to-blue-50 rounded-xl p-6 mb-6 border border-indigo-200">
+                    {editingTask === task._id ? (
+                      <textarea
+                        value={editForm.content}
+                        onChange={(e) => setEditForm({...editForm, content: e.target.value})}
+                        className="w-full px-4 py-3 border border-indigo-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"
+                        rows={5}
+                        placeholder="Enter source text..."
+                      />
+                    ) : (
+                      <p className="text-indigo-900 leading-relaxed text-lg font-source-text">{task.content}</p>
+                    )}
+                  </div>
+
+
+                </div>
+
+                {/* All Submissions for this Task */}
+                {userSubmissions[task._id] && userSubmissions[task._id].length > 0 && (
+                  <div className="bg-gradient-to-r from-white to-indigo-50 rounded-xl p-6 mb-6 border border-stone-200">
+                    <div className="flex items-center justify-between mb-4">
+                      <div className="flex items-center space-x-2">
+                        <div className="bg-indigo-100 rounded-full p-1">
+                          <CheckCircleIcon className="h-4 w-4 text-indigo-900" />
+                        </div>
+                        <h4 className="text-stone-900 font-semibold text-lg">All Submissions ({userSubmissions[task._id].length})</h4>
+                      </div>
+                      <button
+                        onClick={() => toggleExpanded(task._id)}
+                        className="flex items-center space-x-1 text-indigo-900 hover:text-indigo-900 text-sm font-medium"
+                      >
+                        <span>{expandedSections[task._id] ? 'Collapse' : 'Expand'}</span>
+                        <svg
+                          className={`w-4 h-4 transition-transform duration-200 ${expandedSections[task._id] ? 'rotate-180' : ''}`}
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                        </svg>
+                      </button>
+                    </div>
+                    <div className={`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 transition-all duration-300 ${
+                      expandedSections[task._id] 
+                        ? 'max-h-none overflow-visible' 
+                        : 'max-h-0 overflow-hidden'
+                    }`}>
+                      {userSubmissions[task._id].map((submission, index) => (
+                        <div key={submission._id} className="bg-white rounded-lg p-3 border border-stone-200 flex flex-col justify-between h-full">
+                          <div className="flex items-center justify-between mb-2">
+                            <div className="flex items-center space-x-2">
+                              {submission.isOwner && (
+                                <span className="inline-block bg-purple-100 text-purple-800 text-xs px-1.5 py-0.5 rounded-full">
+                                  Your Submission
+                                </span>
+                              )}
+                            </div>
+                            {getStatusIcon(submission.status)}
+                          </div>
+                          <p className="text-stone-800 leading-relaxed text-base mb-2 font-smiley">{submission.transcreation}</p>
+                          <div className="flex items-center space-x-4 text-xs text-stone-700 mt-auto">
+                            <div className="flex items-center space-x-1">
+                              <span className="font-medium">Group:</span>
+                              <span className="bg-indigo-100 px-1.5 py-0.5 rounded-full text-indigo-900 text-xs">
+                                {submission.groupNumber}
+                              </span>
+                            </div>
+                            <div className="flex items-center space-x-1">
+                              <span className="font-medium">Votes:</span>
+                              <span className="bg-indigo-100 px-1.5 py-0.5 rounded-full text-indigo-900 text-xs">
+                                {(submission.voteCounts?.['1'] || 0) + (submission.voteCounts?.['2'] || 0) + (submission.voteCounts?.['3'] || 0)}
+                              </span>
+                            </div>
+                          </div>
+                          <div className="flex items-center space-x-2 mt-2">
+                            {submission.isOwner && (
+                              <button
+                                onClick={() => handleEditSubmission(submission._id, submission.transcreation)}
+                                className="text-indigo-900 hover:text-indigo-900 text-sm font-medium"
+                              >
+                                Edit
+                              </button>
+                            )}
+                            {JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
+                              <button
+                                onClick={() => handleDeleteSubmission(submission._id)}
+                                className="text-red-600 hover:text-red-800 text-sm font-medium"
+                              >
+                                Delete
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                                  {/* Translation Input (only show if user is logged in and has no submission) */}
+                  {localStorage.getItem('token') && (!userSubmissions[task._id] || userSubmissions[task._id].length === 0) && (
+                  <div className="bg-white rounded-lg p-6 border border-gray-200 shadow-sm">
+                    <div className="flex items-center space-x-3 mb-4">
+                      <div className="bg-gray-100 rounded-lg p-2">
+                        <DocumentTextIcon className="h-4 w-4 text-gray-600" />
+                      </div>
+                      <h4 className="text-gray-900 font-semibold text-lg">Group Translation</h4>
+                    </div>
+                    
+                    {/* Group Selection */}
+                    <div className="mb-4">
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Select Your Group *
+                      </label>
+                      <select
+                        value={selectedGroups[task._id] || ''}
+                        onChange={(e) => setSelectedGroups({ ...selectedGroups, [task._id]: parseInt(e.target.value) })}
+                        className="w-48 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white text-sm"
+                        required
+                      >
+                        <option value="">Choose your group...</option>
+                        {[1, 2, 3, 4, 5, 6, 7, 8].map((group) => (
+                          <option key={group} value={group}>
+                            Group {group}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+
+                    <div className="mb-4">
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Your Group's Translation *
+                      </label>
+                      <textarea
+                        value={translationText[task._id] || ''}
+                        onChange={(e) => setTranslationText({ ...translationText, [task._id]: e.target.value })}
+                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"
+                        rows={4}
+                        placeholder="Enter your group's translation here..."
+                      />
+                    </div>
+
+                    <button
+                      onClick={() => handleSubmitTranslation(task._id)}
+                      disabled={submitting[task._id]}
+                      className="bg-indigo-500 hover:bg-indigo-600 disabled:bg-gray-400 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center transition-all duration-200"
+                    >
+                      {submitting[task._id] ? (
+                        <>
+                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                          Submitting...
+                        </>
+                      ) : (
+                        <>
+                          Submit Group Translation
+                          <ArrowRightIcon className="h-4 w-4 ml-2" />
+                        </>
+                      )}
+                    </button>
+                  </div>
+                )}
+
+                {/* Show login message for visitors */}
+                {!localStorage.getItem('token') && (
+                  <div className="bg-gradient-to-r from-gray-50 to-indigo-50 rounded-xl p-6 border border-gray-200">
+                    <div className="flex items-center space-x-2 mb-4">
+                      <div className="bg-gray-100 rounded-full p-1">
+                        <DocumentTextIcon className="h-4 w-4 text-gray-600" />
+                      </div>
+                      <h4 className="text-gray-900 font-semibold text-lg">Login Required</h4>
+                    </div>
+                    <p className="text-gray-700 mb-4">
+                      Please log in to submit translations for this tutorial task.
+                    </p>
+                    <button
+                      onClick={() => window.location.href = '/login'}
+                      className="bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center transition-all duration-200"
+                    >
+                      Go to Login
+                      <ArrowRightIcon className="h-4 w-4 ml-2" />
+                    </button>
+                  </div>
+                )}
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Edit Submission Modal */}
+      {editingSubmission && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 w-full max-w-2xl mx-4">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-semibold text-gray-900">Edit Translation</h3>
+              <button
+                onClick={cancelEditSubmission}
+                className="text-gray-400 hover:text-gray-600"
+              >
+                <XMarkIcon className="h-6 w-6" />
+              </button>
+            </div>
+            <div className="mb-4">
+              <textarea
+                value={editSubmissionText}
+                onChange={(e) => setEditSubmissionText(e.target.value)}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+                rows={6}
+                placeholder="Enter your translation..."
+              />
+            </div>
+            <div className="flex justify-end space-x-3">
+              <button
+                onClick={cancelEditSubmission}
+                className="px-4 py-2 text-gray-600 hover:text-gray-800 border border-gray-300 rounded-lg"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={saveEditedSubmission}
+                className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
+              >
+                Save Changes
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TutorialTasks; 

client/src/pages/VoteResults.tsx

@@ -0,0 +1,548 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { 
+  HandThumbUpIcon, 
+  MagnifyingGlassIcon,
+  XMarkIcon
+} from '@heroicons/react/24/outline';
+
+interface VoteableSubmission {
+  _id: string;
+  transcreation: string;
+  score: number;
+  voteCounts: {
+    '1': number;
+    '2': number;
+    '3': number;
+  };
+  hasVoted: boolean;
+  userRank?: number;
+  groupNumber?: number;
+  isGroupSubmission?: boolean;
+  sourceTextId: {
+    _id: string;
+    title: string;
+    content: string;
+    sourceLanguage: string;
+    sourceCulture: string;
+    category: string;
+    weekNumber: number;
+  };
+}
+
+interface GroupedSubmissions {
+  [sourceTextId: string]: {
+    sourceText: {
+      _id: string;
+      title: string;
+      content: string;
+      sourceLanguage: string;
+      sourceCulture: string;
+      category: string;
+      weekNumber: number;
+    };
+    submissions: VoteableSubmission[];
+  };
+}
+
+const VoteResults: React.FC = () => {
+  const [groupedSubmissions, setGroupedSubmissions] = useState<GroupedSubmissions>({});
+  const [selectedExample, setSelectedExample] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [voting, setVoting] = useState<{[key: string]: boolean}>({});
+  const [searchTerm, setSearchTerm] = useState('');
+  const [sortBy, setSortBy] = useState<'score' | 'votes' | 'newest'>('score');
+  const [filterCategory, setFilterCategory] = useState<string>('all');
+  const [filterWeek, setFilterWeek] = useState<string>('all');
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const user = localStorage.getItem('user');
+    if (!user) {
+      navigate('/login');
+      return;
+    }
+    fetchVoteResults();
+  }, [navigate]);
+
+  const fetchVoteResults = async () => {
+    try {
+      setLoading(true);
+      const token = localStorage.getItem('token');
+      const response = await fetch('/api/submissions/voteable', {
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        
+        // Transform the data from backend format to frontend format
+        const transformedData: GroupedSubmissions = {};
+        
+        if (data.examples && Array.isArray(data.examples)) {
+          data.examples.forEach((exampleGroup: any) => {
+            const sourceTextId = exampleGroup.example.id;
+            transformedData[sourceTextId] = {
+              sourceText: {
+                _id: sourceTextId,
+                title: exampleGroup.example.title || `Example ${sourceTextId.slice(-4)}`,
+                content: exampleGroup.example.content,
+                sourceLanguage: exampleGroup.example.language,
+                sourceCulture: exampleGroup.example.culture,
+                category: exampleGroup.example.category || 'tutorial',
+                weekNumber: exampleGroup.example.weekNumber || 1
+              },
+              submissions: exampleGroup.translations.map((translation: any) => ({
+                _id: translation.id,
+                transcreation: translation.translation,
+                score: translation.score,
+                voteCounts: translation.voteCounts,
+                hasVoted: translation.hasVoted,
+                userRank: translation.userRank,
+                groupNumber: translation.groupNumber,
+                isGroupSubmission: translation.isGroupSubmission,
+                sourceTextId: {
+                  _id: sourceTextId,
+                  title: exampleGroup.example.title || `Example ${sourceTextId.slice(-4)}`,
+                  content: exampleGroup.example.content,
+                  sourceLanguage: exampleGroup.example.language,
+                  sourceCulture: exampleGroup.example.culture,
+                  category: exampleGroup.example.category || 'tutorial',
+                  weekNumber: exampleGroup.example.weekNumber || 1
+                }
+              }))
+            };
+          });
+        }
+        
+        setGroupedSubmissions(transformedData);
+        
+        // Auto-select first example if none selected
+        if (!selectedExample && Object.keys(transformedData).length > 0) {
+          setSelectedExample(Object.keys(transformedData)[0]);
+        }
+      } else {
+        console.error('Failed to fetch vote results');
+      }
+    } catch (error) {
+      console.error('Error fetching vote results:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleVote = async (submissionId: string, rank: number | null) => {
+    try {
+      setVoting({ ...voting, [submissionId]: true });
+      const token = localStorage.getItem('token');
+      
+      const body = rank ? { rank } : { cancel: true };
+      
+      const response = await fetch(`/api/submissions/${submissionId}/vote`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(body)
+      });
+
+      if (response.ok) {
+        // Refresh the data
+        await fetchVoteResults();
+      } else {
+        const error = await response.json();
+        alert(`Failed to submit vote: ${error.error}`);
+      }
+    } catch (error) {
+      console.error('Error submitting vote:', error);
+      alert('Failed to submit vote');
+    } finally {
+      setVoting({ ...voting, [submissionId]: false });
+    }
+  };
+
+  const getFilteredTranslations = (submissions: VoteableSubmission[] | undefined) => {
+    if (!submissions || !Array.isArray(submissions)) {
+      return [];
+    }
+    
+    let filtered = submissions;
+
+    // Filter by search term
+    if (searchTerm) {
+      filtered = filtered.filter(sub => 
+        sub.transcreation.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    }
+
+    // Sort
+    filtered.sort((a, b) => {
+      let aValue: number;
+      let bValue: number;
+
+      switch (sortBy) {
+        case 'score':
+          aValue = a.score || 0;
+          bValue = b.score || 0;
+          break;
+        case 'votes':
+          aValue = (a.voteCounts?.['1'] || 0) + (a.voteCounts?.['2'] || 0) + (a.voteCounts?.['3'] || 0);
+          bValue = (b.voteCounts?.['1'] || 0) + (b.voteCounts?.['2'] || 0) + (b.voteCounts?.['3'] || 0);
+          break;
+        case 'newest':
+          // Use ObjectId timestamp for better sorting
+          aValue = parseInt(a._id.toString().slice(0, 8), 16);
+          bValue = parseInt(b._id.toString().slice(0, 8), 16);
+          break;
+        default:
+          aValue = a.score || 0;
+          bValue = b.score || 0;
+      }
+
+      return bValue - aValue; // Always sort descending for better UX
+    });
+
+    return filtered;
+  };
+
+  const getUserVotingProgress = (submissions: VoteableSubmission[] | undefined) => {
+    if (!submissions || !Array.isArray(submissions)) {
+      return {
+        voted: 0,
+        total: 3,
+        percentage: 0
+      };
+    }
+    const userVotes = submissions.filter(sub => sub.hasVoted).length;
+    return {
+      voted: userVotes,
+      total: 3,
+      percentage: Math.min((userVotes / 3) * 100, 100)
+    };
+  };
+
+  const getAvailableRanks = (submissions: VoteableSubmission[] | undefined) => {
+    if (!submissions || !Array.isArray(submissions)) {
+      return [1, 2, 3];
+    }
+    const usedRanks = new Set(submissions.filter(sub => sub.hasVoted).map(sub => sub.userRank));
+    return [1, 2, 3].filter(rank => !usedRanks.has(rank));
+  };
+
+  const getDisplayTitle = (sourceText: any) => {
+    if (!sourceText) return 'Untitled';
+    
+    // For both tutorial tasks and weekly practice, use "Source Text #" format
+    if (sourceText.category === 'tutorial' || sourceText.category === 'weekly-practice') {
+      // Extract number from title if it exists, otherwise use week number
+      const titleMatch = sourceText.title?.match(/(\d+)/);
+      const number = titleMatch ? titleMatch[1] : sourceText.weekNumber;
+      return `Source Text ${number}`;
+    }
+    
+    return sourceText.title || 'Untitled';
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 py-8">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
+            <p className="mt-4 text-gray-600">Loading vote results...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const exampleKeys = Object.keys(groupedSubmissions);
+  
+  const filteredExamples = exampleKeys.filter(key => {
+    const example = groupedSubmissions[key];
+    if (!example || !example.sourceText) return false;
+    
+    if (filterCategory !== 'all' && example.sourceText.category !== filterCategory) return false;
+    if (filterWeek !== 'all' && example.sourceText.weekNumber.toString() !== filterWeek) return false;
+    return true;
+  }).sort((a, b) => {
+    const exampleA = groupedSubmissions[a];
+    const exampleB = groupedSubmissions[b];
+    
+    // First sort by week number
+    if (exampleA.sourceText.weekNumber !== exampleB.sourceText.weekNumber) {
+      return exampleA.sourceText.weekNumber - exampleB.sourceText.weekNumber;
+    }
+    
+    // Then sort by category (tutorial first, then weekly-practice)
+    if (exampleA.sourceText.category !== exampleB.sourceText.category) {
+      if (exampleA.sourceText.category === 'tutorial') return -1;
+      if (exampleB.sourceText.category === 'tutorial') return 1;
+    }
+    
+    // Finally sort by title to maintain consistent order within each week/category
+    return exampleA.sourceText.title.localeCompare(exampleB.sourceText.title);
+  });
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-center mb-4">
+            <HandThumbUpIcon className="h-8 w-8 text-indigo-600 mr-3" />
+            <h1 className="text-3xl font-bold text-gray-900">Vote Results</h1>
+          </div>
+          <p className="text-gray-600">
+            Vote on your favorite translations for each example. Rank your top 3 choices.
+          </p>
+        </div>
+
+        {/* Instructions */}
+        <div className="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
+          <h3 className="text-lg font-medium text-blue-900 mb-2">How Ranking Works</h3>
+          <div className="text-blue-800 text-sm space-y-2">
+            <p><strong>Voting System:</strong> You can vote for up to 3 translations per example, ranking them 1st, 2nd, and 3rd place.</p>
+            <p><strong>Scoring:</strong> 1st place votes = 3 points, 2nd place votes = 2 points, 3rd place votes = 1 point.</p>
+            <p><strong>Final Score:</strong> Total points from all votes determine the ranking.</p>
+            <p><strong>Voting Rules:</strong> You can only vote once per example, and you can change your votes at any time.</p>
+          </div>
+        </div>
+
+        {/* Filters */}
+        <div className="mb-6 bg-white rounded-lg shadow-sm border border-gray-200 p-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Category</label>
+              <select
+                value={filterCategory}
+                onChange={(e) => setFilterCategory(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              >
+                <option value="all">All Categories</option>
+                <option value="tutorial">Tutorial Tasks</option>
+                <option value="weekly-practice">Weekly Practice</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Week</label>
+              <select
+                value={filterWeek}
+                onChange={(e) => setFilterWeek(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              >
+                <option value="all">All Weeks</option>
+                {[1, 2, 3, 4, 5, 6].map(week => (
+                  <option key={week} value={week.toString()}>Week {week}</option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Sort By</label>
+              <select
+                value={sortBy}
+                onChange={(e) => setSortBy(e.target.value as 'score' | 'votes' | 'newest')}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              >
+                <option value="score">Score</option>
+                <option value="votes">Total Votes</option>
+                <option value="newest">Newest</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        {/* Source Text Selection */}
+        {filteredExamples.length > 0 ? (
+          <div className="mb-6">
+            <h2 className="text-lg font-medium text-gray-900 mb-4">Select a Source Text</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {filteredExamples.map((key) => {
+                const example = groupedSubmissions[key];
+                if (!example || !example.sourceText) {
+                  return null; // Skip rendering if example or sourceText is undefined
+                }
+                const progress = getUserVotingProgress(example.submissions);
+                
+                return (
+                  <button
+                    key={key}
+                    onClick={() => setSelectedExample(key)}
+                    className={`p-4 rounded-lg border-2 text-left transition-colors ${
+                      selectedExample === key
+                        ? 'border-indigo-500 bg-indigo-50'
+                        : 'border-gray-200 bg-white hover:border-gray-300'
+                    }`}
+                  >
+                    <div className="flex items-center justify-between mb-2">
+                      <h3 className="font-medium text-gray-900 font-source-text line-clamp-1">
+                        {getDisplayTitle(example.sourceText)}
+                      </h3>
+                      <span className={`text-xs px-2 py-1 rounded ${
+                        example.sourceText.category === 'tutorial' 
+                          ? 'bg-blue-100 text-blue-800' 
+                          : 'bg-green-100 text-green-800'
+                      }`}>
+                        {example.sourceText.category === 'tutorial' ? 'Tutorial' : 'Practice'}
+                      </span>
+                    </div>
+                    <p className="text-sm text-gray-600 line-clamp-2 mb-2">
+                      {example.sourceText.content || 'No content available'}
+                    </p>
+                    <div className="flex items-center justify-between text-xs text-gray-500">
+                      <span>Week {example.sourceText.weekNumber || 'N/A'}</span>
+                      <span>{progress.voted}/3 votes cast</span>
+                    </div>
+                    <div className="mt-2 bg-gray-200 rounded-full h-2">
+                      <div 
+                        className="bg-indigo-600 h-2 rounded-full transition-all"
+                        style={{ width: `${progress.percentage}%` }}
+                      ></div>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ) : (
+          <div className="mb-6 bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+            <div className="text-center">
+              <h3 className="text-lg font-medium text-gray-900 mb-2">No Examples Found</h3>
+              <p className="text-gray-600">
+                No submissions found for the selected filters. Try adjusting your category or week selection.
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Voting Section */}
+        {selectedExample && groupedSubmissions[selectedExample] && groupedSubmissions[selectedExample].submissions && groupedSubmissions[selectedExample].sourceText && (
+          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+            <div className="mb-6">
+              <h2 className="text-xl font-semibold text-gray-900 mb-2">
+                {getDisplayTitle(groupedSubmissions[selectedExample].sourceText)}
+              </h2>
+              <div className="flex items-center space-x-4 text-sm text-gray-600 mb-3">
+                <span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded">
+                  {groupedSubmissions[selectedExample].sourceText.sourceLanguage || 'Unknown'}
+                </span>
+                <span className={`px-2 py-1 rounded ${
+                  groupedSubmissions[selectedExample].sourceText.category === 'tutorial'
+                    ? 'bg-blue-100 text-blue-800'
+                    : 'bg-green-100 text-green-800'
+                }`}>
+                  {groupedSubmissions[selectedExample].sourceText.category === 'tutorial' ? 'Tutorial' : 'Practice'}
+                </span>
+                <span>Week {groupedSubmissions[selectedExample].sourceText.weekNumber || 'N/A'}</span>
+              </div>
+              <div className="bg-gray-50 rounded-lg p-4">
+                <p className="text-gray-900 font-source-text">{groupedSubmissions[selectedExample].sourceText.content || 'No content available'}</p>
+              </div>
+            </div>
+
+            {/* Search */}
+            <div className="mb-4">
+              <div className="relative">
+                <MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                <input
+                  type="text"
+                  placeholder="Search translations..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                />
+              </div>
+            </div>
+
+            {/* Instructions */}
+            <div className="mb-4 p-4 bg-blue-50 rounded-lg">
+              <p className="text-sm text-blue-800">
+                <strong>Instructions:</strong> Vote for your top 3 favorite translations. Click the vote buttons to rank them (1st, 2nd, 3rd place). 
+                You can change your votes or cancel them by clicking the same button again.
+              </p>
+            </div>
+
+            {/* Translations Grid */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+              {getFilteredTranslations(groupedSubmissions[selectedExample]?.submissions).map((submission) => {
+                const availableRanks = getAvailableRanks(groupedSubmissions[selectedExample]?.submissions);
+                
+                return (
+                  <div key={submission._id} className="border border-gray-200 rounded-lg p-4">
+                    <div className="flex items-start justify-between mb-3">
+                      <div className="flex-1">
+                        <p className="text-gray-900 mb-2 font-smiley">{submission.transcreation}</p>
+                        {submission.isGroupSubmission && submission.groupNumber && (
+                          <div className="mb-2">
+                            <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
+                              Group {submission.groupNumber}
+                            </span>
+                          </div>
+                        )}
+
+                        <div className="flex items-center space-x-4 text-xs text-gray-500">
+                          <span>Score: {submission.score}</span>
+                          <span>Votes: {submission.voteCounts['1'] + submission.voteCounts['2'] + submission.voteCounts['3']}</span>
+                        </div>
+                      </div>
+                      
+                      {/* Vote Buttons */}
+                      <div className="flex flex-col space-y-1 ml-4">
+                        {[1, 2, 3].map((rank) => {
+                          const isVoted = submission.hasVoted && submission.userRank === rank;
+                          const isAvailable = !submission.hasVoted && availableRanks.includes(rank);
+                          const isDisabled = !isVoted && !isAvailable;
+                          
+                          return (
+                            <button
+                              key={rank}
+                              onClick={() => handleVote(submission._id, isVoted ? null : rank)}
+                              disabled={isDisabled || voting[submission._id]}
+                              className={`w-8 h-8 rounded-full text-xs font-medium flex items-center justify-center transition-colors ${
+                                isVoted
+                                  ? 'bg-indigo-600 text-white'
+                                  : isAvailable
+                                  ? 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                                  : 'bg-gray-50 text-gray-400 cursor-not-allowed'
+                              }`}
+                            >
+                              {isVoted ? <XMarkIcon className="h-3 w-3" /> : rank}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </div>
+                    
+                    {/* Vote Counts */}
+                    <div className="flex items-center space-x-4 text-xs text-gray-500 mt-2">
+                      <span>1st: {submission.voteCounts['1']}</span>
+                      <span>2nd: {submission.voteCounts['2']}</span>
+                      <span>3rd: {submission.voteCounts['3']}</span>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            {getFilteredTranslations(groupedSubmissions[selectedExample]?.submissions).length === 0 && (
+              <div className="text-center py-8">
+                <p className="text-gray-500">No translations found matching your search criteria.</p>
+              </div>
+            )}
+          </div>
+        )}
+
+        {filteredExamples.length === 0 && (
+          <div className="text-center py-12">
+            <p className="text-gray-500">No examples available with the selected filters.</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default VoteResults; 

client/src/pages/WeeklyPractice.tsx

@@ -0,0 +1,1054 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api } from '../services/api';
+import { 
+  BookOpenIcon, 
+  DocumentTextIcon, 
+  CheckCircleIcon,
+  ClockIcon,
+  ArrowRightIcon,
+  PencilIcon,
+  XMarkIcon,
+  CheckIcon,
+  PlusIcon,
+  TrashIcon
+} from '@heroicons/react/24/outline';
+
+interface WeeklyPractice {
+  _id: string;
+  content: string;
+  weekNumber: number;
+  translationBrief?: string;
+}
+
+interface WeeklyPracticeWeek {
+  weekNumber: number;
+  translationBrief?: string;
+  practices: WeeklyPractice[];
+}
+
+interface UserSubmission {
+  _id: string;
+  transcreation: string;
+  status: string;
+  score: number;
+  isOwner?: boolean;
+  userId?: {
+    _id: string;
+    username: string;
+  };
+  voteCounts: {
+    '1': number;
+    '2': number;
+    '3': number;
+  };
+  isAnonymous?: boolean;
+}
+
+const WeeklyPractice: React.FC = () => {
+  const [selectedWeek, setSelectedWeek] = useState<number>(1);
+  const [weeklyPractice, setWeeklyPractice] = useState<WeeklyPractice[]>([]);
+  const [weeklyPracticeWeek, setWeeklyPracticeWeek] = useState<WeeklyPracticeWeek | null>(null);
+  const [userSubmissions, setUserSubmissions] = useState<{[key: string]: UserSubmission[]}>({});
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState<{[key: string]: boolean}>({});
+  const [translationText, setTranslationText] = useState<{[key: string]: string}>({});
+  const [anonymousSubmissions, setAnonymousSubmissions] = useState<{[key: string]: boolean}>({});
+  const [expandedSections, setExpandedSections] = useState<{[key: string]: boolean}>({});
+
+  const [editingPractice, setEditingPractice] = useState<string | null>(null);
+  const [editingBrief, setEditingBrief] = useState<{[key: number]: boolean}>({});
+  const [addingPractice, setAddingPractice] = useState<boolean>(false);
+  const [editForm, setEditForm] = useState<{
+    content: string;
+    translationBrief: string;
+  }>({
+    content: '',
+    translationBrief: ''
+  });
+  const [saving, setSaving] = useState(false);
+  const navigate = useNavigate();
+
+  const weeks = [1, 2, 3, 4, 5, 6];
+
+  const toggleExpanded = (practiceId: string) => {
+    setExpandedSections(prev => ({
+      ...prev,
+      [practiceId]: !prev[practiceId]
+    }));
+  };
+
+  const fetchUserSubmissions = useCallback(async (practice: WeeklyPractice[]) => {
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch('/api/submissions/my-submissions', {
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        
+        const groupedSubmissions: {[key: string]: UserSubmission[]} = {};
+        
+        // Initialize all practices with empty arrays
+        practice.forEach(practice => {
+          groupedSubmissions[practice._id] = [];
+        });
+        
+        // Then populate with actual submissions
+        practice.forEach(practice => {
+          const practiceSubmissions = data.submissions.filter((sub: any) => 
+            sub.sourceTextId && sub.sourceTextId._id === practice._id
+          );
+          if (practiceSubmissions.length > 0) {
+            groupedSubmissions[practice._id] = practiceSubmissions;
+          }
+        });
+        
+        setUserSubmissions(groupedSubmissions);
+      }
+    } catch (error) {
+      console.error('Error fetching user submissions:', error);
+    }
+  }, []);
+
+  const fetchWeeklyPractice = useCallback(async () => {
+    try {
+      setLoading(true);
+      const token = localStorage.getItem('token');
+      const response = await fetch(`/api/search/weekly-practice/${selectedWeek}`, {
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+
+      if (response.ok) {
+        const practices = await response.json();
+        setWeeklyPractice(practices);
+        
+        // Organize practices into week structure
+        if (practices.length > 0) {
+          const translationBrief = practices[0].translationBrief;
+          const weeklyPracticeWeekData: WeeklyPracticeWeek = {
+            weekNumber: selectedWeek,
+            translationBrief: translationBrief,
+            practices: practices
+          };
+          setWeeklyPracticeWeek(weeklyPracticeWeekData);
+        } else {
+          setWeeklyPracticeWeek(null);
+        }
+        
+        await fetchUserSubmissions(practices);
+      } else {
+        console.error('Failed to fetch weekly practice');
+      }
+    } catch (error) {
+      console.error('Error fetching weekly practice:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [selectedWeek, fetchUserSubmissions]);
+
+  useEffect(() => {
+    const user = localStorage.getItem('user');
+    if (!user) {
+      navigate('/login');
+      return;
+    }
+    fetchWeeklyPractice();
+  }, [fetchWeeklyPractice, navigate]);
+
+  // Refresh submissions when user changes (after login/logout)
+  useEffect(() => {
+    const user = localStorage.getItem('user');
+    if (user && weeklyPractice.length > 0) {
+      fetchUserSubmissions(weeklyPractice);
+    }
+  }, [weeklyPractice, fetchUserSubmissions]);
+
+  const handleSubmitTranslation = async (practiceId: string) => {
+    if (!translationText[practiceId]?.trim()) {
+      alert('Please provide a translation');
+      return;
+    }
+
+    try {
+      setSubmitting({ ...submitting, [practiceId]: true });
+      const token = localStorage.getItem('token');
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      const response = await fetch('/api/submissions', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          sourceTextId: practiceId,
+          transcreation: translationText[practiceId],
+          culturalAdaptations: [],
+          isAnonymous: anonymousSubmissions[practiceId] || false,
+          username: user.name || 'Unknown'
+        })
+      });
+
+      if (response.ok) {
+  
+        setTranslationText({ ...translationText, [practiceId]: '' });
+        await fetchUserSubmissions(weeklyPractice);
+      } else {
+        const error = await response.json();
+
+      }
+    } catch (error) {
+      console.error('Error submitting translation:', error);
+
+    } finally {
+      setSubmitting({ ...submitting, [practiceId]: false });
+    }
+  };
+
+  const [editingSubmission, setEditingSubmission] = useState<{id: string, text: string} | null>(null);
+  const [editSubmissionText, setEditSubmissionText] = useState('');
+
+  const handleEditSubmission = async (submissionId: string, currentText: string) => {
+    setEditingSubmission({ id: submissionId, text: currentText });
+    setEditSubmissionText(currentText);
+  };
+
+  const saveEditedSubmission = async () => {
+    if (!editingSubmission || !editSubmissionText.trim()) return;
+
+    try {
+      const token = localStorage.getItem('token');
+      const response = await fetch(`/api/submissions/${editingSubmission.id}`, {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          transcreation: editSubmissionText
+        })
+      });
+
+      if (response.ok) {
+
+        setEditingSubmission(null);
+        setEditSubmissionText('');
+        await fetchUserSubmissions(weeklyPractice);
+      } else {
+        const error = await response.json();
+        
+      }
+    } catch (error) {
+      console.error('Error updating translation:', error);
+      
+    }
+  };
+
+  const cancelEditSubmission = () => {
+    setEditingSubmission(null);
+    setEditSubmissionText('');
+  };
+
+  const handleDeleteSubmission = async (submissionId: string) => {
+
+
+    try {
+      const response = await api.delete(`/submissions/${submissionId}`);
+
+      if (response.status === 200) {
+
+        await fetchUserSubmissions(weeklyPractice);
+      } else {
+        
+      }
+    } catch (error) {
+      console.error('Error deleting submission:', error);
+      
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'approved':
+        return <CheckCircleIcon className="h-5 w-5 text-green-500" />;
+      case 'pending':
+        return <ClockIcon className="h-5 w-5 text-yellow-500" />;
+      default:
+        return <ClockIcon className="h-5 w-5 text-gray-500" />;
+    }
+  };
+
+  const startEditing = (practice: WeeklyPractice) => {
+    setEditingPractice(practice._id);
+    setEditForm({
+      content: practice.content,
+      translationBrief: ''
+    });
+  };
+
+  const startEditingBrief = () => {
+    setEditingBrief(prev => ({ ...prev, [selectedWeek]: true }));
+    setEditForm({
+      content: '',
+      translationBrief: weeklyPracticeWeek?.translationBrief || ''
+    });
+  };
+
+  const startAddingBrief = () => {
+    setEditingBrief(prev => ({ ...prev, [selectedWeek]: true }));
+    setEditForm({
+      content: '',
+      translationBrief: ''
+    });
+  };
+
+  const removeBrief = async () => {
+
+    
+    try {
+      setSaving(true);
+      const token = localStorage.getItem('token');
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      
+      // Check if user is admin
+      if (user.role !== 'admin') {
+
+        return;
+      }
+
+      const response = await fetch(`/api/auth/admin/weekly-brief/${selectedWeek}`, {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+          'user-role': user.role
+        },
+        body: JSON.stringify({
+          translationBrief: '',
+          weekNumber: selectedWeek
+        })
+      });
+
+      if (response.ok) {
+        await fetchWeeklyPractice();
+
+      } else {
+        const error = await response.json();
+        
+      }
+    } catch (error) {
+      console.error('Failed to remove translation brief:', error);
+      
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const cancelEditing = () => {
+    setEditingPractice(null);
+    setEditingBrief(prev => ({ ...prev, [selectedWeek]: false }));
+    setEditForm({
+      content: '',
+      translationBrief: ''
+    });
+  };
+
+  const savePractice = async () => {
+    if (!editingPractice) return;
+    
+    try {
+      setSaving(true);
+      const token = localStorage.getItem('token');
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      
+      // Check if user is admin
+      if (user.role !== 'admin') {
+
+        return;
+      }
+
+      const response = await fetch(`/api/auth/admin/weekly-practice/${editingPractice}`, {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+          'user-role': user.role
+        },
+        body: JSON.stringify({
+          ...editForm,
+          weekNumber: selectedWeek
+        })
+      });
+
+      if (response.ok) {
+        await fetchWeeklyPractice();
+        setEditingPractice(null);
+
+      } else {
+        const error = await response.json();
+        
+      }
+    } catch (error) {
+      console.error('Failed to update weekly practice:', error);
+      
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const saveBrief = async () => {
+    try {
+      setSaving(true);
+      const token = localStorage.getItem('token');
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      
+      // Check if user is admin
+      if (user.role !== 'admin') {
+
+        return;
+      }
+
+      const response = await fetch(`/api/auth/admin/weekly-brief/${selectedWeek}`, {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+          'user-role': user.role
+        },
+        body: JSON.stringify({
+          translationBrief: editForm.translationBrief,
+          weekNumber: selectedWeek
+        })
+      });
+
+      if (response.ok) {
+        await fetchWeeklyPractice();
+        setEditingBrief(prev => ({ ...prev, [selectedWeek]: false }));
+      } else {
+        const error = await response.json();
+      }
+    } catch (error) {
+      console.error('Failed to update translation brief:', error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const startAddingPractice = () => {
+    setAddingPractice(true);
+    setEditForm({
+      content: '',
+      translationBrief: ''
+    });
+  };
+
+  const cancelAddingPractice = () => {
+    setAddingPractice(false);
+    setEditForm({
+      content: '',
+      translationBrief: ''
+    });
+  };
+
+  const saveNewPractice = async () => {
+    try {
+      setSaving(true);
+      const token = localStorage.getItem('token');
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      
+      // Check if user is admin
+      if (user.role !== 'admin') {
+        return;
+      }
+
+      if (!editForm.content.trim()) {
+        return;
+      }
+
+      const response = await fetch('/api/auth/admin/weekly-practice', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json',
+          'user-role': user.role
+        },
+        body: JSON.stringify({
+          title: `Week ${selectedWeek} Weekly Practice`,
+          content: editForm.content,
+          sourceLanguage: 'English',
+          weekNumber: selectedWeek,
+          category: 'weekly-practice'
+        })
+      });
+
+      if (response.ok) {
+        await fetchWeeklyPractice();
+        setAddingPractice(false);
+      } else {
+        const error = await response.json();
+      }
+    } catch (error) {
+      console.error('Failed to add weekly practice:', error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const deletePractice = async (practiceId: string) => {
+    const user = JSON.parse(localStorage.getItem('user') || '{}');
+    const token = localStorage.getItem('token');
+    
+    // Check if user is admin
+    if (user.role !== 'admin') {
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const response = await fetch(`/api/auth/admin/weekly-practice/${practiceId}`, {
+        method: 'DELETE',
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'user-role': user.role,
+        },
+      });
+
+      if (response.ok) {
+        await fetchWeeklyPractice();
+      } else {
+        const error = await response.json();
+        console.error('Failed to delete weekly practice:', error);
+      }
+    } catch (error) {
+      console.error('Failed to delete weekly practice:', error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 py-8">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
+            <p className="mt-4 text-gray-600">Loading weekly practice...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-center mb-4">
+            <BookOpenIcon className="h-8 w-8 text-indigo-600 mr-3" />
+            <h1 className="text-3xl font-bold text-gray-900">Weekly Practice</h1>
+          </div>
+          <p className="text-gray-600">
+            Practice your translation skills with weekly examples and cultural elements.
+          </p>
+        </div>
+
+        {/* Week Selector */}
+        <div className="mb-6">
+          <div className="flex space-x-2 overflow-x-auto pb-2">
+            {weeks.map((week) => (
+              <button
+                key={week}
+                onClick={() => setSelectedWeek(week)}
+                className={`px-4 py-2 rounded-lg font-medium whitespace-nowrap ${
+                  selectedWeek === week
+                    ? 'bg-indigo-600 text-white'
+                    : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-300'
+                }`}
+              >
+                Week {week}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Translation Brief - Shown once at the top */}
+        {weeklyPracticeWeek && weeklyPracticeWeek.translationBrief ? (
+          <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-8 mb-8 border border-blue-200">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center space-x-2">
+              <div className="bg-blue-100 rounded-full p-2">
+                <BookOpenIcon className="h-5 w-5 text-blue-600" />
+              </div>
+              <h3 className="text-blue-900 font-semibold text-xl">Translation Brief</h3>
+            </div>
+              {JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
+                <div className="flex items-center space-x-2">
+                  {editingBrief[selectedWeek] ? (
+                    <>
+                      <button
+                        onClick={saveBrief}
+                        disabled={saving}
+                        className="bg-green-100 hover:bg-green-200 text-green-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                      >
+                        {saving ? (
+                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-green-600"></div>
+                        ) : (
+                          <CheckIcon className="h-4 w-4" />
+                        )}
+                      </button>
+                      <button
+                        onClick={cancelEditing}
+                        className="bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                      >
+                        <XMarkIcon className="h-4 w-4" />
+                      </button>
+                    </>
+                  ) : (
+                    <>
+                      <button
+                        onClick={startEditingBrief}
+                        className="bg-blue-100 hover:bg-blue-200 text-blue-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                      >
+                        <PencilIcon className="h-4 w-4" />
+                      </button>
+                      <button
+                        onClick={() => removeBrief()}
+                        className="bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                      >
+                        <TrashIcon className="h-4 w-4" />
+                      </button>
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+            {editingBrief[selectedWeek] ? (
+              <textarea
+                value={editForm.translationBrief}
+                onChange={(e) => setEditForm({ ...editForm, translationBrief: e.target.value })}
+                className="w-full p-4 border border-blue-300 rounded-lg text-blue-800 leading-relaxed text-lg bg-white"
+                rows={6}
+                placeholder="Enter translation brief..."
+              />
+            ) : (
+              <p className="text-blue-800 leading-relaxed text-lg font-smiley">{weeklyPracticeWeek.translationBrief}</p>
+            )}
+          </div>
+        ) : (
+          // Show add brief button when no brief exists
+          JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
+            <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-8 mb-8 border border-blue-200 border-dashed">
+              <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center space-x-2">
+                  <div className="bg-blue-100 rounded-full p-2">
+                    <BookOpenIcon className="h-5 w-5 text-blue-600" />
+                  </div>
+                  <h3 className="text-blue-900 font-semibold text-xl">Translation Brief</h3>
+                </div>
+                <button
+                  onClick={startAddingBrief}
+                  className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center space-x-2"
+                >
+                  <PlusIcon className="h-4 w-4" />
+                  <span>Add Translation Brief</span>
+                </button>
+              </div>
+              {editingBrief[selectedWeek] && (
+                <div className="space-y-4">
+                  <textarea
+                    value={editForm.translationBrief}
+                    onChange={(e) => setEditForm({ ...editForm, translationBrief: e.target.value })}
+                    className="w-full p-4 border border-blue-300 rounded-lg text-blue-800 leading-relaxed text-lg bg-white"
+                    rows={6}
+                    placeholder="Enter translation brief..."
+                  />
+                  <div className="flex items-center space-x-2">
+                    <button
+                      onClick={saveBrief}
+                      disabled={saving}
+                      className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors duration-200"
+                    >
+                      {saving ? (
+                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                      ) : (
+                        'Save Brief'
+                      )}
+                    </button>
+                    <button
+                      onClick={cancelEditing}
+                      className="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors duration-200"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          )
+        )}
+
+        {/* Weekly Practice */}
+        <div className="space-y-6">
+          {/* Add Practice Button for Admin */}
+          {JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
+            <div className="mb-6">
+              {addingPractice ? (
+                <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6 w-full">
+                  <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center space-x-2">
+                      <div className="bg-orange-100 rounded-full p-2">
+                        <PlusIcon className="h-5 w-5 text-orange-600" />
+                      </div>
+                      <h3 className="text-lg font-semibold text-gray-900">Add New Weekly Practice</h3>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <button
+                        onClick={saveNewPractice}
+                        disabled={saving}
+                        className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center space-x-2"
+                      >
+                        {saving ? (
+                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                        ) : (
+                          <>
+                            <CheckIcon className="h-4 w-4" />
+                            <span>Save Practice</span>
+                          </>
+                        )}
+                      </button>
+                      <button
+                        onClick={cancelAddingPractice}
+                        className="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center space-x-2"
+                      >
+                        <XMarkIcon className="h-4 w-4" />
+                        <span>Cancel</span>
+                      </button>
+                    </div>
+                  </div>
+                  <textarea
+                    value={editForm.content}
+                    onChange={(e) => setEditForm({ ...editForm, content: e.target.value })}
+                    className="w-full p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
+                    rows={4}
+                    placeholder="Enter weekly practice content..."
+                  />
+                </div>
+              ) : (
+                <div className="bg-gradient-to-r from-orange-50 to-amber-50 rounded-xl p-6 border border-orange-200 border-dashed">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-3">
+                      <div className="bg-orange-100 rounded-full p-2">
+                        <PlusIcon className="h-5 w-5 text-orange-600" />
+                      </div>
+                      <div>
+                        <h3 className="text-lg font-semibold text-orange-900">Add New Weekly Practice</h3>
+                        <p className="text-orange-700 text-sm">Create a new practice example for Week {selectedWeek}</p>
+                      </div>
+                    </div>
+                    <button
+                      onClick={startAddingPractice}
+                      className="bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 rounded-lg transition-colors duration-200 flex items-center space-x-2 shadow-lg hover:shadow-xl"
+                    >
+                      <PlusIcon className="h-5 w-5" />
+                      <span className="font-medium">Add Practice</span>
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {weeklyPractice.length === 0 && !addingPractice ? (
+            <div className="text-center py-12">
+              <DocumentTextIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+              <h3 className="text-lg font-medium text-gray-900 mb-2">
+                No practice examples available
+              </h3>
+              <p className="text-gray-600">
+                Practice examples for Week {selectedWeek} haven't been set up yet.
+              </p>
+            </div>
+          ) : (
+            weeklyPractice.map((practice) => (
+              <div key={practice._id} className="bg-white rounded-xl shadow-lg border border-gray-100 p-8 hover:shadow-xl transition-shadow duration-300">
+                <div className="mb-6">
+                  <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center space-x-3">
+                      <div className="bg-orange-100 rounded-full p-2">
+                        <DocumentTextIcon className="h-5 w-5 text-orange-600" />
+                      </div>
+                      <div>
+                        <h3 className="text-lg font-semibold text-gray-900">Source Text #{weeklyPractice.indexOf(practice) + 1}</h3>
+                      </div>
+                    </div>
+                    {JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
+                        <div className="flex items-center space-x-2">
+                        {editingPractice === practice._id ? (
+                          <>
+                            <button
+                              onClick={savePractice}
+                              disabled={saving}
+                              className="bg-green-100 hover:bg-green-200 text-green-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                            >
+                              {saving ? (
+                                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-green-600"></div>
+                              ) : (
+                                <CheckIcon className="h-4 w-4" />
+                              )}
+                            </button>
+                            <button
+                              onClick={cancelEditing}
+                              className="bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                            >
+                              <XMarkIcon className="h-4 w-4" />
+                            </button>
+                          </>
+                        ) : (
+                          <>
+                          <button
+                            onClick={() => startEditing(practice)}
+                            className="bg-blue-100 hover:bg-blue-200 text-blue-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                          >
+                            <PencilIcon className="h-4 w-4" />
+                          </button>
+                            <button
+                              onClick={() => deletePractice(practice._id)}
+                              className="bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                            >
+                              <TrashIcon className="h-4 w-4" />
+                            </button>
+                          </>
+                        )}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Content - Enhanced styling */}
+                  <div className="bg-gradient-to-r from-orange-50 to-amber-50 rounded-xl p-6 mb-6 border border-orange-200">
+                    {editingPractice === practice._id ? (
+                      <textarea
+                        value={editForm.content}
+                        onChange={(e) => setEditForm({...editForm, content: e.target.value})}
+                        className="w-full px-4 py-3 border border-orange-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 bg-white"
+                        rows={5}
+                        placeholder="Enter source text..."
+                      />
+                    ) : (
+                      <p className="text-orange-800 leading-relaxed text-lg font-source-text">{practice.content}</p>
+                    )}
+                  </div>
+                </div>
+
+                {/* All Submissions for this Practice */}
+                {userSubmissions[practice._id] && userSubmissions[practice._id].length > 0 && (
+                  <div className="bg-gradient-to-r from-white to-orange-50 rounded-xl p-6 mb-6 border border-stone-200">
+                    <div className="flex items-center justify-between mb-4">
+                      <div className="flex items-center space-x-2">
+                        <div className="bg-amber-100 rounded-full p-1">
+                          <CheckCircleIcon className="h-4 w-4 text-amber-600" />
+                        </div>
+                        <h4 className="text-stone-900 font-semibold text-lg">All Submissions ({userSubmissions[practice._id].length})</h4>
+                      </div>
+                      <button
+                        onClick={() => toggleExpanded(practice._id)}
+                        className="flex items-center space-x-1 text-amber-700 hover:text-amber-800 text-sm font-medium"
+                      >
+                        <span>{expandedSections[practice._id] ? 'Collapse' : 'Expand'}</span>
+                        <svg
+                          className={`w-4 h-4 transition-transform duration-200 ${expandedSections[practice._id] ? 'rotate-180' : ''}`}
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                        </svg>
+                      </button>
+                    </div>
+                    <div className={`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 transition-all duration-300 ${
+                      expandedSections[practice._id] 
+                        ? 'max-h-none overflow-visible' 
+                        : 'max-h-0 overflow-hidden'
+                    }`}>
+                      {userSubmissions[practice._id].map((submission, index) => (
+                        <div key={submission._id} className="bg-white rounded-lg p-3 border border-stone-200 flex flex-col justify-between h-full">
+                          <div className="flex items-center justify-between mb-2">
+                            <div className="flex items-center space-x-2">
+                              {submission.isOwner && (
+                                <span className="inline-block bg-purple-100 text-purple-800 text-xs px-1.5 py-0.5 rounded-full">
+                                  Your Submission
+                                </span>
+                              )}
+                            </div>
+                            {getStatusIcon(submission.status)}
+                    </div>
+                          <p className="text-stone-800 leading-relaxed text-base mb-2 font-smiley">{submission.transcreation}</p>
+                          <div className="flex items-center space-x-4 text-xs text-stone-700 mt-auto">
+                      <div className="flex items-center space-x-1">
+                              <span className="font-medium">By:</span>
+                              <span className="bg-amber-100 px-1.5 py-0.5 rounded-full text-amber-800 text-xs">
+                                {submission.userId?.username || 'Unknown'}
+                              </span>
+                      </div>
+                      <div className="flex items-center space-x-1">
+                        <span className="font-medium">Votes:</span>
+                              <span className="bg-amber-100 px-1.5 py-0.5 rounded-full text-xs">
+                                {(submission.voteCounts?.['1'] || 0) + (submission.voteCounts?.['2'] || 0) + (submission.voteCounts?.['3'] || 0)}
+                        </span>
+                      </div>
+                            {submission.isOwner && (
+                              <button
+                                onClick={() => handleEditSubmission(submission._id, submission.transcreation)}
+                                className="text-purple-600 hover:text-purple-800 text-sm font-medium"
+                              >
+                                Edit
+                              </button>
+                            )}
+                            {JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
+                              <button
+                                onClick={() => handleDeleteSubmission(submission._id)}
+                                className="text-red-600 hover:text-red-800 text-sm font-medium ml-2"
+                              >
+                                Delete
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Translation Input (only show if user is logged in and has no submission) */}
+                {localStorage.getItem('token') && (!userSubmissions[practice._id] || userSubmissions[practice._id].length === 0) && (
+                  <div className="bg-gradient-to-r from-purple-50 to-violet-50 rounded-xl p-6 border border-purple-200">
+                    <div className="flex items-center space-x-2 mb-4">
+                      <div className="bg-purple-100 rounded-full p-1">
+                        <DocumentTextIcon className="h-4 w-4 text-purple-600" />
+                      </div>
+                      <h4 className="text-purple-900 font-semibold text-lg">Your Translation</h4>
+                    </div>
+                    <div className="mb-4">
+                      <textarea
+                        value={translationText[practice._id] || ''}
+                        onChange={(e) => setTranslationText({ ...translationText, [practice._id]: e.target.value })}
+                        className="w-full px-4 py-3 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white"
+                        rows={4}
+                        placeholder="Enter your translation here..."
+                      />
+                    </div>
+                    
+                    <div className="mb-4">
+                      <label className="flex items-center space-x-2 cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={anonymousSubmissions[practice._id] || false}
+                          onChange={(e) => setAnonymousSubmissions({ 
+                            ...anonymousSubmissions, 
+                            [practice._id]: e.target.checked 
+                          })}
+                          className="rounded border-gray-300 text-purple-600 focus:ring-purple-500"
+                        />
+                        <span className="text-purple-700 font-medium">Submit anonymously</span>
+                      </label>
+                      <p className="text-sm text-purple-600 mt-1">
+                        Check this box to submit without showing your name
+                      </p>
+                    </div>
+
+                    <button
+                      onClick={() => handleSubmitTranslation(practice._id)}
+                      disabled={submitting[practice._id]}
+                      className="bg-gradient-to-r from-purple-600 to-violet-600 hover:from-purple-700 hover:to-violet-700 disabled:from-gray-400 disabled:to-gray-500 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center transition-all duration-200 transform hover:scale-105"
+                    >
+                      {submitting[practice._id] ? (
+                        <>
+                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                          Submitting...
+                        </>
+                      ) : (
+                        <>
+                          Submit Translation
+                          <ArrowRightIcon className="h-4 w-4 ml-2" />
+                        </>
+                      )}
+                    </button>
+                  </div>
+                )}
+
+                {/* Show login message for visitors */}
+                {!localStorage.getItem('token') && (
+                  <div className="bg-gradient-to-r from-gray-50 to-blue-50 rounded-xl p-6 border border-gray-200">
+                    <div className="flex items-center space-x-2 mb-4">
+                      <div className="bg-gray-100 rounded-full p-1">
+                        <DocumentTextIcon className="h-4 w-4 text-gray-600" />
+                      </div>
+                      <h4 className="text-gray-900 font-semibold text-lg">Login Required</h4>
+                    </div>
+                    <p className="text-gray-700 mb-4">
+                      Please log in to submit translations for this weekly practice.
+                    </p>
+                    <button
+                      onClick={() => window.location.href = '/login'}
+                      className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center transition-all duration-200 transform hover:scale-105"
+                    >
+                      Go to Login
+                      <ArrowRightIcon className="h-4 w-4 ml-2" />
+                    </button>
+                  </div>
+                )}
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Edit Submission Modal */}
+      {editingSubmission && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 w-full max-w-2xl mx-4">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-semibold text-gray-900">Edit Translation</h3>
+              <button
+                onClick={cancelEditSubmission}
+                className="text-gray-400 hover:text-gray-600"
+              >
+                <XMarkIcon className="h-6 w-6" />
+              </button>
+            </div>
+            <div className="mb-4">
+              <textarea
+                value={editSubmissionText}
+                onChange={(e) => setEditSubmissionText(e.target.value)}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+                rows={6}
+                placeholder="Enter your translation..."
+              />
+            </div>
+            <div className="flex justify-end space-x-3">
+              <button
+                onClick={cancelEditSubmission}
+                className="px-4 py-2 text-gray-600 hover:text-gray-800 border border-gray-300 rounded-lg"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={saveEditedSubmission}
+                className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
+              >
+                Save Changes
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default WeeklyPractice; 

client/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" /> 

client/src/services/api.ts

@@ -0,0 +1,58 @@
+import axios from 'axios';
+
+// Create axios instance with base configuration
+const api = axios.create({
+  baseURL: process.env.REACT_APP_API_URL || 'http://localhost:5000/api',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  timeout: 10000, // 10 second timeout
+});
+
+// Request interceptor to add auth token and user role
+api.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    
+    // Add user role to headers
+    const user = localStorage.getItem('user');
+    if (user) {
+      try {
+        const userData = JSON.parse(user);
+        config.headers['user-role'] = userData.role || 'visitor';
+      } catch (error) {
+        config.headers['user-role'] = 'visitor';
+      }
+    }
+    
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor to handle errors
+api.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (error) => {
+    if (error.response?.status === 401) {
+      // Token expired or invalid
+      localStorage.removeItem('token');
+      localStorage.removeItem('user');
+      window.location.href = '/login';
+    } else if (error.response?.status === 500) {
+      console.error('Server error:', error.response.data);
+    } else if (error.code === 'ECONNABORTED') {
+      console.error('Request timeout');
+    }
+    return Promise.reject(error);
+  }
+);
+
+export { api }; 

client/tailwind.config.js

@@ -0,0 +1,61 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        },
+        cultural: {
+          50: '#fefce8',
+          100: '#fef9c3',
+          200: '#fef08a',
+          300: '#fde047',
+          400: '#facc15',
+          500: '#eab308',
+          600: '#ca8a04',
+          700: '#a16207',
+          800: '#854d0e',
+          900: '#713f12',
+        }
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.3s ease-in-out',
+        'slide-in': 'slideIn 0.3s ease-out',
+        'bounce-in': 'bounceIn 0.6s ease-out',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0', transform: 'translateY(10px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        slideIn: {
+          '0%': { transform: 'translateX(-100%)' },
+          '100%': { transform: 'translateX(0)' },
+        },
+        bounceIn: {
+          '0%': { transform: 'scale(0.3)', opacity: '0' },
+          '50%': { transform: 'scale(1.05)' },
+          '70%': { transform: 'scale(0.9)' },
+          '100%': { transform: 'scale(1)', opacity: '1' },
+        },
+      },
+    },
+  },
+  plugins: [],
+} 

client/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "es6"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+} 

deploy.sh

@@ -0,0 +1,84 @@
+#!/bin/bash
+
+# Cultural Shift Sandbox - Deployment Script for Hugging Face Spaces
+# This script prepares the files for deployment
+
+echo "🚀 Preparing Cultural Shift Sandbox for Hugging Face Spaces deployment..."
+
+# Create deployment directories
+echo "📁 Creating deployment directories..."
+
+# Backend deployment
+mkdir -p deploy/backend
+cp -r server/* deploy/backend/
+cp Dockerfile deploy/backend/
+cp package.json deploy/backend/ 2>/dev/null || echo "⚠️  package.json not found in root"
+
+# Frontend deployment
+mkdir -p deploy/frontend
+cp -r client/* deploy/frontend/
+cp client/Dockerfile deploy/frontend/
+cp nginx.conf deploy/frontend/
+
+# Create deployment instructions
+cat > deploy/README.md << 'EOF'
+# Deployment Instructions
+
+## Backend Deployment (Hugging Face Spaces)
+
+1. Create a new Space on Hugging Face:
+   - Go to https://huggingface.co/spaces
+   - Click "Create new Space"
+   - Choose "Docker" as the SDK
+   - Name: `your-username/transcreation-backend`
+
+2. Upload files from `backend/` folder:
+   - All files in this directory
+   - Dockerfile
+   - package.json and package-lock.json
+
+3. Set Environment Variables:
+   - MONGODB_URI=your_mongodb_atlas_connection_string
+   - NODE_ENV=production
+   - PORT=5000
+
+## Frontend Deployment (Hugging Face Spaces)
+
+1. Create another Space:
+   - Name: `your-username/transcreation-frontend`
+   - Choose "Docker" as the SDK
+
+2. Upload files from `frontend/` folder:
+   - All files in this directory
+   - Dockerfile
+   - nginx.conf
+
+3. Set Environment Variables:
+   - REACT_APP_API_URL=https://your-backend-space-url.hf.space/api
+
+## Database Setup
+
+1. Create MongoDB Atlas account
+2. Create a new cluster
+3. Get your connection string
+4. Add it as MONGODB_URI environment variable
+
+## URLs
+
+- Backend: https://your-username-transcreation-backend.hf.space
+- Frontend: https://your-username-transcreation-frontend.hf.space
+EOF
+
+echo "✅ Deployment files prepared!"
+echo ""
+echo "📂 Files are ready in the 'deploy/' directory:"
+echo "   - deploy/backend/ (for backend Space)"
+echo "   - deploy/frontend/ (for frontend Space)"
+echo ""
+echo "📖 See deploy/README.md for detailed instructions"
+echo ""
+echo "🔗 Next steps:"
+echo "   1. Set up MongoDB Atlas database"
+echo "   2. Create Hugging Face Spaces"
+echo "   3. Upload files and configure environment variables"
+echo "   4. Deploy and test!" 

deploy/README.md

@@ -0,0 +1,45 @@
+# Deployment Instructions
+
+## Backend Deployment (Hugging Face Spaces)
+
+1. Create a new Space on Hugging Face:
+   - Go to https://huggingface.co/spaces
+   - Click "Create new Space"
+   - Choose "Docker" as the SDK
+   - Name: `your-username/transcreation-backend`
+
+2. Upload files from `backend/` folder:
+   - All files in this directory
+   - Dockerfile
+   - package.json and package-lock.json
+
+3. Set Environment Variables:
+   - MONGODB_URI=your_mongodb_atlas_connection_string
+   - NODE_ENV=production
+   - PORT=5000
+
+## Frontend Deployment (Hugging Face Spaces)
+
+1. Create another Space:
+   - Name: `your-username/transcreation-frontend`
+   - Choose "Docker" as the SDK
+
+2. Upload files from `frontend/` folder:
+   - All files in this directory
+   - Dockerfile
+   - nginx.conf
+
+3. Set Environment Variables:
+   - REACT_APP_API_URL=https://your-backend-space-url.hf.space/api
+
+## Database Setup
+
+1. Create MongoDB Atlas account
+2. Create a new cluster
+3. Get your connection string
+4. Add it as MONGODB_URI environment variable
+
+## URLs
+
+- Backend: https://your-username-transcreation-backend.hf.space
+- Frontend: https://your-username-transcreation-frontend.hf.space

deploy/backend

@@ -0,0 +1 @@
+Subproject commit ea6f0bee862740ad850bc840ab439813eb97448a

deploy/frontend

@@ -0,0 +1 @@
+Subproject commit 4bad28759137fde778acd5961ae52af1b3d4361c

deploy/run-seeding.sh

@@ -0,0 +1,46 @@
+#!/bin/bash
+
+echo "🌱 Database Seeding Helper"
+echo "=========================="
+echo ""
+echo "This script will help you seed your deployed backend database."
+echo ""
+
+# Check if backend is responding
+BACKEND_URL="https://linguabot-transcreation-backend.hf.space"
+echo "🔍 Testing backend connection..."
+if curl -s "$BACKEND_URL/health" > /dev/null; then
+    echo "✅ Backend is responding"
+else
+    echo "❌ Backend is not responding. Please check your backend URL."
+    exit 1
+fi
+
+echo ""
+echo "📋 To seed your deployed database, you need to:"
+echo ""
+echo "1. Go to your Hugging Face Space: https://huggingface.co/spaces/linguabot/transcreation-backend"
+echo "2. Go to Settings → Repository secrets"
+echo "3. Make sure you have MONGODB_URI set with your MongoDB Atlas connection string"
+echo ""
+echo "4. Upload the seed-database.js file to your backend Space"
+echo "5. Go to the Space's terminal and run:"
+echo "   npm run seed"
+echo ""
+echo "5. Or if you prefer, you can run it directly:"
+echo "   node seed-database.js"
+echo ""
+echo "📊 This will create:"
+echo "  👤 Admin user: admin@example.com / admin123"
+echo "  👤 Student user: student@example.com / student123"
+echo "  📚 Tutorial tasks: 3 tasks for Week 1"
+echo "  📝 Weekly practice: 6 tasks for Week 1"
+echo "  📖 Practice examples: 4 examples"
+echo ""
+echo "🔗 After seeding, you can:"
+echo "  1. Log in with admin@example.com / admin123"
+echo "  2. Log in with student@example.com / student123"
+echo "  3. View tutorial tasks and weekly practice"
+echo "  4. Create submissions and test the voting system"
+echo ""
+echo "⚠️  Note: Make sure your MONGODB_URI environment variable is set correctly in your Space settings." 

deploy/seed-deployed-database.sh

@@ -0,0 +1,44 @@
+#!/bin/bash
+
+echo "🌱 Seeding Deployed Database"
+echo "=============================="
+echo ""
+echo "This script will help you seed your deployed backend database with initial data."
+echo ""
+
+# Check if we have the backend URL
+BACKEND_URL="https://linguabot-transcreation-backend.hf.space"
+
+echo "🔍 Testing backend connection..."
+if curl -s "$BACKEND_URL/health" > /dev/null; then
+    echo "✅ Backend is responding"
+else
+    echo "❌ Backend is not responding. Please check your backend URL."
+    exit 1
+fi
+
+echo ""
+echo "📋 To seed your deployed database, you need to:"
+echo ""
+echo "1. Go to your Hugging Face Space: https://huggingface.co/spaces/linguabot/transcreation-backend"
+echo "2. Go to Settings → Repository secrets"
+echo "3. Make sure you have MONGODB_URI set with your MongoDB Atlas connection string"
+echo ""
+echo "4. Then run this command in your backend Space's terminal:"
+echo "   npm run seed"
+echo ""
+echo "5. Or manually run:"
+echo "   node seed-data.js"
+echo ""
+echo "📝 This will create:"
+echo "   - Admin user: admin@example.com / admin123"
+echo "   - Student user: student@example.com / student123"
+echo "   - Tutorial tasks for Week 1"
+echo "   - Weekly practice tasks for all 6 weeks"
+echo ""
+echo "🔗 After seeding, you can:"
+echo "   - Log in with the test accounts"
+echo "   - See tutorial tasks and weekly practice content"
+echo "   - Create submissions and test the voting system"
+echo ""
+echo "Would you like to proceed with the seeding instructions above?" 

docker-compose.yml

@@ -0,0 +1,30 @@
+version: '3.8'
+
+services:
+  backend:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "5000:5000"
+    environment:
+      - NODE_ENV=production
+      - PORT=5000
+      - MONGODB_URI=${MONGODB_URI}
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:5000/api/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+  frontend:
+    build:
+      context: .
+      dockerfile: client/Dockerfile
+    ports:
+      - "80:80"
+    depends_on:
+      - backend
+    environment:
+      - REACT_APP_API_URL=http://localhost:5000/api 

nginx.conf

@@ -0,0 +1,65 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    # Logging
+    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log /var/log/nginx/access.log main;
+    error_log /var/log/nginx/error.log;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_types
+        text/plain
+        text/css
+        text/xml
+        text/javascript
+        application/json
+        application/javascript
+        application/xml+rss
+        application/atom+xml
+        image/svg+xml;
+
+    server {
+        listen 80;
+        server_name localhost;
+        root /usr/share/nginx/html;
+        index index.html;
+
+        # Security headers
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        add_header X-XSS-Protection "1; mode=block" always;
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header Referrer-Policy "no-referrer-when-downgrade" always;
+        add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;
+
+        # Handle React Router
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+
+        # Cache static assets
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+        }
+
+        # Health check
+        location /health {
+            access_log off;
+            return 200 "healthy\n";
+            add_header Content-Type text/plain;
+        }
+    }
+} 

package-lock.json

@@ -0,0 +1,373 @@
+{
+  "name": "cultural-shift-sandbox",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "cultural-shift-sandbox",
+      "version": "1.0.0",
+      "license": "MIT",
+      "devDependencies": {
+        "concurrently": "^8.2.2"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.2.tgz",
+      "integrity": "sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/concurrently": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-8.2.2.tgz",
+      "integrity": "sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "date-fns": "^2.30.0",
+        "lodash": "^4.17.21",
+        "rxjs": "^7.8.1",
+        "shell-quote": "^1.8.1",
+        "spawn-command": "0.0.2",
+        "supports-color": "^8.1.1",
+        "tree-kill": "^1.2.2",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "conc": "dist/bin/concurrently.js",
+        "concurrently": "dist/bin/concurrently.js"
+      },
+      "engines": {
+        "node": "^14.13.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
+      }
+    },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/shell-quote": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
+      "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/spawn-command": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz",
+      "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==",
+      "dev": true
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "transcreation-sandbox",
+  "version": "1.0.0",
+  "description": "A web-based tool for postgraduate translation students to practice transcreation and intercultural mediation",
+  "main": "server/index.js",
+  "scripts": {
+    "dev": "concurrently \"npm run server\" \"npm run client\"",
+    "server": "cd server && npm run dev",
+    "client": "cd client && npm start",
+    "build": "cd client && npm run build",
+    "install-all": "npm install && cd server && npm install && cd ../client && npm install"
+  },
+  "keywords": ["translation", "transcreation", "cultural-mediation", "education"],
+      "author": "Transcreation Sandbox Team",
+  "license": "MIT",
+  "devDependencies": {
+    "concurrently": "^8.2.2"
+  }
+} 

server/.env.example

@@ -0,0 +1,16 @@
+# MongoDB Connection
+MONGODB_URI=mongodb://localhost:27017/transcreation-sandbox
+
+# JWT Secret
+JWT_SECRET=your-super-secret-jwt-key-change-this-in-production
+
+# Server Port
+PORT=5000
+
+# Environment
+NODE_ENV=development
+
+# Optional: External API Keys (for production)
+# REDDIT_API_KEY=your-reddit-api-key
+# TWITTER_API_KEY=your-twitter-api-key
+# TWITTER_API_SECRET=your-twitter-api-secret 

server/index.js

@@ -0,0 +1,224 @@
+const express = require('express');
+const cors = require('cors');
+const mongoose = require('mongoose');
+const dotenv = require('dotenv');
+const rateLimit = require('express-rate-limit');
+
+// Import routes
+const { router: authRoutes } = require('./routes/auth');
+const sourceTextRoutes = require('./routes/sourceTexts');
+const submissionRoutes = require('./routes/submissions');
+const searchRoutes = require('./routes/search');
+
+dotenv.config();
+
+// Global error handlers to prevent crashes
+process.on('uncaughtException', (error) => {
+  console.error('Uncaught Exception:', error);
+  // Don't exit immediately, try to log and continue
+  console.error('Stack trace:', error.stack);
+});
+
+process.on('unhandledRejection', (reason, promise) => {
+  console.error('Unhandled Rejection at:', promise, 'reason:', reason);
+  // Don't exit immediately, try to log and continue
+  console.error('Stack trace:', reason?.stack);
+});
+
+// Memory leak prevention
+process.on('warning', (warning) => {
+  console.warn('Node.js warning:', warning.name, warning.message);
+});
+
+const app = express();
+const PORT = process.env.PORT || 5000;
+
+// Trust proxy for rate limiting
+app.set('trust proxy', 1);
+
+// Rate limiting
+const limiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 100 // limit each IP to 100 requests per windowMs
+});
+
+// Middleware
+app.use(cors());
+app.use(express.json({ limit: '10mb' }));
+app.use(limiter);
+
+// Database connection with better error handling
+mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost:27017/transcreation-sandbox', {
+  maxPoolSize: 10,
+  serverSelectionTimeoutMS: 5000,
+  socketTimeoutMS: 45000,
+})
+.then(() => {
+  console.log('Connected to MongoDB');
+})
+.catch(err => {
+  console.error('MongoDB connection error:', err);
+  // Don't exit immediately, try to reconnect
+  setTimeout(() => {
+    console.log('Attempting to reconnect to MongoDB...');
+    mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost:27017/transcreation-sandbox');
+  }, 5000);
+});
+
+// Handle MongoDB connection errors
+mongoose.connection.on('error', (err) => {
+  console.error('MongoDB connection error:', err);
+});
+
+mongoose.connection.on('disconnected', () => {
+  console.log('MongoDB disconnected');
+});
+
+// Routes
+app.use('/api/auth', authRoutes);
+app.use('/api/source-texts', sourceTextRoutes);
+app.use('/api/submissions', submissionRoutes);
+app.use('/api/search', searchRoutes);
+
+// Health check endpoint
+app.get('/api/health', (req, res) => {
+  res.json({ status: 'OK', message: 'Transcreation Sandbox API is running' });
+});
+
+// Simple health check for Hugging Face Spaces
+app.get('/health', (req, res) => {
+  res.status(200).send('OK');
+});
+
+// Error handling middleware
+app.use((err, req, res, next) => {
+  console.error(err.stack);
+  res.status(500).json({ error: 'Something went wrong!' });
+});
+
+app.listen(PORT, () => {
+  console.log(`Server running on port ${PORT}`);
+  
+  // Initialize week 1 tutorial tasks and weekly practice by default
+  const initializeWeek1 = async () => {
+    try {
+      const SourceText = require('./models/SourceText');
+      
+      // Check if week 1 tutorial tasks exist
+      const existingTutorialTasks = await SourceText.find({ 
+        category: 'tutorial', 
+        weekNumber: 1 
+      });
+      
+      if (existingTutorialTasks.length === 0) {
+        console.log('Initializing week 1 tutorial tasks...');
+        const tutorialTasks = [
+          {
+            title: 'Tutorial Task 1 - Introduction',
+            content: 'The first paragraph of the source text introduces the main concept and sets the context for the entire piece. This section establishes the foundation upon which the rest of the text builds.',
+            category: 'tutorial',
+            weekNumber: 1,
+            sourceLanguage: 'English',
+            sourceCulture: 'Western',
+            translationBrief: 'The municipal government of Xiamen plans to launch an international campaign to attract foreign investors and tourists. As part of the campaign, they\'re commissioning an English translation of a Chinese booklet about the city\'s history of foreign trade and cultural exchange, in addition to its tourist attractions. You\'ve been provided with the following excerpt for a test translation. They are aware that certain elements in the source text might not work well when translated into English for promotional purposes. So you\'re given the license to make changes where appropriate, but a list of such changes should be provided for the reference of the commissioner.'
+          },
+          {
+            title: 'Tutorial Task 2 - Development',
+            content: 'The second paragraph develops the argument further, providing supporting evidence and examples that reinforce the main points established in the opening section.',
+            category: 'tutorial',
+            weekNumber: 1,
+            sourceLanguage: 'English',
+            sourceCulture: 'Western',
+            translationBrief: 'The municipal government of Xiamen plans to launch an international campaign to attract foreign investors and tourists. As part of the campaign, they\'re commissioning an English translation of a Chinese booklet about the city\'s history of foreign trade and cultural exchange, in addition to its tourist attractions. You\'ve been provided with the following excerpt for a test translation. They are aware that certain elements in the source text might not work well when translated into English for promotional purposes. So you\'re given the license to make changes where appropriate, but a list of such changes should be provided for the reference of the commissioner.'
+          },
+          {
+            title: 'Tutorial Task 3 - Conclusion',
+            content: 'The concluding paragraph brings together all the key elements discussed throughout the text, offering a synthesis of the main ideas and leaving the reader with a clear understanding of the central message.',
+            category: 'tutorial',
+            weekNumber: 1,
+            sourceLanguage: 'English',
+            sourceCulture: 'Western',
+            translationBrief: 'The municipal government of Xiamen plans to launch an international campaign to attract foreign investors and tourists. As part of the campaign, they\'re commissioning an English translation of a Chinese booklet about the city\'s history of foreign trade and cultural exchange, in addition to its tourist attractions. You\'ve been provided with the following excerpt for a test translation. They are aware that certain elements in the source text might not work well when translated into English for promotional purposes. So you\'re given the license to make changes where appropriate, but a list of such changes should be provided for the reference of the commissioner.'
+          }
+        ];
+        await SourceText.insertMany(tutorialTasks);
+        console.log('Week 1 tutorial tasks initialized successfully');
+      }
+      
+      // Check if week 1 weekly practice exists
+      const existingWeeklyPractice = await SourceText.find({ 
+        category: 'weekly-practice', 
+        weekNumber: 1 
+      });
+      
+      if (existingWeeklyPractice.length === 0) {
+        console.log('Initializing week 1 weekly practice...');
+        const weeklyPractice = [
+          {
+            title: 'Chinese Pun 1',
+            content: '为什么睡前一定要吃夜宵？因为这样才不会做饿梦。',
+            category: 'weekly-practice',
+            weekNumber: 1,
+            sourceLanguage: 'Chinese',
+            sourceCulture: 'Chinese'
+          },
+          {
+            title: 'Chinese Pun 2',
+            content: '女娲用什么补天？强扭的瓜。',
+            category: 'weekly-practice',
+            weekNumber: 1,
+            sourceLanguage: 'Chinese',
+            sourceCulture: 'Chinese'
+          },
+          {
+            title: 'English Pun 1',
+            content: 'Why do we drive on a parkway and park on a driveway?',
+            category: 'weekly-practice',
+            weekNumber: 1,
+            sourceLanguage: 'English',
+            sourceCulture: 'Western'
+          },
+          {
+            title: 'English Pun 2',
+            content: 'I can\'t believe I got fired from the calendar factory. All I did was take a day off.',
+            category: 'weekly-practice',
+            weekNumber: 1,
+            sourceLanguage: 'English',
+            sourceCulture: 'Western'
+          }
+        ];
+        await SourceText.insertMany(weeklyPractice);
+        console.log('Week 1 weekly practice initialized successfully');
+      }
+    } catch (error) {
+      console.error('Error initializing week 1 data:', error);
+    }
+  };
+  
+  initializeWeek1();
+});
+
+// Graceful shutdown
+process.on('SIGTERM', async () => {
+  console.log('SIGTERM received, shutting down gracefully');
+  try {
+    await mongoose.connection.close();
+    console.log('MongoDB connection closed');
+    process.exit(0);
+  } catch (error) {
+    console.error('Error closing MongoDB connection:', error);
+    process.exit(1);
+  }
+});
+
+process.on('SIGINT', async () => {
+  console.log('SIGINT received, shutting down gracefully');
+  try {
+    await mongoose.connection.close();
+    console.log('MongoDB connection closed');
+    process.exit(0);
+  } catch (error) {
+    console.error('Error closing MongoDB connection:', error);
+    process.exit(1);
+  }
+}); 

server/models/SourceText.js

@@ -0,0 +1,45 @@
+const mongoose = require('mongoose');
+
+const culturalElementSchema = new mongoose.Schema({
+  element: { type: String, required: true },
+  description: { type: String, required: true },
+  significance: { type: String, required: true }
+});
+
+const sourceTextSchema = new mongoose.Schema({
+  title: { type: String, required: true },
+  content: { type: String, required: true },
+  sourceLanguage: { type: String, required: true },
+
+  sourceType: { 
+    type: String, 
+    enum: ['api', 'manual', 'practice', 'tutorial', 'weekly-practice'], 
+    default: 'manual' 
+  },
+  category: {
+    type: String,
+    enum: ['practice', 'tutorial', 'weekly-practice'],
+    required: true
+  },
+  weekNumber: {
+    type: Number,
+    required: function() { return this.category !== 'practice'; }
+  },
+  translationBrief: { type: String },
+  culturalElements: [culturalElementSchema],
+  difficulty: { 
+    type: String, 
+    enum: ['beginner', 'intermediate', 'advanced'], 
+    default: 'intermediate' 
+  },
+  tags: [String],
+  targetCultures: [String],
+  isActive: { type: Boolean, default: true },
+  usageCount: { type: Number, default: 0 },
+  averageRating: { type: Number, default: 0 },
+  ratingCount: { type: Number, default: 0 }
+}, {
+  timestamps: true
+});
+
+module.exports = mongoose.model('SourceText', sourceTextSchema); 

server/models/Submission.js

@@ -0,0 +1,153 @@
+const mongoose = require('mongoose');
+
+const feedbackSchema = new mongoose.Schema({
+  userId: {
+    type: mongoose.Schema.Types.ObjectId,
+    ref: 'User',
+    required: true
+  },
+  comment: {
+    type: String,
+    required: true,
+    trim: true
+  },
+  rating: {
+    type: Number,
+    min: 1,
+    max: 5
+  },
+  createdAt: {
+    type: Date,
+    default: Date.now
+  }
+});
+
+const voteSchema = new mongoose.Schema({
+  userId: {
+    type: mongoose.Schema.Types.ObjectId,
+    ref: 'User',
+    required: true
+  },
+  rank: {
+    type: Number,
+    enum: [1, 2, 3], // 1 = 1st place, 2 = 2nd place, 3 = 3rd place
+    required: true
+  },
+  createdAt: {
+    type: Date,
+    default: Date.now
+  }
+});
+
+const submissionSchema = new mongoose.Schema({
+  sourceTextId: {
+    type: mongoose.Schema.Types.ObjectId,
+    ref: 'SourceText',
+    required: true
+  },
+  userId: {
+    type: mongoose.Schema.Types.ObjectId,
+    ref: 'User',
+    required: true
+  },
+  username: {
+    type: String,
+    required: true
+  },
+  groupNumber: {
+    type: Number,
+    min: 1,
+    max: 8,
+    required: function() {
+      // Group number is required for tutorial tasks, optional for other submissions
+      return this.sourceTextId && this.sourceTextId.category === 'tutorial';
+    }
+  },
+  targetCulture: {
+    type: String,
+    required: true
+  },
+  targetLanguage: {
+    type: String,
+    required: true
+  },
+  transcreation: {
+    type: String,
+    required: true
+  },
+  explanation: {
+    type: String,
+    required: true
+  },
+  culturalAdaptations: [{
+    type: String
+  }],
+  isAnonymous: {
+    type: Boolean,
+    default: true
+  },
+  status: {
+    type: String,
+    enum: ['draft', 'submitted', 'reviewed', 'approved', 'rejected'],
+    default: 'submitted'
+  },
+  difficulty: {
+    type: String,
+    enum: ['beginner', 'intermediate', 'advanced'],
+    default: 'intermediate'
+  },
+  votes: [voteSchema],
+  feedback: [{
+    userId: {
+      type: mongoose.Schema.Types.ObjectId,
+      ref: 'User'
+    },
+    comment: String,
+    createdAt: {
+      type: Date,
+      default: Date.now
+    }
+  }],
+  createdAt: {
+    type: Date,
+    default: Date.now
+  },
+  updatedAt: {
+    type: Date,
+    default: Date.now
+  }
+});
+
+// Calculate score based on votes (1st place = 3 points, 2nd place = 2 points, 3rd place = 1 point)
+submissionSchema.methods.calculateScore = function() {
+  return this.votes.reduce((total, vote) => {
+    const points = 4 - vote.rank; // 1st = 3 points, 2nd = 2 points, 3rd = 1 point
+    return total + points;
+  }, 0);
+};
+
+// Get vote count by rank
+submissionSchema.methods.getVoteCountByRank = function() {
+  const counts = { 1: 0, 2: 0, 3: 0 };
+  this.votes.forEach(vote => {
+    counts[vote.rank]++;
+  });
+  return counts;
+};
+
+// Update score before saving
+submissionSchema.pre('save', function(next) {
+  this.score = this.calculateScore();
+  this.updatedAt = Date.now();
+  next();
+});
+
+// Index for efficient querying
+submissionSchema.index({ 
+  sourceTextId: 1, 
+  targetCulture: 1, 
+  status: 1,
+  createdAt: -1 
+});
+
+module.exports = mongoose.model('Submission', submissionSchema); 

server/models/User.js

@@ -0,0 +1,65 @@
+const mongoose = require('mongoose');
+const bcrypt = require('bcryptjs');
+
+const userSchema = new mongoose.Schema({
+  username: {
+    type: String,
+    required: true,
+    unique: true,
+    trim: true,
+    minlength: 3
+  },
+  email: {
+    type: String,
+    required: true,
+    unique: true,
+    trim: true,
+    lowercase: true
+  },
+  password: {
+    type: String,
+    required: true,
+    minlength: 6
+  },
+  role: {
+    type: String,
+    enum: ['student', 'instructor', 'admin'],
+    default: 'student'
+  },
+  targetCultures: [{
+    type: String,
+    trim: true
+  }],
+  nativeLanguage: {
+    type: String,
+    trim: true
+  },
+  createdAt: {
+    type: Date,
+    default: Date.now
+  },
+  lastActive: {
+    type: Date,
+    default: Date.now
+  }
+});
+
+// Hash password before saving
+userSchema.pre('save', async function(next) {
+  if (!this.isModified('password')) return next();
+  
+  try {
+    const salt = await bcrypt.genSalt(10);
+    this.password = await bcrypt.hash(this.password, salt);
+    next();
+  } catch (error) {
+    next(error);
+  }
+});
+
+// Method to compare passwords
+userSchema.methods.comparePassword = async function(candidatePassword) {
+  return bcrypt.compare(candidatePassword, this.password);
+};
+
+module.exports = mongoose.model('User', userSchema); 

server/monitor.js

@@ -0,0 +1,49 @@
+const http = require('http');
+
+function checkServerHealth() {
+  const options = {
+    hostname: 'localhost',
+    port: 5000,
+    path: '/api/health',
+    method: 'GET',
+    timeout: 5000
+  };
+
+  const req = http.request(options, (res) => {
+    let data = '';
+    res.on('data', (chunk) => {
+      data += chunk;
+    });
+    res.on('end', () => {
+      try {
+        const response = JSON.parse(data);
+        if (response.status === 'OK') {
+          console.log(`[${new Date().toISOString()}] Server is healthy`);
+        } else {
+          console.error(`[${new Date().toISOString()}] Server returned unexpected status:`, response);
+        }
+      } catch (error) {
+        console.error(`[${new Date().toISOString()}] Failed to parse health check response:`, error);
+      }
+    });
+  });
+
+  req.on('error', (error) => {
+    console.error(`[${new Date().toISOString()}] Server health check failed:`, error.message);
+  });
+
+  req.on('timeout', () => {
+    console.error(`[${new Date().toISOString()}] Server health check timed out`);
+    req.destroy();
+  });
+
+  req.end();
+}
+
+// Check server health every 30 seconds
+setInterval(checkServerHealth, 30000);
+
+// Initial check
+checkServerHealth();
+
+console.log('Server monitoring started. Health checks every 30 seconds.'); 

server/package-lock.json

@@ -0,0 +1,2065 @@
+{
+  "name": "transcreation-sandbox-server",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "transcreation-sandbox-server",
+      "version": "1.0.0",
+      "dependencies": {
+        "axios": "^1.6.2",
+        "bcryptjs": "^2.4.3",
+        "cheerio": "^1.0.0-rc.12",
+        "cors": "^2.8.5",
+        "dotenv": "^16.3.1",
+        "express": "^4.18.2",
+        "express-rate-limit": "^7.1.5",
+        "express-validator": "^7.2.1",
+        "jsonwebtoken": "^9.0.2",
+        "mongoose": "^8.0.3",
+        "uuid": "^9.0.1"
+      },
+      "devDependencies": {
+        "nodemon": "^3.0.2"
+      }
+    },
+    "node_modules/@mongodb-js/saslprep": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@mongodb-js/saslprep/-/saslprep-1.3.0.tgz",
+      "integrity": "sha512-zlayKCsIjYb7/IdfqxorK5+xUMyi4vOKcFy10wKJYc63NSdKI8mNME+uJqfatkPmOSMMUiojrL58IePKBm3gvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "sparse-bitfield": "^3.0.3"
+      }
+    },
+    "node_modules/@types/webidl-conversions": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-7.0.3.tgz",
+      "integrity": "sha512-CiJJvcRtIgzadHCYXw7dqEnMNRjhGZlYK05Mj9OyktqV8uVT8fD2BFOB7S1uwBE3Kj2Z+4UyPmFw/Ixgw/LAlA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/whatwg-url": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/@types/whatwg-url/-/whatwg-url-11.0.5.tgz",
+      "integrity": "sha512-coYR071JRaHa+xoEvvYqvnIHaVqaYrLPbsufM9BF63HkwI5Lgmy2QR8Q5K/lYDYo5AK82wOvSOS0UsLTpTG7uQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/webidl-conversions": "*"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
+      "license": "MIT"
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz",
+      "integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/bcryptjs": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
+      "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ==",
+      "license": "MIT"
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.5",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.13.0",
+        "raw-body": "2.5.2",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/body-parser/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "license": "ISC"
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/bson": {
+      "version": "6.10.4",
+      "resolved": "https://registry.npmjs.org/bson/-/bson-6.10.4.tgz",
+      "integrity": "sha512-WIsKqkSC0ABoBJuT1LEX+2HEvNmNKKgnTAyd0fL8qzK4SH2i9NXg+t08YtdZp/V9IZ33cxe3iV4yM0qg8lMQng==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=16.20.1"
+      }
+    },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/cheerio": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.1.2.tgz",
+      "integrity": "sha512-IkxPpb5rS/d1IiLbHMgfPuS0FgiWTtFIm/Nj+2woXDLTZ7fOT2eqzgYbdMlLweqlHbsZjxEChoVK+7iph7jyQg==",
+      "license": "MIT",
+      "dependencies": {
+        "cheerio-select": "^2.1.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.2",
+        "encoding-sniffer": "^0.2.1",
+        "htmlparser2": "^10.0.0",
+        "parse5": "^7.3.0",
+        "parse5-htmlparser2-tree-adapter": "^7.1.0",
+        "parse5-parser-stream": "^7.1.2",
+        "undici": "^7.12.0",
+        "whatwg-mimetype": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=20.18.1"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-select": "^5.1.0",
+        "css-what": "^6.1.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
+      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
+      "license": "MIT"
+    },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "16.6.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
+      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/encoding-sniffer": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/encoding-sniffer/-/encoding-sniffer-0.2.1.tgz",
+      "integrity": "sha512-5gvq20T6vfpekVtqrYQsSCFZ1wEg5+wW0/QaZMWkFr6BqD3NfKs0rLCx4rrVlSWJeZb5NBJgVLswK/w2MWU+Gw==",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "whatwg-encoding": "^3.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/encoding-sniffer?sponsor=1"
+      }
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.20.3",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.7.1",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.3.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "merge-descriptors": "1.0.3",
+        "methods": "~1.1.2",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.12",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.13.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/express-rate-limit": {
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-7.5.1.tgz",
+      "integrity": "sha512-7iN8iPMDzOMHPUYllBEsQdWVB6fPDMPqwjBaFrgr4Jgr/+okjvzAy+UHlYYL/Vs0OsOrMkwS6PJDkFlJwoxUnw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/express-rate-limit"
+      },
+      "peerDependencies": {
+        "express": ">= 4.11"
+      }
+    },
+    "node_modules/express-validator": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/express-validator/-/express-validator-7.2.1.tgz",
+      "integrity": "sha512-CjNE6aakfpuwGaHQZ3m8ltCG2Qvivd7RHtVMS/6nVxOM7xVGqr4bhflsm4+N5FP5zI7Zxp+Hae+9RE+o8e3ZOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.21",
+        "validator": "~13.12.0"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.0.0.tgz",
+      "integrity": "sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.1",
+        "entities": "^6.0.0"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ignore-by-default": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+      "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jsonwebtoken": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
+      "integrity": "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "jws": "^3.2.2",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/jsonwebtoken/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/jwa": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.2.tgz",
+      "integrity": "sha512-eeH5JO+21J78qMvTIDdBXidBd6nG2kZjg5Ohz/1fpa28Z4CcsWUzJ1ZZyFq/3z3N17aZy+ZuBoHljASbL1WfOw==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal-constant-time": "^1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
+      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
+      "license": "MIT",
+      "dependencies": {
+        "jwa": "^1.4.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/kareem": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/kareem/-/kareem-2.6.3.tgz",
+      "integrity": "sha512-C3iHfuGUXK2u8/ipq9LfjFfXFxAZMQJJq7vLS45r3D9Y2xQ/m4S8zaR4zMLFWh9AsNPXmcFfUDhTEO8UIC/V6Q==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "license": "MIT"
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/memory-pager": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/memory-pager/-/memory-pager-1.5.0.tgz",
+      "integrity": "sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg==",
+      "license": "MIT"
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/mongodb": {
+      "version": "6.17.0",
+      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-6.17.0.tgz",
+      "integrity": "sha512-neerUzg/8U26cgruLysKEjJvoNSXhyID3RvzvdcpsIi2COYM3FS3o9nlH7fxFtefTb942dX3W9i37oPfCVj4wA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@mongodb-js/saslprep": "^1.1.9",
+        "bson": "^6.10.4",
+        "mongodb-connection-string-url": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=16.20.1"
+      },
+      "peerDependencies": {
+        "@aws-sdk/credential-providers": "^3.188.0",
+        "@mongodb-js/zstd": "^1.1.0 || ^2.0.0",
+        "gcp-metadata": "^5.2.0",
+        "kerberos": "^2.0.1",
+        "mongodb-client-encryption": ">=6.0.0 <7",
+        "snappy": "^7.2.2",
+        "socks": "^2.7.1"
+      },
+      "peerDependenciesMeta": {
+        "@aws-sdk/credential-providers": {
+          "optional": true
+        },
+        "@mongodb-js/zstd": {
+          "optional": true
+        },
+        "gcp-metadata": {
+          "optional": true
+        },
+        "kerberos": {
+          "optional": true
+        },
+        "mongodb-client-encryption": {
+          "optional": true
+        },
+        "snappy": {
+          "optional": true
+        },
+        "socks": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/mongodb-connection-string-url": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mongodb-connection-string-url/-/mongodb-connection-string-url-3.0.2.tgz",
+      "integrity": "sha512-rMO7CGo/9BFwyZABcKAWL8UJwH/Kc2x0g72uhDWzG48URRax5TCIcJ7Rc3RZqffZzO/Gwff/jyKwCU9TN8gehA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/whatwg-url": "^11.0.2",
+        "whatwg-url": "^14.1.0 || ^13.0.0"
+      }
+    },
+    "node_modules/mongoose": {
+      "version": "8.16.4",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.16.4.tgz",
+      "integrity": "sha512-jslgdQ8pY2vcNSKPv3Dbi5ogo/NT8zcvf6kPDyD8Sdsjsa1at3AFAF0F5PT+jySPGSPbvlNaQ49nT9h+Kx2UDA==",
+      "license": "MIT",
+      "dependencies": {
+        "bson": "^6.10.4",
+        "kareem": "2.6.3",
+        "mongodb": "~6.17.0",
+        "mpath": "0.9.0",
+        "mquery": "5.0.0",
+        "ms": "2.1.3",
+        "sift": "17.1.3"
+      },
+      "engines": {
+        "node": ">=16.20.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mongoose"
+      }
+    },
+    "node_modules/mongoose/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/mpath": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/mpath/-/mpath-0.9.0.tgz",
+      "integrity": "sha512-ikJRQTk8hw5DEoFVxHG1Gn9T/xcjtdnOKIU1JTmGjZZlg9LST2mBLmcX3/ICIbgJydT2GOc15RnNy5mHmzfSew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/mquery": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/mquery/-/mquery-5.0.0.tgz",
+      "integrity": "sha512-iQMncpmEK8R8ncT8HJGsGc9Dsp8xcgYMVSbs5jgnm1lFHTZqMJTUWTDx1LBO8+mK3tPNZWFLBghQEIOULSTHZg==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4.x"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/mquery/node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/mquery/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/nodemon": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.10.tgz",
+      "integrity": "sha512-WDjw3pJ0/0jMFmyNDp3gvY2YizjLmmOUQo6DEBY+JgdvW/yQ9mEeSw6H5ythl5Ny2ytb7f9C2nIbjSxMNzbJXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.5.2",
+        "debug": "^4",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^3.1.2",
+        "pstree.remy": "^1.1.8",
+        "semver": "^7.5.3",
+        "simple-update-notifier": "^2.0.0",
+        "supports-color": "^5.5.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.5"
+      },
+      "bin": {
+        "nodemon": "bin/nodemon.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nodemon"
+      }
+    },
+    "node_modules/nodemon/node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nodemon/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.1.0.tgz",
+      "integrity": "sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==",
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "^5.0.3",
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-parser-stream": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-7.1.2.tgz",
+      "integrity": "sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==",
+      "license": "MIT",
+      "dependencies": {
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5/node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
+      "license": "MIT"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
+    "node_modules/pstree.remy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.0.6"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/raw-body/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/send": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/serve-static": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.19.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/sift": {
+      "version": "17.1.3",
+      "resolved": "https://registry.npmjs.org/sift/-/sift-17.1.3.tgz",
+      "integrity": "sha512-Rtlj66/b0ICeFzYTuNvX/EF1igRbbnGSvEyT79McoZa/DeGhMyC5pWKOEsZKnpkqtSeovd5FL/bjHWC3CIIvCQ==",
+      "license": "MIT"
+    },
+    "node_modules/simple-update-notifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/sparse-bitfield": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
+      "integrity": "sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ==",
+      "license": "MIT",
+      "dependencies": {
+        "memory-pager": "^1.0.2"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/touch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz",
+      "integrity": "sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "nodetouch": "bin/nodetouch.js"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.1.1.tgz",
+      "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/undefsafe": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
+      "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/undici": {
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.12.0.tgz",
+      "integrity": "sha512-GrKEsc3ughskmGA9jevVlIOPMiiAHJ4OFUtaAH+NhfTUSiZ1wMPIQqQvAJUrJspFXJt3EBWgpAeoHEDVT1IBug==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/validator": {
+      "version": "13.12.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.12.0.tgz",
+      "integrity": "sha512-c1Q0mCiPlgdTVVVIJIrBuxNicYE+t/7oKeI9MWLj3fh/uq2Pxh/3eeWbVZ4OcGW1TUf53At0njHw5SMdA3tmMg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.2.0.tgz",
+      "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^5.1.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    }
+  }
+}

server/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "transcreation-sandbox-server",
+  "version": "1.0.0",
+  "description": "Backend server for Transcreation Sandbox",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js",
+    "dev": "nodemon index.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "cors": "^2.8.5",
+    "mongoose": "^8.0.3",
+    "dotenv": "^16.3.1",
+    "axios": "^1.6.2",
+    "cheerio": "^1.0.0-rc.12",
+    "uuid": "^9.0.1",
+    "bcryptjs": "^2.4.3",
+    "jsonwebtoken": "^9.0.2",
+    "express-rate-limit": "^7.1.5"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.2"
+  }
+} 

server/routes/auth.js

@@ -0,0 +1,783 @@
+const express = require('express');
+const router = express.Router();
+
+// Pre-defined users
+const PREDEFINED_USERS = {
+  'mche0278@student.monash.edu': { name: 'Michelle Chen', email: 'mche0278@student.monash.edu', role: 'student' },
+  'zfan0011@student.monash.edu': { name: 'Fang Zhou', email: 'zfan0011@student.monash.edu', role: 'student' },
+  'yfuu0071@student.monash.edu': { name: 'Fu Yitong', email: 'yfuu0071@student.monash.edu', role: 'student' },
+  'hhan0022@student.monash.edu': { name: 'Han Heyang', email: 'hhan0022@student.monash.edu', role: 'student' },
+  'ylei0024@student.monash.edu': { name: 'Lei Yang', email: 'ylei0024@student.monash.edu', role: 'student' },
+  'wlii0217@student.monash.edu': { name: 'Li Wenhui', email: 'wlii0217@student.monash.edu', role: 'student' },
+  'zlia0091@student.monash.edu': { name: 'Liao Zhixin', email: 'zlia0091@student.monash.edu', role: 'student' },
+  'hmaa0054@student.monash.edu': { name: 'Ma Huachen', email: 'hmaa0054@student.monash.edu', role: 'student' },
+  'csun0059@student.monash.edu': { name: 'Sun Chongkai', email: 'csun0059@student.monash.edu', role: 'student' },
+  'pwon0030@student.monash.edu': { name: 'Wong Prisca Si-Heng', email: 'pwon0030@student.monash.edu', role: 'student' },
+  'zxia0017@student.monash.edu': { name: 'Xia Zechen', email: 'zxia0017@student.monash.edu', role: 'student' },
+  'lyou0021@student.monash.edu': { name: 'You Lianxiang', email: 'lyou0021@student.monash.edu', role: 'student' },
+  'wzhe0034@student.monash.edu': { name: 'Zheng Weijie', email: 'wzhe0034@student.monash.edu', role: 'student' },
+  'szhe0055@student.monash.edu': { name: 'Zheng Siyuan', email: 'szhe0055@student.monash.edu', role: 'student' },
+  'xzhe0055@student.monash.edu': { name: 'Zheng Xiang', email: 'xzhe0055@student.monash.edu', role: 'student' },
+  'hongchang.yu@monash.edu': { name: 'Tristan', email: 'hongchang.yu@monash.edu', role: 'admin' }
+};
+
+// Middleware to verify token (simplified)
+const authenticateToken = (req, res, next) => {
+  const authHeader = req.headers['authorization'];
+  const token = authHeader && authHeader.split(' ')[1];
+
+  if (!token) {
+    return res.status(401).json({ error: 'Access token required' });
+  }
+
+  // For our simplified system, just check if token exists and has the right format
+  if (token.startsWith('user_') || token.startsWith('visitor_')) {
+    req.user = { token }; // We'll get user details from localStorage on frontend
+    next();
+  } else {
+    return res.status(403).json({ error: 'Invalid token' });
+  }
+};
+
+// Middleware to check if user is admin
+const requireAdmin = (req, res, next) => {
+  // In our simplified system, we'll check the user's role from the request body or headers
+  // The frontend will send the user role in the request
+  const userRole = req.headers['user-role'] || req.body.role;
+  
+  if (userRole !== 'admin') {
+    return res.status(403).json({ error: 'Admin access required' });
+  }
+  
+  next();
+};
+
+// Login endpoint (simplified)
+router.post('/login', async (req, res) => {
+  try {
+    const { email } = req.body;
+
+    // Check if email is in predefined users
+    const user = PREDEFINED_USERS[email];
+    
+    if (user) {
+      // For predefined users, create a simple token
+      const token = `user_${Date.now()}`;
+      res.json({
+        success: true,
+        token,
+        user: {
+          name: user.name,
+          email: user.email,
+          role: user.role
+        }
+      });
+    } else {
+      // For visitors, create a visitor account
+      const visitorUser = {
+        name: 'Visitor',
+        email: email,
+        role: 'visitor'
+      };
+      const token = `visitor_${Date.now()}`;
+      res.json({
+        success: true,
+        token,
+        user: visitorUser
+      });
+    }
+  } catch (error) {
+    console.error('Login error:', error);
+    res.status(500).json({ error: 'Login failed' });
+  }
+});
+
+// Get user profile
+router.get('/profile', authenticateToken, async (req, res) => {
+  try {
+    // For this simplified system, we'll return a basic profile
+    // The actual user data is stored in localStorage on the frontend
+    res.json({
+      success: true,
+      user: {
+        name: 'User',
+        email: 'user@example.com',
+        role: 'student'
+      }
+    });
+  } catch (error) {
+    console.error('Profile error:', error);
+    res.status(500).json({ error: 'Failed to get profile' });
+  }
+});
+
+// Admin endpoints
+// Get all users (admin only)
+router.get('/admin/users', authenticateToken, async (req, res) => {
+  try {
+    // In our simplified system, return predefined users
+    const users = Object.values(PREDEFINED_USERS);
+    res.json({
+      success: true,
+      users: users
+    });
+  } catch (error) {
+    console.error('Get users error:', error);
+    res.status(500).json({ error: 'Failed to get users' });
+  }
+});
+
+// Get system statistics (admin only)
+router.get('/admin/stats', authenticateToken, async (req, res) => {
+  try {
+    // Import models for statistics
+    const SourceText = require('../models/SourceText');
+    const Submission = require('../models/Submission');
+    
+    const stats = {
+      totalUsers: Object.keys(PREDEFINED_USERS).length,
+      practiceExamples: await SourceText.countDocuments({ sourceType: 'practice' }),
+      totalSubmissions: await Submission.countDocuments(),
+      activeSessions: 1 // Placeholder
+    };
+    
+    res.json({
+      success: true,
+      stats: stats
+    });
+  } catch (error) {
+    console.error('Get stats error:', error);
+    res.status(500).json({ error: 'Failed to get statistics' });
+  }
+});
+
+// Get all practice examples (admin only)
+router.get('/admin/practice-examples', authenticateToken, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    const examples = await SourceText.find({ sourceType: 'practice' }).sort({ createdAt: -1 });
+    
+    res.json({
+      success: true,
+      examples: examples
+    });
+  } catch (error) {
+    console.error('Get practice examples error:', error);
+    res.status(500).json({ error: 'Failed to get practice examples' });
+  }
+});
+
+// Add new practice example (admin only)
+router.post('/admin/practice-examples', authenticateToken, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    const { title, content, sourceLanguage, culturalElements, difficulty } = req.body;
+    
+    const newExample = new SourceText({
+      title,
+      content,
+      sourceLanguage,
+      sourceType: 'practice',
+      culturalElements: culturalElements || [],
+      difficulty: difficulty || 'intermediate'
+    });
+    
+    await newExample.save();
+    
+    res.status(201).json({
+      success: true,
+      message: 'Practice example added successfully',
+      example: newExample
+    });
+  } catch (error) {
+    console.error('Add practice example error:', error);
+    res.status(500).json({ error: 'Failed to add practice example' });
+  }
+});
+
+// Update practice example (admin only)
+router.put('/admin/practice-examples/:id', authenticateToken, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    const { title, content, sourceLanguage, culturalElements, difficulty } = req.body;
+    
+    const updatedExample = await SourceText.findByIdAndUpdate(
+      req.params.id,
+      {
+        title,
+        content,
+        sourceLanguage,
+        culturalElements: culturalElements || [],
+        difficulty: difficulty || 'intermediate'
+      },
+      { new: true, runValidators: true }
+    );
+    
+    if (!updatedExample) {
+      return res.status(404).json({ error: 'Practice example not found' });
+    }
+    
+    res.json({
+      success: true,
+      message: 'Practice example updated successfully',
+      example: updatedExample
+    });
+  } catch (error) {
+    console.error('Update practice example error:', error);
+    res.status(500).json({ error: 'Failed to update practice example' });
+  }
+});
+
+// Delete practice example (admin only)
+router.delete('/admin/practice-examples/:id', authenticateToken, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    
+    const deletedExample = await SourceText.findByIdAndDelete(req.params.id);
+    
+    if (!deletedExample) {
+      return res.status(404).json({ error: 'Practice example not found' });
+    }
+    
+    res.json({
+      success: true,
+      message: 'Practice example deleted successfully'
+    });
+  } catch (error) {
+    console.error('Delete practice example error:', error);
+    res.status(500).json({ error: 'Failed to delete practice example' });
+  }
+});
+
+// Add new user (admin only)
+router.post('/admin/users', authenticateToken, async (req, res) => {
+  try {
+    const { name, email, role } = req.body;
+    
+    // Validate required fields
+    if (!name || !email || !role) {
+      return res.status(400).json({ error: 'Name, email, and role are required' });
+    }
+    
+    // Check if user already exists
+    if (PREDEFINED_USERS[email]) {
+      return res.status(400).json({ error: 'User with this email already exists' });
+    }
+    
+    // Add to predefined users (in a real app, this would be saved to database)
+    PREDEFINED_USERS[email] = { name, email, role };
+    
+    res.status(201).json({
+      success: true,
+      message: 'User added successfully',
+      user: { name, email, role }
+    });
+  } catch (error) {
+    console.error('Add user error:', error);
+    res.status(500).json({ error: 'Failed to add user' });
+  }
+});
+
+// Update user (admin only)
+router.put('/admin/users/:email', authenticateToken, async (req, res) => {
+  try {
+    const { name, role } = req.body;
+    const email = req.params.email;
+    
+    // Check if user exists
+    if (!PREDEFINED_USERS[email]) {
+      return res.status(404).json({ error: 'User not found' });
+    }
+    
+    // Update user
+    PREDEFINED_USERS[email] = { 
+      ...PREDEFINED_USERS[email], 
+      name: name || PREDEFINED_USERS[email].name,
+      role: role || PREDEFINED_USERS[email].role
+    };
+    
+    res.json({
+      success: true,
+      message: 'User updated successfully',
+      user: PREDEFINED_USERS[email]
+    });
+  } catch (error) {
+    console.error('Update user error:', error);
+    res.status(500).json({ error: 'Failed to update user' });
+  }
+});
+
+// Delete user (admin only)
+router.delete('/admin/users/:email', authenticateToken, async (req, res) => {
+  try {
+    const email = req.params.email;
+    
+    // Check if user exists
+    if (!PREDEFINED_USERS[email]) {
+      return res.status(404).json({ error: 'User not found' });
+    }
+    
+    // Prevent deleting the admin user
+    if (email === 'hongchang.yu@monash.edu') {
+      return res.status(400).json({ error: 'Cannot delete the main admin user' });
+    }
+    
+    // Delete user
+    delete PREDEFINED_USERS[email];
+    
+    res.json({
+      success: true,
+      message: 'User deleted successfully'
+    });
+  } catch (error) {
+    console.error('Delete user error:', error);
+    res.status(500).json({ error: 'Failed to delete user' });
+  }
+});
+
+// ===== TUTORIAL TASKS MANAGEMENT =====
+
+// Get all tutorial tasks (admin only)
+router.get('/admin/tutorial-tasks', authenticateToken, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    
+    const tutorialTasks = await SourceText.find({ category: 'tutorial' })
+      .sort({ weekNumber: 1, createdAt: -1 });
+    
+    res.json({
+      success: true,
+      tutorialTasks
+    });
+  } catch (error) {
+    console.error('Get tutorial tasks error:', error);
+    res.status(500).json({ error: 'Failed to get tutorial tasks' });
+  }
+});
+
+// Add new tutorial task (admin only)
+router.post('/admin/tutorial-tasks', authenticateToken, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    const { title, content, sourceLanguage, sourceCulture, weekNumber, difficulty, culturalElements } = req.body;
+    
+    // Validate required fields
+    if (!title || !content || !sourceLanguage || !weekNumber) {
+      return res.status(400).json({ error: 'Title, content, sourceLanguage, and weekNumber are required' });
+    }
+    
+    const newTutorialTask = new SourceText({
+      title,
+      content,
+      sourceLanguage,
+      category: 'tutorial',
+      weekNumber: parseInt(weekNumber),
+      difficulty: difficulty || 'intermediate',
+      culturalElements: culturalElements || [],
+      sourceType: 'tutorial'
+    });
+    
+    const savedTask = await newTutorialTask.save();
+    
+    res.status(201).json({
+      success: true,
+      message: 'Tutorial task added successfully',
+      tutorialTask: savedTask
+    });
+  } catch (error) {
+    console.error('Add tutorial task error:', error);
+    res.status(500).json({ error: 'Failed to add tutorial task' });
+  }
+});
+
+// Update tutorial task (admin only)
+router.put('/admin/tutorial-tasks/:id', authenticateToken, requireAdmin, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    const { title, content, sourceLanguage, sourceCulture, weekNumber, difficulty, culturalElements } = req.body;
+    
+    const updatedTask = await SourceText.findByIdAndUpdate(
+      req.params.id,
+      {
+        title,
+        content,
+        sourceLanguage,
+        weekNumber: parseInt(weekNumber),
+        difficulty: difficulty || 'intermediate',
+        culturalElements: culturalElements || []
+      },
+      { new: true, runValidators: true }
+    );
+    
+    if (!updatedTask) {
+      return res.status(404).json({ error: 'Tutorial task not found' });
+    }
+    
+    res.json({
+      success: true,
+      message: 'Tutorial task updated successfully',
+      tutorialTask: updatedTask
+    });
+  } catch (error) {
+    console.error('Update tutorial task error:', error);
+    res.status(500).json({ error: 'Failed to update tutorial task' });
+  }
+});
+
+// Delete tutorial task (admin only)
+router.delete('/admin/tutorial-tasks/:id', authenticateToken, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    
+    const deletedTask = await SourceText.findByIdAndDelete(req.params.id);
+    
+    if (!deletedTask) {
+      return res.status(404).json({ error: 'Tutorial task not found' });
+    }
+    
+    res.json({
+      success: true,
+      message: 'Tutorial task deleted successfully'
+    });
+  } catch (error) {
+    console.error('Delete tutorial task error:', error);
+    res.status(500).json({ error: 'Failed to delete tutorial task' });
+  }
+});
+
+// ===== WEEKLY PRACTICE MANAGEMENT =====
+
+// Get all weekly practice tasks (admin only)
+router.get('/admin/weekly-practice', authenticateToken, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    
+    const weeklyPractice = await SourceText.find({ category: 'weekly-practice' })
+      .sort({ weekNumber: 1, createdAt: -1 });
+    
+    res.json({
+      success: true,
+      weeklyPractice
+    });
+  } catch (error) {
+    console.error('Get weekly practice error:', error);
+    res.status(500).json({ error: 'Failed to get weekly practice' });
+  }
+});
+
+// Add new weekly practice task (admin only)
+router.post('/admin/weekly-practice', authenticateToken, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    const { title, content, sourceLanguage, sourceCulture, weekNumber, difficulty, culturalElements } = req.body;
+    
+    // Validate required fields
+    if (!title || !content || !sourceLanguage || !weekNumber) {
+      return res.status(400).json({ error: 'Title, content, sourceLanguage, and weekNumber are required' });
+    }
+    
+    const newWeeklyPractice = new SourceText({
+      title,
+      content,
+      sourceLanguage,
+      category: 'weekly-practice',
+      weekNumber: parseInt(weekNumber),
+      difficulty: difficulty || 'intermediate',
+      culturalElements: culturalElements || [],
+      sourceType: 'weekly-practice'
+    });
+    
+    const savedPractice = await newWeeklyPractice.save();
+    
+    res.status(201).json({
+      success: true,
+      message: 'Weekly practice added successfully',
+      weeklyPractice: savedPractice
+    });
+  } catch (error) {
+    console.error('Add weekly practice error:', error);
+    res.status(500).json({ error: 'Failed to add weekly practice' });
+  }
+});
+
+// Create weekly practice task (admin only)
+router.post('/admin/weekly-practice', authenticateToken, requireAdmin, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    const { content, weekNumber, category } = req.body;
+    
+    // Validate required fields
+    if (!content || !weekNumber) {
+      return res.status(400).json({ error: 'Content and week number are required' });
+    }
+    
+    const newPractice = new SourceText({
+      content,
+      weekNumber: parseInt(weekNumber),
+      category: category || 'weekly-practice',
+      title: `Weekly Practice Week ${weekNumber}`,
+      sourceLanguage: 'English',
+      sourceType: 'weekly-practice'
+    });
+    
+    const savedPractice = await newPractice.save();
+    
+    res.status(201).json({
+      success: true,
+      message: 'Weekly practice created successfully',
+      practice: savedPractice
+    });
+  } catch (error) {
+    console.error('Create weekly practice error:', error);
+    res.status(500).json({ error: 'Failed to create weekly practice' });
+  }
+});
+
+// Update weekly practice task (admin only)
+router.put('/admin/weekly-practice/:id', authenticateToken, requireAdmin, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    const { title, content, sourceLanguage, sourceCulture, weekNumber, difficulty, culturalElements } = req.body;
+    
+    const updatedPractice = await SourceText.findByIdAndUpdate(
+      req.params.id,
+      {
+        title,
+        content,
+        sourceLanguage,
+        weekNumber: parseInt(weekNumber),
+        difficulty: difficulty || 'intermediate',
+        culturalElements: culturalElements || []
+      },
+      { new: true, runValidators: true }
+    );
+    
+    if (!updatedPractice) {
+      return res.status(404).json({ error: 'Weekly practice not found' });
+    }
+    
+    res.json({
+      success: true,
+      message: 'Weekly practice updated successfully',
+      weeklyPractice: updatedPractice
+    });
+  } catch (error) {
+    console.error('Update weekly practice error:', error);
+    res.status(500).json({ error: 'Failed to update weekly practice' });
+  }
+});
+
+// Delete weekly practice task (admin only)
+router.delete('/admin/weekly-practice/:id', authenticateToken, requireAdmin, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    
+    const deletedPractice = await SourceText.findByIdAndDelete(req.params.id);
+    
+    if (!deletedPractice) {
+      return res.status(404).json({ error: 'Weekly practice not found' });
+    }
+    
+    res.json({
+      success: true,
+      message: 'Weekly practice deleted successfully'
+    });
+  } catch (error) {
+    console.error('Delete weekly practice error:', error);
+    res.status(500).json({ error: 'Failed to delete weekly practice' });
+  }
+});
+
+// Create tutorial task (admin only)
+router.post('/admin/tutorial-tasks', authenticateToken, requireAdmin, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    const { content, weekNumber, category } = req.body;
+    
+    // Validate required fields
+    if (!content || !weekNumber) {
+      return res.status(400).json({ error: 'Content and week number are required' });
+    }
+    
+    const newTask = new SourceText({
+      content,
+      weekNumber: parseInt(weekNumber),
+      category: category || 'tutorial',
+      title: `Tutorial Task Week ${weekNumber}`,
+      sourceLanguage: 'English',
+      sourceType: 'tutorial'
+    });
+    
+    const savedTask = await newTask.save();
+    
+    res.status(201).json({
+      success: true,
+      message: 'Tutorial task created successfully',
+      task: savedTask
+    });
+  } catch (error) {
+    console.error('Create tutorial task error:', error);
+    res.status(500).json({ error: 'Failed to create tutorial task' });
+  }
+});
+
+// Update tutorial task (admin only)
+router.put('/admin/tutorial-tasks/:id', authenticateToken, requireAdmin, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    const { content, translationBrief, weekNumber } = req.body;
+    
+    const updatedTask = await SourceText.findByIdAndUpdate(
+      req.params.id,
+      {
+        content,
+        translationBrief,
+        weekNumber: parseInt(weekNumber)
+      },
+      { new: true, runValidators: true }
+    );
+    
+    if (!updatedTask) {
+      return res.status(404).json({ error: 'Tutorial task not found' });
+    }
+    
+    res.json({
+      success: true,
+      message: 'Tutorial task updated successfully',
+      task: updatedTask
+    });
+  } catch (error) {
+    console.error('Update tutorial task error:', error);
+    res.status(500).json({ error: 'Failed to update tutorial task' });
+  }
+});
+
+// Delete tutorial task (admin only)
+router.delete('/admin/tutorial-tasks/:id', authenticateToken, requireAdmin, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    
+    const deletedTask = await SourceText.findByIdAndDelete(req.params.id);
+    
+    if (!deletedTask) {
+      return res.status(404).json({ error: 'Tutorial task not found' });
+    }
+    
+    res.json({
+      success: true,
+      message: 'Tutorial task deleted successfully'
+    });
+  } catch (error) {
+    console.error('Delete tutorial task error:', error);
+    res.status(500).json({ error: 'Failed to delete tutorial task' });
+  }
+});
+
+// Add translation brief (admin only)
+router.post('/admin/translation-brief', authenticateToken, requireAdmin, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    const { weekNumber, translationBrief, type } = req.body;
+    
+    // Validate required fields
+    if (!weekNumber || !translationBrief || !type) {
+      return res.status(400).json({ error: 'Week number, translation brief, and type are required' });
+    }
+    
+    // Update all existing tasks of the specified type and week with the translation brief
+    const result = await SourceText.updateMany(
+      { 
+        category: type === 'tutorial' ? 'tutorial' : 'weekly-practice',
+        weekNumber: parseInt(weekNumber)
+      },
+      { translationBrief }
+    );
+    
+    if (result.modifiedCount === 0) {
+      return res.status(404).json({ error: 'No tasks found for the specified week and type' });
+    }
+    
+    res.json({
+      success: true,
+      message: `Translation brief added successfully to ${result.modifiedCount} tasks`,
+      modifiedCount: result.modifiedCount
+    });
+  } catch (error) {
+    console.error('Add translation brief error:', error);
+    res.status(500).json({ error: 'Failed to add translation brief' });
+  }
+});
+
+// Update tutorial brief (admin only)
+router.put('/admin/tutorial-brief/:weekNumber', authenticateToken, requireAdmin, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    const { translationBrief } = req.body;
+    const weekNumber = parseInt(req.params.weekNumber);
+    
+    // Validate required fields - allow empty string for removal
+    if (translationBrief === undefined || translationBrief === null) {
+      return res.status(400).json({ error: 'Translation brief is required' });
+    }
+    
+    // Update all tutorial tasks for the specified week with the new translation brief
+    const result = await SourceText.updateMany(
+      { 
+        category: 'tutorial',
+        weekNumber: weekNumber
+      },
+      { translationBrief }
+    );
+    
+    if (result.modifiedCount === 0) {
+      return res.status(404).json({ error: 'No tutorial tasks found for the specified week' });
+    }
+    
+    res.json({
+      success: true,
+      message: `Translation brief updated successfully for ${result.modifiedCount} tutorial tasks`,
+      modifiedCount: result.modifiedCount
+    });
+  } catch (error) {
+    console.error('Update tutorial brief error:', error);
+    res.status(500).json({ error: 'Failed to update translation brief' });
+  }
+});
+
+// Update weekly practice brief (admin only)
+router.put('/admin/weekly-brief/:weekNumber', authenticateToken, requireAdmin, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    const { translationBrief } = req.body;
+    const weekNumber = parseInt(req.params.weekNumber);
+    
+    // Validate required fields - allow empty string for removal
+    if (translationBrief === undefined || translationBrief === null) {
+      return res.status(400).json({ error: 'Translation brief is required' });
+    }
+    
+    // Update all weekly practice tasks for the specified week with the new translation brief
+    const result = await SourceText.updateMany(
+      { 
+        category: 'weekly-practice',
+        weekNumber: weekNumber
+      },
+      { translationBrief }
+    );
+    
+    if (result.modifiedCount === 0) {
+      return res.status(404).json({ error: 'No weekly practice tasks found for the specified week' });
+    }
+    
+    res.json({
+      success: true,
+      message: `Translation brief updated successfully for ${result.modifiedCount} weekly practice tasks`,
+      modifiedCount: result.modifiedCount
+    });
+  } catch (error) {
+    console.error('Update weekly practice brief error:', error);
+    res.status(500).json({ error: 'Failed to update translation brief' });
+  }
+});
+
+module.exports = { router, authenticateToken }; 

server/routes/search.js

@@ -0,0 +1,206 @@
+const express = require('express');
+const router = express.Router();
+const { authenticateToken } = require('./auth');
+
+// Get practice examples (now weekly practice for week 1)
+router.get('/practice-examples', authenticateToken, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    const examples = await SourceText.find({ 
+      category: 'weekly-practice',
+      weekNumber: 1 
+    }).sort({ createdAt: 1 });
+    
+    res.json(examples);
+  } catch (error) {
+    console.error('Get practice examples error:', error);
+    res.status(500).json({ error: 'Failed to get practice examples' });
+  }
+});
+
+// Get tutorial tasks by week
+router.get('/tutorial-tasks/:week', authenticateToken, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    const weekNumber = parseInt(req.params.week);
+    
+    const tasks = await SourceText.find({ 
+      category: 'tutorial',
+      weekNumber: weekNumber 
+    }).sort({ title: 1 });
+    
+    res.json(tasks);
+  } catch (error) {
+    console.error('Get tutorial tasks error:', error);
+    res.status(500).json({ error: 'Failed to get tutorial tasks' });
+  }
+});
+
+// Get weekly practice by week
+router.get('/weekly-practice/:week', authenticateToken, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    const weekNumber = parseInt(req.params.week);
+    
+    const practice = await SourceText.find({ 
+      category: 'weekly-practice',
+      weekNumber: weekNumber 
+    }).sort({ title: 1 });
+    
+    res.json(practice);
+  } catch (error) {
+    console.error('Get weekly practice error:', error);
+    res.status(500).json({ error: 'Failed to get weekly practice' });
+  }
+});
+
+// Initialize practice examples (convert to weekly practice week 1)
+router.post('/initialize-practice-examples', authenticateToken, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    
+    // Clear existing practice examples
+    await SourceText.deleteMany({ category: 'weekly-practice', weekNumber: 1 });
+    
+    const practiceExamples = [
+      {
+        content: '为什么睡前一定要吃夜宵？因为这样才不会做饿梦。',
+        category: 'weekly-practice',
+        weekNumber: 1
+      },
+      {
+        content: '女娲用什么补天？强扭的瓜。',
+        category: 'weekly-practice',
+        weekNumber: 1
+      },
+      {
+        content: '你知道如何区分真假大象吗？把他们仍进水中，真相会浮出水面的。',
+        category: 'weekly-practice',
+        weekNumber: 1
+      },
+      {
+        content: 'What if Soy milk is just regular milk introducing itself in Spanish.',
+        category: 'weekly-practice',
+        weekNumber: 1
+      },
+      {
+        content: 'I can\'t believe I got fired from the calendar factory. All I did was take a day off.',
+        category: 'weekly-practice',
+        weekNumber: 1
+      },
+      {
+        content: 'When life gives you melons, you might be dyslexic.',
+        category: 'weekly-practice',
+        weekNumber: 1
+      }
+    ];
+
+    await SourceText.insertMany(practiceExamples);
+    
+    res.json({ 
+      success: true, 
+      message: 'Practice examples initialized successfully',
+      count: practiceExamples.length
+    });
+  } catch (error) {
+    console.error('Initialize practice examples error:', error);
+    res.status(500).json({ error: 'Failed to initialize practice examples' });
+  }
+});
+
+// Initialize tutorial tasks for a specific week
+router.post('/initialize-tutorial-tasks/:week', authenticateToken, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    const weekNumber = parseInt(req.params.week);
+    
+    // Clear existing tutorial tasks for this week
+    await SourceText.deleteMany({ category: 'tutorial', weekNumber: weekNumber });
+    
+    // Example tutorial tasks (you can customize these)
+    const tutorialTasks = [
+      {
+        title: `Tutorial Task 1 - Week ${weekNumber}`,
+        content: 'The first paragraph of the source text introduces the main concept and sets the context for the entire piece. This section establishes the foundation upon which the rest of the text builds.',
+        category: 'tutorial',
+        weekNumber: weekNumber,
+        sourceLanguage: 'English',
+        sourceCulture: 'Western',
+        translationBrief: weekNumber === 1 ? 'The municipal government of Xiamen plans to launch an international campaign to attract foreign investors and tourists. As part of the campaign, they\'re commissioning an English translation of a Chinese booklet about the city\'s history of foreign trade and cultural exchange, in addition to its tourist attractions. You\'ve been provided with the following excerpt for a test translation. They are aware that certain elements in the source text might not work well when translated into English for promotional purposes. So you\'re given the license to make changes where appropriate, but a list of such changes should be provided for the reference of the commissioner.' : 'Translate this text while maintaining the original tone and style. Pay attention to cultural nuances and ensure the translation is appropriate for the target audience. Focus on conveying the meaning accurately while preserving the author\'s intent.'
+      },
+      {
+        title: `Tutorial Task 2 - Week ${weekNumber}`,
+        content: 'The second paragraph develops the argument further, providing supporting evidence and examples that reinforce the main points established in the opening section.',
+        category: 'tutorial',
+        weekNumber: weekNumber,
+        sourceLanguage: 'English',
+        sourceCulture: 'Western',
+        translationBrief: weekNumber === 1 ? 'The municipal government of Xiamen plans to launch an international campaign to attract foreign investors and tourists. As part of the campaign, they\'re commissioning an English translation of a Chinese booklet about the city\'s history of foreign trade and cultural exchange, in addition to its tourist attractions. You\'ve been provided with the following excerpt for a test translation. They are aware that certain elements in the source text might not work well when translated into English for promotional purposes. So you\'re given the license to make changes where appropriate, but a list of such changes should be provided for the reference of the commissioner.' : 'Translate this text while maintaining the original tone and style. Pay attention to cultural nuances and ensure the translation is appropriate for the target audience. Focus on conveying the meaning accurately while preserving the author\'s intent.'
+      },
+      {
+        title: `Tutorial Task 3 - Week ${weekNumber}`,
+        content: 'The concluding paragraph brings together all the key elements discussed throughout the text, offering a synthesis of the main ideas and leaving the reader with a clear understanding of the central message.',
+        category: 'tutorial',
+        weekNumber: weekNumber,
+        sourceLanguage: 'English',
+        sourceCulture: 'Western',
+        translationBrief: weekNumber === 1 ? 'The municipal government of Xiamen plans to launch an international campaign to attract foreign investors and tourists. As part of the campaign, they\'re commissioning an English translation of a Chinese booklet about the city\'s history of foreign trade and cultural exchange, in addition to its tourist attractions. You\'ve been provided with the following excerpt for a test translation. They are aware that certain elements in the source text might not work well when translated into English for promotional purposes. So you\'re given the license to make changes where appropriate, but a list of such changes should be provided for the reference of the commissioner.' : 'Translate this text while maintaining the original tone and style. Pay attention to cultural nuances and ensure the translation is appropriate for the target audience. Focus on conveying the meaning accurately while preserving the author\'s intent.'
+      }
+    ];
+
+    await SourceText.insertMany(tutorialTasks);
+    
+    res.json({ 
+      success: true, 
+      message: `Tutorial tasks for week ${weekNumber} initialized successfully`,
+      count: tutorialTasks.length
+    });
+  } catch (error) {
+    console.error('Initialize tutorial tasks error:', error);
+    res.status(500).json({ error: 'Failed to initialize tutorial tasks' });
+  }
+});
+
+// Initialize weekly practice for a specific week
+router.post('/initialize-weekly-practice/:week', authenticateToken, async (req, res) => {
+  try {
+    const SourceText = require('../models/SourceText');
+    const weekNumber = parseInt(req.params.week);
+    
+    // Clear existing weekly practice for this week
+    await SourceText.deleteMany({ category: 'weekly-practice', weekNumber: weekNumber });
+    
+    // Example weekly practice (you can customize these)
+    const weeklyPractice = [
+      {
+        title: `Weekly Practice 1 - Week ${weekNumber}`,
+        content: 'This is a sample weekly practice example for week ' + weekNumber + '.',
+        category: 'weekly-practice',
+        weekNumber: weekNumber,
+        sourceLanguage: 'English',
+        sourceCulture: 'Western'
+      },
+      {
+        title: `Weekly Practice 2 - Week ${weekNumber}`,
+        content: 'Another sample weekly practice example for week ' + weekNumber + '.',
+        category: 'weekly-practice',
+        weekNumber: weekNumber,
+        sourceLanguage: 'English',
+        sourceCulture: 'Western'
+      }
+    ];
+
+    await SourceText.insertMany(weeklyPractice);
+    
+    res.json({ 
+      success: true, 
+      message: `Weekly practice for week ${weekNumber} initialized successfully`,
+      count: weeklyPractice.length
+    });
+  } catch (error) {
+    console.error('Initialize weekly practice error:', error);
+    res.status(500).json({ error: 'Failed to initialize weekly practice' });
+  }
+});
+
+module.exports = router;