Zen Eddin Allaham

انا تعلمت Bun.js وتركت Node.js هل بهي حالة لح اخسر شغل في شركات او عمل حر

حليت مشكلة المشكلة كانت غريبة هي بسبب GitHub حيث في مستودع قمت برفعه قبل رفع على ريندر وبذالك الاكواد في جيت هب كانت localhost

تمام حليت مشكلة

لا توجد اي مشاكل في Logs ومع ذالك خادم لا يعمل

انا انتهيت من مشروعي Fullstack بستخدام Bun.js Express react ورفعت مشروع على render واخدت رابط وحطيته ب fetch API وفي cors قبل رفع على ريندر انا حاطت رابط مشروع وMongoDB atlas IP عالمي ورفعت مشروع على نتليفاي بعد بنائه ولم يعمل خادم رابط خادم https://pinterest-clone-3ans.onrender.com رابط مشروع https://www-pinterest-clone.netlify.app/ import { useEffect, useState } from "react"; import toast from "react-hot-toast"; import "./profile.css"; import { FaDeleteLeft, FaPenClip } from "react-icons/fa6"; import { useNavigate } from "react-router-dom"; interface Image { _id: string; title: string; description: string; imageUrl: string; } const Profile = () => { const [images, setImages] = useState<Image[]>([]); const [loading, setLoading] = useState(false); const [modalOpen, setModalOpen] = useState(false); const [editingImage, setEditingImage] = useState<Image | null>(null); const [newTitle, setNewTitle] = useState(""); const [newDescription, setNewDescription] = useState(""); const [newFile, setNewFile] = useState<File | null>(null); const navigate = useNavigate(); const token = localStorage.getItem("token"); useEffect(() => { const token = localStorage.getItem("token"); if (!token) { toast.error("You must log in first"); navigate("/login"); return; } }); const fetchImages = async () => { if (!token) return; setLoading(true); try { const res = await fetch("https://pinterest-clone-3ans.onrender.com/api/image/imageme", { credentials: "include", method: "GET", headers: { Authorization: `Bearer ${token}` }, }); const data = await res.json(); setImages(data); } catch (err) { console.error(err); toast.error("Failed to load images"); } finally { setLoading(false); } }; useEffect(() => { fetchImages(); }, []); const handleDelete = async (id: string) => { if (!token) return; try { const res = await fetch(`https://pinterest-clone-3ans.onrender.com/api/image/${id}`, { credentials: "include", method: "DELETE", headers: { Authorization: `Bearer ${token}` }, }); const data = await res.json(); if (res.ok) { toast.success(data.success); setImages(images.filter((img) => img._id !== id)); } else toast.error(data.error); } catch (err) { console.error(err); toast.error("Failed to delete image"); } }; const openEditModal = (img: Image) => { setEditingImage(img); setNewTitle(img.title); setNewDescription(img.description); setModalOpen(true); }; const handleUpdate = async () => { if (!token || !editingImage) return; try { const res = await fetch( `https://pinterest-clone-3ans.onrender.com/api/image/${editingImage._id}`, { credentials: "include", method: "PUT", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, }, body: JSON.stringify({ title: newTitle, description: newDescription, }), } ); const data = await res.json(); if (res.ok) { toast.success(data.success); fetchImages(); setModalOpen(false); setNewTitle(""); setNewDescription(""); } else toast.error(data.error); } catch (err) { console.error(err); toast.error("Failed to update image"); } }; const handleUpload = async () => { if (!token || !newTitle || !newDescription || !newFile) { return toast.error("All fields are required for upload"); } if (newDescription.length > 60) { return toast.error("Maximum description: 60 characters"); } const formData = new FormData(); formData.append("title", newTitle); formData.append("description", newDescription); formData.append("image", newFile); try { const res = await fetch("https://pinterest-clone-3ans.onrender.com/api/image/upload", { credentials: "include", method: "POST", headers: { Authorization: `Bearer ${token}` }, body: formData, }); const data = await res.json(); if (res.ok) { toast.success(data.success); fetchImages(); setNewTitle(""); setNewDescription(""); setNewFile(null); } else toast.error(data.error); } catch (err) { console.error(err); toast.error("Failed to upload image"); } }; return ( <div className="profile-page"> <h2>Your Images</h2> <div className="upload-section"> <input type="text" placeholder="Title" value={newTitle} onChange={(e) => setNewTitle(e.target.value)} /> <input type="text" placeholder="Description" value={newDescription} onChange={(e) => setNewDescription(e.target.value)} /> <input type="file" onChange={(e) => setNewFile(e.target.files?.[0] || null)} /> <button onClick={handleUpload}>Upload Image</button> </div> {loading && <p className="no-images">Loading...</p>} {images.length === 0 && !loading && ( <p className="no-images">No images uploaded yet.</p> )} <div className="image-grid"> {images.map((img) => ( <div key={img._id} className="image-card"> <img src={img.imageUrl} alt={img.title} /> <h3>{img.title}</h3> <p>{img.description}</p> <div className="image-actions"> <button onClick={() => openEditModal(img)}> <FaPenClip /> Edit </button> <button onClick={() => handleDelete(img._id)}> <FaDeleteLeft /> Delete </button> </div> </div> ))} </div> {modalOpen && editingImage && ( <div className="modal"> <div className="modal-content"> <h3>Edit Image</h3> <input type="text" value={newTitle} onChange={(e) => setNewTitle(e.target.value)} /> <input type="text" value={newDescription} onChange={(e) => setNewDescription(e.target.value)} /> <div className="modal-actions"> <button onClick={handleUpdate}>Save</button> <button onClick={() => setModalOpen(false)}>Cancel</button> </div> </div> </div> )} </div> ); }; export default Profile; import express from 'express'; import dotenv from 'dotenv'; import cors from 'cors'; import { connectDB } from './utils/db'; import userRouter from './routes/user.routes'; import imageRouter from './routes/image.routes'; dotenv.config(); const app = express(); const port = process.env.PORT || 3000; connectDB(); app.use(cors({ origin: 'https://www-pinterest-clone.netlify.app', credentials: true, })); app.use(express.json()); app.get('/', (req, res) => { res.send('Hello Bun!'); }); app.use('/api/auth', userRouter); app.use('/api/image', imageRouter); app.listen(port, () => { console.log(`Server is running on port ${port}`); });

