بناء تطبيق متكامل باستخدام Appwrite Cloud و Next.js 15

npx create-next-app@latest bookmark-manager --typescript --tailwind --app --src-dir --eslint
cd bookmark-manager

npm install appwrite node-appwrite

NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
NEXT_PUBLIC_APPWRITE_PROJECT_ID=your-project-id
APPWRITE_API_KEY=your-api-key

// src/lib/appwrite/client.ts
import { Client, Account, Databases, Storage } from "appwrite";
 
const client = new Client()
  .setEndpoint(process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT!)
  .setProject(process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID!);
 
export const account = new Account(client);
export const databases = new Databases(client);
export const storage = new Storage(client);
export { client };

// src/lib/appwrite/server.ts
import { Client, Databases, Storage, Users } from "node-appwrite";
 
export function createAdminClient() {
  const client = new Client()
    .setEndpoint(process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT!)
    .setProject(process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID!)
    .setKey(process.env.APPWRITE_API_KEY!);
 
  return {
    databases: new Databases(client),
    storage: new Storage(client),
    users: new Users(client),
  };
}
 
export function createSessionClient(session: string) {
  const client = new Client()
    .setEndpoint(process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT!)
    .setProject(process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID!)
    .setSession(session);
 
  return {
    account: new Account(client),
    databases: new Databases(client),
  };
}

// src/lib/appwrite/config.ts
export const DATABASE_ID = "bookmark_db";
export const BOOKMARKS_COLLECTION_ID = "bookmarks";
export const THUMBNAILS_BUCKET_ID = "thumbnails";

// src/lib/auth/context.tsx
"use client";
 
import { createContext, useContext, useEffect, useState } from "react";
import { account } from "@/lib/appwrite/client";
import { Models } from "appwrite";
 
type AuthContextType = {
  user: Models.User<Models.Preferences> | null;
  loading: boolean;
  login: (provider: "google" | "github") => void;
  logout: () => Promise<void>;
};
 
const AuthContext = createContext<AuthContextType | null>(null);
 
export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<Models.User<Models.Preferences> | null>(null);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    checkUser();
  }, []);
 
  async function checkUser() {
    try {
      const currentUser = await account.get();
      setUser(currentUser);
    } catch {
      setUser(null);
    } finally {
      setLoading(false);
    }
  }
 
  function login(provider: "google" | "github") {
    const redirectUrl = `${window.location.origin}/auth/callback`;
    const failureUrl = `${window.location.origin}/auth/failure`;
    account.createOAuth2Session(provider, redirectUrl, failureUrl);
  }
 
  async function logout() {
    await account.deleteSession("current");
    setUser(null);
  }
 
  return (
    <AuthContext.Provider value={{ user, loading, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}
 
export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) throw new Error("useAuth must be used within AuthProvider");
  return context;
}

// src/app/auth/callback/page.tsx
import { redirect } from "next/navigation";
 
export default function AuthCallback() {
  redirect("/dashboard");
}

// src/app/login/page.tsx
"use client";
 
import { useAuth } from "@/lib/auth/context";
 
export default function LoginPage() {
  const { login, loading, user } = useAuth();
 
  if (loading) return <div className="flex justify-center p-8">جارٍ التحميل...</div>;
  if (user) return redirect("/dashboard");
 
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="max-w-md w-full space-y-8 p-8 bg-white rounded-xl shadow-lg">
        <div className="text-center">
          <h1 className="text-3xl font-bold text-gray-900">مدير الإشارات المرجعية</h1>
          <p className="mt-2 text-gray-600">سجّل دخولك لإدارة إشاراتك المرجعية</p>
        </div>
 
        <div className="space-y-4">
          <button
            onClick={() => login("google")}
            className="w-full flex items-center justify-center gap-3 px-4 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition"
          >
            <span>المتابعة مع Google</span>
          </button>
 
          <button
            onClick={() => login("github")}
            className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition"
          >
            <span>المتابعة مع GitHub</span>
          </button>
        </div>
      </div>
    </div>
  );
}

