-
المساهمات
921 -
تاريخ الانضمام
-
تاريخ آخر زيارة
-
عدد الأيام التي تصدر بها
37
نوع المحتوى
ريادة الأعمال
البرمجة
التصميم
DevOps
التسويق والمبيعات
العمل الحر
البرامج والتطبيقات
آخر التحديثات
قصص نجاح
أسئلة وأجوبة
كتب
دورات
كل منشورات العضو Zen Eddin Allaham
-
هي ب نسبة ل رابط ريندر لكنه لا يعمل مع مشروعي https://www-movies-app.netlify.app/ هاد رابط مستودع https://github.com/ZenZN99/Movies-App import React, { useEffect, useState } from "react"; import "./register.css"; import toast from "react-hot-toast"; import { useNavigate } from "react-router-dom"; import AOS from "aos"; import "aos/dist/aos.css"; const Register = () => { const [form, setForm] = useState({ username: "", email: "", password: "", }); const [error, setError] = useState(""); const [loading, setLoading] = useState(false); const navigate = useNavigate(); const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { setForm({ ...form, [e.target.name]: e.target.value }); }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setLoading(true); setError(""); try { const res = await fetch("https://movies-app-2-19xd.onrender.com/api/auth/register", { method: "post", headers: { "Content-Type": "application/json", }, body: JSON.stringify(form), }); const data = await res.json(); if (!res.ok) { setError(data.error || "Something went wrong!"); } else { localStorage.setItem("token", data.token); localStorage.setItem("username", data.user.username); toast.success(`Welcome ${data.user.username}`); setForm({ username: "", email: "", password: "" }); navigate("/"); } } catch (error) { console.log(error); setError("Network error. Please try again later."); } finally { setLoading(false); } }; useEffect(() => { if (error) { const timer = setTimeout(() => { setError(""); }, 5000); return () => clearTimeout(timer); } }, [error]); useEffect(() => { const token = localStorage.getItem("token"); if (token) { navigate("/"); toast("You are logged in with action", {duration:3000}); return; } }, []); useEffect(() => { AOS.init({ duration: 2000 }); }, []); return ( <div className="register-container" data-aos="fade-up"> <div className="register-wrapper"> <div className="register-card"> <h1 className="register-title">Create Account</h1> <p className="register-subtitle">Join our community today</p> <form onSubmit={handleSubmit} className="register-form"> {error && <p className="error-message">{error}</p>} <input type="text" name="username" placeholder="Username" value={form.username} onChange={handleChange} required /> <input type="email" name="email" placeholder="Email Address" value={form.email} onChange={handleChange} required /> <input type="password" name="password" placeholder="Password" value={form.password} onChange={handleChange} required /> <button type="submit" className="register-btn"> {loading ? "Creating an account..." : "Register"} </button> </form> <p className="register-footer"> Already have an account? <a href="/login">Login</a> </p> </div> </div> </div> ); }; export default Register; import express from "express"; import dotenv from "dotenv"; import userRouter from "./routes/user.route"; import cors from "cors"; dotenv.config(); const app = express(); const port = process.env.PORT || 3000; app.use( cors({ origin: "https://www-movies-app.netlify.app", credentials: true, }) ); app.use(express.json()); app.use("/api/auth", userRouter); app.get("/", (req, res) => { res.send("Hello Bun!"); }); app.listen(port, () => { console.log(`Server is running on port ${port}`); });
-
log في ريندر مافيه اي مشاكل ورابط شغال لكن عند استخدامه في fetch لا يعمل وحتى مع app.use(cors());
-
الخادم يعمل بشكل سليم ولا يوجد أي مشاكل فيه لكن عند رفعه على الريندر توقف الخادم مع اني كل خطوات التي نفذتها صحيحة
-
اول شي رفعت اكواد على جيت هب وبعدين رفعت على ريندر وحصلت رابط واستخدمته في fetch وعدلت كورس app.use( cors({ origin: "https://www-movies-app.netlify.app", credentials: true, }) );ورجعت رفعت على ريندر واخدت رابط وستخدمه في fetch بدل من رابط ريندر قديم ورجعت رفعت مشروع رياكت https:www-movies-app.netlify.app بنفس رابط ولم يعمل خادم import express from "express"; import dotenv from "dotenv"; import userRouter from "./routes/user.route"; import cors from "cors"; dotenv.config(); const app = express(); const port = process.env.PORT || 3000; app.use( cors({ origin: "https://www-movies-app.netlify.app", credentials: true, }) ); app.use(express.json()); app.use("/api/auth", userRouter); app.get("/", (req, res) => { res.send("Hello Bun!"); }); app.listen(port, () => { console.log(`Server is running on port ${port}`); });
- 7 اجابة
-
- 1
-
-
انا بعرف Node js JavaScript ومتقنهم شو لغة يلي لح تخليني Back end engineer Java - Golang - python - rust - cpp
- 5 اجابة
-
- 1
-
-
انا صراحة تعبت من Front end و حابب ان اكون Back End developer من خلال Node.js bun.js python golang java هل اذا تركت فرونت اند سيضر بي سببي لترك فرونت اند هو لان فرونت اند ممل و متعب اما باك اند مريح ويوجد تعامل مع برمجة ب كامل
- 5 اجابة
-
- 4
-
-
- 5 اجابة
-
- 3
-
-
انا سويت مشاريع فول ستاك وهم Todolist App - Image gallery app Pintrest clone وبدي مشاريع للمبتدئين ماهي مشاريع
- 4 اجابة
-
- 3
-
-
انا اقوم ب انشاء مشاريع فول ستاك لكني استخدم AI دائماً في مساعدتي ب حل مشكلات + توليد افكار + تصميم + مساعدتي ب انشاء شيء معين لا اعلم كيف انجزه لكن بالطبع كل سطر كود يقوم AI ب توليده افهمه ويمكني تعديل عليه لكني اواجه مشاكل مع نفسي عندما اتعاون مع AI والتي هي اشعر ب ضعف لان AI قام ب مساعدتي ولست انا من قام ب انشاء مشروع من 0 الى 100
- 2 اجابة
-
- 2
-
-
هل يمكنني استغناء عن Node.js واستخدم bun.js وأيضاً هل Next.js v16 صالح حالياً للاستخدام ام مازال في مرحلة تطوير
-
مشكلة لم تنحل هكذا استخدمته في axios import express from 'express'; import dotenv from 'dotenv'; import { connectDB } from './libs/connectDB.js'; import userRouter from './routes/user.route.js'; import imageRouter from './routes/image.route.js'; import cors from 'cors'; import path from 'path'; dotenv.config(); const app = express(); app.use(express.json()) app.use(cors({ origin: 'https://mern-image-gallery-app.netlify.app', credentials: true })); connectDB(); const port = process.env.PORT || 3000; app.get('/' , (req , res) => { res.send("Hello World!"); }); app.use('/api/auth' ,userRouter); app.use('/api/images' ,imageRouter); app.use('/uploads', express.static(path.join(process.cwd(), 'public', 'uploads'))); app.listen(port , () => { console.log(`Server is running on port ${port}`) }); import { useState, useEffect } from 'react'; import axios from 'axios'; import { FaHeart, FaRegHeart } from 'react-icons/fa'; import { useNavigate } from 'react-router-dom'; import toast from 'react-hot-toast'; const Home = () => { const [images, setImages] = useState([]); const [loading, setLoading] = useState(true); const [message, setMessage] = useState(""); const [modalImage, setModalImage] = useState(null); const navigate = useNavigate(); const token = localStorage.getItem("token"); useEffect(() => { const fetchImages = async () => { try { const res = await axios.get("https://mern-stack-image-gallery-app.onrender.com/api/images"); setImages(res.data); } catch (err) { console.error(err); setMessage("حدث خطأ أثناء جلب الصور"); } finally { setLoading(false); } }; fetchImages(); }, []); const handleLike = async (id) => { if (!token) { toast.error("يجب تسجيل الدخول اولاُ", { duration: 3000 }); navigate("/login"); return; } try { const res = await axios.post( `https://mern-stack-image-gallery-app.onrender.com/api/images/like/${id}`, {}, { headers: { Authorization: `Bearer ${token}` } } ); setImages(images.map((img) => img._id === id ? { ...img, likes: res.data.likes } : img )); } catch (error) { console.error(error); toast.error(error.response?.data?.message || "حدث خطأ أثناء الإعجاب بالصورة"); } }; if (loading) return <p className="text-center mt-10">جارٍ تحميل الصور...</p>; if (message) return <p className="text-center mt-10 text-red-500">{message}</p>; return ( <div className="container mx-auto p-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"> {images.map((img) => ( <div key={img._id} className="border rounded shadow p-2 bg-white relative h-72"> <img src={`https://mern-stack-image-gallery-app.onrender.com${img.imageUrl}`} alt={img.title || "img"} className="w-full h-48 object-cover rounded cursor-pointer" onClick={() => setModalImage(img)} /> <h3 className=" mt-2 font-semibold">{img.title}</h3> <p className='text-gray-800'>{img.description}</p> <button onClick={() => handleLike(img._id)} className="absolute top-2 right-2 text-red-500 text-xl" > {img.likes && img.likes > 0 ? <FaHeart /> : <FaRegHeart />} <span className="ml-1">{img.likes || 0}</span> </button> </div> ))} {modalImage && ( <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> <div className="bg-white rounded p-4 max-w-lg w-full relative"> <button onClick={() => setModalImage(null)} className="absolute top-2 right-2 text-xl font-bold text-gray-600 hover:text-black" > ❌ </button> <img src={`https://mern-stack-image-gallery-app.onrender.com${modalImage.imageUrl}`} alt={modalImage.title} className="w-full h-auto rounded mb-4" /> <h2 className="text-xl font-bold mb-2">{modalImage.title}</h2> <p className="text-gray-700">{modalImage.description}</p> </div> </div> )} </div> ); }; export default Home;
-
عندي مشروع React + Express.js ورفعت مجلد خادم على render و تم رفعه بنجاح وعطاني رابط واستخدمته بدل من localhost:3000 وبعدين حطيت رابط مشروع في cors بهذه شكل app.use(cors({ origin: 'https://mern-image-gallery-app.netlify.app/', credentials: true })); ورفعت مجلد عميل على Netlify وخادم لم يعمل.
-
-
هل رسالتي وصلت الى مركز مساعدة ام يوجد ضغط اصبح ثلاث ايام من تسليم مستودع مشروع تخرج لكن لحد الان لم يتم رد
- 1 جواب
-
- 1
-
-
استخدمت IP عالمي في mongodb atlas لكن مر وقت حوالي نصف ساعة وهي قيد الانتظار Pending ما سبب وكيف يمكن حلها
- 3 اجابة
-
- 1
-
-
الان انا ب انتظار مراجعة مشروع تخرج لكي احصل على شهادة بس بدي اعرف شهادة اكاديمية حسوب هل لها فترة انتهاء صلاحية وتصبح فقط ورقة
- 2 اجابة
-
- 2
-
-
السلام عليكم انتهيت من مشروع تخرج وسلمته للمركز مساعدة بس ليش مركز مساعدة يتأخرو برد
- 2 اجابة
-
- 2
-
-
الان بدأ يرفع صور بنجاح لكن لا يتم عرض صور في واجهة رئيسية بعد ما استخدمنت Cloudinary برغم انها تحفظ في قاعدة بيانات https://image-gallery-llmy3g4pa-zen-allahams-projects.vercel.app/ "use server"; import { NextRequest, NextResponse } from "next/server"; import { connectDB } from "@/app/libs/connectDB"; import { isAuthenticate } from "@/app/libs/isAuthenticate"; import Image from "@/app/models/Image"; import { v2 as cloudinary } from "cloudinary"; import { Readable } from "stream"; cloudinary.config({ cloud_name: process.env.CLOUDINARY_CLOUD_NAME, api_key: process.env.CLOUDINARY_API_KEY, api_secret: process.env.CLOUDINARY_API_SECRET, }); function bufferToStream(buffer: Buffer) { const readable = new Readable(); readable._read = () => {}; readable.push(buffer); readable.push(null); return readable; } export async function POST(request: NextRequest) { try { await connectDB(); const user = await isAuthenticate(request); if (!user) { return NextResponse.json({ message: "غير مصرح" }, { status: 401 }); } const formData = await request.formData(); const title = formData.get("title") as string; const description = formData.get("description") as string; const file = formData.get("file") as File; if (!file) { return NextResponse.json({ message: "اختر صورة أولاً" }, { status: 400 }); } const fileBuffer = Buffer.from(await file.arrayBuffer()); const uploadResult = await new Promise<any>((resolve, reject) => { const stream = cloudinary.uploader.upload_stream( { folder: "images" }, (error, result) => { if (error) reject(error); else resolve(result); } ); bufferToStream(fileBuffer).pipe(stream); }); // إنشاء مستند جديد في MongoDB const newImage = await Image.create({ title, description, imageUrl: uploadResult.secure_url, userId: user._id, likes: 0, likedBy: [], }); return NextResponse.json({ success: "تم رفع الصورة بنجاح", image: newImage, }); } catch (err) { console.log(err); return NextResponse.json( { message: "حدث خطأ في السيرفر" }, { status: 500 } ); } } import { connectDB } from "@/app/libs/connectDB"; import Image from "@/app/models/Image"; import { NextRequest, NextResponse } from "next/server"; export async function GET(request:NextRequest){ try{ await connectDB(); const images = await Image.find().sort({createdAt: -1}); return NextResponse.json(images); }catch(err){ console.log(err); return NextResponse.json({ message: "حدث خطأ في السيرفر" }, { status: 500 }); } }
- 2 اجابة
-
- 1
-
-
الان بدأ يرفع صور بنجاح لكن لا يتم عرض صور في واجهة رئيسية بعد ما استخدمنت Cloudinary https://image-gallery-72gqvgbz9-zen-allahams-projects.vercel.app/ "use server"; import { NextRequest, NextResponse } from "next/server"; import { connectDB } from "@/app/libs/connectDB"; import { isAuthenticate } from "@/app/libs/isAuthenticate"; import Image from "@/app/models/Image"; import { v2 as cloudinary } from "cloudinary"; import { Readable } from "stream"; cloudinary.config({ cloud_name: process.env.CLOUDINARY_CLOUD_NAME, api_key: process.env.CLOUDINARY_API_KEY, api_secret: process.env.CLOUDINARY_API_SECRET, }); function bufferToStream(buffer: Buffer) { const readable = new Readable(); readable._read = () => {}; readable.push(buffer); readable.push(null); return readable; } export async function POST(request: NextRequest) { try { await connectDB(); const user = await isAuthenticate(request); if (!user) { return NextResponse.json({ message: "غير مصرح" }, { status: 401 }); } const formData = await request.formData(); const title = formData.get("title") as string; const description = formData.get("description") as string; const file = formData.get("file") as File; if (!file) { return NextResponse.json({ message: "اختر صورة أولاً" }, { status: 400 }); } const fileBuffer = Buffer.from(await file.arrayBuffer()); const uploadResult = await new Promise<any>((resolve, reject) => { const stream = cloudinary.uploader.upload_stream( { folder: "images" }, (error, result) => { if (error) reject(error); else resolve(result); } ); bufferToStream(fileBuffer).pipe(stream); }); // إنشاء مستند جديد في MongoDB const newImage = await Image.create({ title, description, imageUrl: uploadResult.secure_url, userId: user._id, likes: 0, likedBy: [], }); return NextResponse.json({ success: "تم رفع الصورة بنجاح", image: newImage, }); } catch (err) { console.log(err); return NextResponse.json( { message: "حدث خطأ في السيرفر" }, { status: 500 } ); } } import { connectDB } from "@/app/libs/connectDB"; import Image from "@/app/models/Image"; import { NextRequest, NextResponse } from "next/server"; export async function GET(request:NextRequest){ try{ await connectDB(); const images = await Image.find().sort({createdAt: -1}); return NextResponse.json(images); }catch(err){ console.log(err); return NextResponse.json({ message: "حدث خطأ في السيرفر" }, { status: 500 }); } }
-
رفعت مشروع في Vercel لكن انا استخدم وحدات fs path في رفع صور لكن لماذا vercel يطلب Cloudinary ولا يستطيع تعامل مع fs path
- 5 اجابة
-
- 3
-
-
الحمدلله انتهيت من مشروع تخرج وباقي فقط رفع لكن اريد معرفة ماذا يعني قصور في مشروع
- 3 اجابة
-
- 3
-
-
هل مسموح إذا انتهيت من مشروع التخرج قبل الموعد التسليم أن أقوم بتقديمه؟
-
الحمد لله، قربت أنتهي من مشروع التخرج، لكن أريد ملاحظة في حول التصميم. هلق أنا سويت المنطق البرمجي بشكل رائع ومنظم، لكنني لا أركز على التصميم. بالطبع، الموقع متجاوب مع جميع الأجهزة، لكنني في التصميم يعني ليس احترافي. هل يوجد مشكلة بذلك؟
- 4 اجابة
-
- 1
-