هي ب نسبة ل رابط ريندر لكنه لا يعمل مع مشروعي 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}`); });

انا بعرف Node js JavaScript ومتقنهم شو لغة يلي لح تخليني Back end engineer Java - Golang - python - rust - cpp

انا صراحة تعبت من Front end و حابب ان اكون Back End developer من خلال Node.js bun.js python golang java هل اذا تركت فرونت اند سيضر بي سببي لترك فرونت اند هو لان فرونت اند ممل و متعب اما باك اند مريح ويوجد تعامل مع برمجة ب كامل

انا نزلت bun.js وتحققت من bun --version وظهر لكن عند تشغيله لا يعمل

انا سويت مشاريع فول ستاك وهم Todolist App - Image gallery app Pintrest clone وبدي مشاريع للمبتدئين ماهي مشاريع

انا اقوم ب انشاء مشاريع فول ستاك لكني استخدم AI دائماً في مساعدتي ب حل مشكلات + توليد افكار + تصميم + مساعدتي ب انشاء شيء معين لا اعلم كيف انجزه لكن بالطبع كل سطر كود يقوم AI ب توليده افهمه ويمكني تعديل عليه لكني اواجه مشاكل مع نفسي عندما اتعاون مع AI والتي هي اشعر ب ضعف لان AI قام ب مساعدتي ولست انا من قام ب انشاء مشروع من 0 الى 100

هل يمكنني استغناء عن Node.js واستخدم bun.js وأيضاً هل Next.js v16 صالح حالياً للاستخدام ام مازال في مرحلة تطوير