// src/lib/actions/bookmarks.ts
"use server";
 
import { createAdminClient } from "@/lib/appwrite/server";
import { DATABASE_ID, BOOKMARKS_COLLECTION_ID } from "@/lib/appwrite/config";
import { ID, Query } from "node-appwrite";
import { revalidatePath } from "next/cache";
 
export type Bookmark = {
  $id: string;
  url: string;
  title: string;
  description: string;
  tags: string[];
  thumbnailId: string | null;
  favicon: string;
  userId: string;
  isPublic: boolean;
  createdAt: string;
};
 
export async function createBookmark(formData: FormData) {
  const { databases } = createAdminClient();
 
  const url = formData.get("url") as string;
  const title = formData.get("title") as string;
  const description = formData.get("description") as string;
  const tags = (formData.get("tags") as string)
    .split(",")
    .map((t) => t.trim())
    .filter(Boolean);
  const userId = formData.get("userId") as string;
  const isPublic = formData.get("isPublic") === "true";
 
  const bookmark = await databases.createDocument(
    DATABASE_ID,
    BOOKMARKS_COLLECTION_ID,
    ID.unique(),
    {
      url,
      title,
      description,
      tags,
      userId,
      isPublic,
      favicon: `https://www.google.com/s2/favicons?domain=${new URL(url).hostname}&sz=32`,
      createdAt: new Date().toISOString(),
    }
  );
 
  revalidatePath("/dashboard");
  return bookmark;
}
 
export async function getBookmarks(userId: string) {
  const { databases } = createAdminClient();
 
  const response = await databases.listDocuments(
    DATABASE_ID,
    BOOKMARKS_COLLECTION_ID,
    [
      Query.equal("userId", userId),
      Query.orderDesc("createdAt"),
      Query.limit(50),
    ]
  );
 
  return response.documents as unknown as Bookmark[];
}
 
export async function deleteBookmark(bookmarkId: string) {
  const { databases } = createAdminClient();
 
  await databases.deleteDocument(
    DATABASE_ID,
    BOOKMARKS_COLLECTION_ID,
    bookmarkId
  );
 
  revalidatePath("/dashboard");
}

// src/components/BookmarkCard.tsx
"use client";
 
import { Bookmark, deleteBookmark } from "@/lib/actions/bookmarks";
import { useState } from "react";
 
export function BookmarkCard({ bookmark }: { bookmark: Bookmark }) {
  const [isDeleting, setIsDeleting] = useState(false);
 
  async function handleDelete() {
    if (!confirm("هل تريد حذف هذه الإشارة؟")) return;
    setIsDeleting(true);
    await deleteBookmark(bookmark.$id);
  }
 
  return (
    <div className="bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition group">
      <div className="flex items-start gap-3">
        <img src={bookmark.favicon} alt="" className="w-6 h-6 mt-1 rounded" loading="lazy" />
        <div className="flex-1 min-w-0">
          <a
            href={bookmark.url}
            target="_blank"
            rel="noopener noreferrer"
            className="text-blue-600 hover:text-blue-800 font-medium truncate block"
          >
            {bookmark.title}
          </a>
          {bookmark.description && (
            <p className="text-sm text-gray-500 mt-1 line-clamp-2">{bookmark.description}</p>
          )}
          <div className="flex items-center gap-2 mt-2">
            {bookmark.tags.map((tag) => (
              <span key={tag} className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-700">
                {tag}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// src/components/AddBookmarkForm.tsx
"use client";
 
import { createBookmark } from "@/lib/actions/bookmarks";
import { useAuth } from "@/lib/auth/context";
import { useState } from "react";
 
export function AddBookmarkForm() {
  const { user } = useAuth();
  const [isOpen, setIsOpen] = useState(false);
 
  if (!user) return null;
 
  return (
    <div>
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
      >
        + إضافة إشارة
      </button>
 
      {isOpen && (
        <form
          action={async (formData) => {
            formData.set("userId", user.$id);
            await createBookmark(formData);
            setIsOpen(false);
          }}
          className="mt-4 bg-white rounded-lg border border-gray-200 p-6 space-y-4"
        >
          <div>
            <label className="block text-sm font-medium text-gray-700">الرابط</label>
            <input name="url" type="url" required placeholder="https://example.com" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm" />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">العنوان</label>
            <input name="title" required placeholder="عنوان الصفحة" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm" />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">الوصف</label>
            <textarea name="description" rows={2} placeholder="وصف مختصر (اختياري)" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm" />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">الوسوم</label>
            <input name="tags" placeholder="react, nextjs, tutorial (مفصولة بفواصل)" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm" />
          </div>
          <div className="flex items-center gap-2">
            <input name="isPublic" type="checkbox" value="true" id="isPublic" />
            <label htmlFor="isPublic" className="text-sm text-gray-700">جعل الإشارة عامة</label>
          </div>
          <div className="flex gap-3">
            <button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">حفظ</button>
            <button type="button" onClick={() => setIsOpen(false)} className="px-4 py-2 text-gray-600 hover:text-gray-800">إلغاء</button>
          </div>
        </form>
      )}
    </div>
  );
}

// src/lib/actions/storage.ts
"use server";
 
import { createAdminClient } from "@/lib/appwrite/server";
import { THUMBNAILS_BUCKET_ID } from "@/lib/appwrite/config";
import { ID } from "node-appwrite";
 
export async function uploadThumbnail(formData: FormData) {
  const { storage } = createAdminClient();
  const file = formData.get("file") as File;
 
  if (!file || file.size === 0) return null;
 
  const response = await storage.createFile(
    THUMBNAILS_BUCKET_ID,
    ID.unique(),
    file
  );
 
  return response.$id;
}

// src/hooks/useRealtimeBookmarks.ts
"use client";
 
import { useEffect } from "react";
import { client } from "@/lib/appwrite/client";
import { DATABASE_ID, BOOKMARKS_COLLECTION_ID } from "@/lib/appwrite/config";
import { Bookmark } from "@/lib/actions/bookmarks";
 
export function useRealtimeBookmarks(
  userId: string,
  onUpdate: (bookmarks: Bookmark[]) => void,
  currentBookmarks: Bookmark[]
) {
  useEffect(() => {
    const channel = `databases.${DATABASE_ID}.collections.${BOOKMARKS_COLLECTION_ID}.documents`;
 
    const unsubscribe = client.subscribe(channel, (response) => {
      const { events, payload } = response as any;
 
      if (payload.userId !== userId) return;
 
      let updated = [...currentBookmarks];
 
      if (events.some((e: string) => e.includes(".create"))) {
        updated = [payload, ...updated];
      } else if (events.some((e: string) => e.includes(".update"))) {
        updated = updated.map((b) => (b.$id === payload.$id ? payload : b));
      } else if (events.some((e: string) => e.includes(".delete"))) {
        updated = updated.filter((b) => b.$id !== payload.$id);
      }
 
      onUpdate(updated);
    });
 
    return () => unsubscribe();
  }, [userId, currentBookmarks, onUpdate]);
}

// src/middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
 
export function middleware(request: NextRequest) {
  const session = request.cookies.get("a_session");
  const isAuthPage = request.nextUrl.pathname.startsWith("/login");
  const isDashboard = request.nextUrl.pathname.startsWith("/dashboard");
 
  if (isDashboard && !session) {
    return NextResponse.redirect(new URL("/login", request.url));
  }
 
  if (isAuthPage && session) {
    return NextResponse.redirect(new URL("/dashboard", request.url));
  }
 
  return NextResponse.next();
}
 
export const config = {
  matcher: ["/dashboard/:path*", "/login"],
};