لوحة المتصدرين

لقدر فصلت ملف فرونت اند و باك اند ورفعتهم على جيت هب ك رابطين لكن عند رفع رابط باك اند على render حدث خطأ وانا متأكد لا يوجد اي علاقة ب فرونت اند

خلينا نبدأ خطوة بخطوة من فضلكم اولا: هل يوجد اخطاء في مشروع من ناحية ملفات واهمها هم index.js , vite.config.ts , package.json ثانياً: بعد تأكد من عدم وجود اخطاء اريد تنفيذ مستودع واحد فقط على مجلدين client server مع عدم ظهور مشاكل في Render رابعأ: تم رفع ملفات بنجاح على جيت هب : دخلت على Render + اخترت رابط الذي به مشروع كامل ومن ثم اضفت npm run build , npm run start و بيانات .env ومن ثم انشاء خادم لاني تابعت على يوتيوب ونفذت نفس شرحهم لكن يحدث خطأ عندي لذالك اشك ان مشاكلي هي من الاكواد مشروعي ارجو مساعدة من فضلكم انشئت مستودع لكن في رابط واحد https://github.com/ZenZN99/mern-todo-app Todo.zip

خلينا نبدأ خطوة بخطوة من فضلكم اولا: هل يوجد اخطاء في مشروع من ناحية ملفات واهمها هم index.js , vite.config.ts , package.json ثانياً: بعد تأكد من عدم وجود اخطاء اريد تنفيذ مستودع واحد فقط على مجلدين client server مع عدم ظهور مشاكل في Render رابعأ: تم رفع ملفات بنجاح على جيت هب : دخلت على Render + اخترت رابط الذي به مشروع كامل ومن ثم اضفت npm run build , npm run start و بيانات .env ومن ثم انشاء خادم لاني تابعت على يوتيوب ونفذت نفس شرحهم لكن يحدث خطأ عندي لذالك اشك ان مشاكلي هي من الاكواد مشروعي ارجو مساعدة من فضلكم Todo.zip

هل هذا تنظيم جيد لمنع حدوث مشاكل في render هل يمكنكم اعطائي خطوات بعد هذا تنظيم ملفات

ما مشكلة خادم في Render

كيف أضيف صورة وهي بالعربي والملف بالعربي

كيف يمكنني كتابة ال input بدون هذا الخطأ في VS Code?

لمذا git لا يرفع ملفات الخادم حيث اني قمت ببناء تطبيق في ملفين server client ولكن عند انشاء مستودع git تم رفع ملفات العميل فقط على جيت هب ولم يرفع ملفات الخادم جربت اخراج ملف .gitignore ليكون عام اي خارج ملفات كلها ولم ينج الامر import ex from 'express'; import dotenv from 'dotenv'; import { connectDB } from './config/db.js'; import router from './routes/routes.js'; import cors from 'cors' import path from 'path'; dotenv.config(); const app = ex(); const port = 3000; app.use(ex.json()); //app.use(cors()); app.use('/api/todos' , router); const _dirname = path.resolve(); if(process.env.NODE_ENV === "production"){ app.use(ex.static(path.join(_dirname , "/client/dist"))); app.get("*splat" , (req , res) => { res.sendFile(path.resolve(_dirname , "client" , "dist" , "index.html")) }); } app.listen(port , () => { connectDB(); console.log(`Server is runing on port ${port}`); });// كود با اند import axios from "axios"; import React, { useEffect, useState } from "react" import { IoIosCheckmark , IoIosClose } from "react-icons/io"; import { GrEdit } from "react-icons/gr"; import { FaRegTrashAlt } from "react-icons/fa"; import toast , {Toaster} from "react-hot-toast"; import bellSound from './audio.mp3'; interface Type{ _id: string text: string completed: boolean } function App() { const [newTodo , setNewTodo] = useState<string>(''); const [todos , setTodos] = useState<Type[]>([]); const [editTodos , setEditTodos] = useState<string | null>(null); const [editText , setEditText] = useState<string>(''); const addTodo = async (e:React.FormEvent<HTMLFormElement>) => { e.preventDefault(); if(!newTodo.trim()){ return ( toast.error("Please fill out the field") ) } const audio = new Audio(bellSound); audio.play(); try{ const res = await axios.post('/api/todos', { text: newTodo }); setTodos([...todos, res.data]); setNewTodo(''); }catch(e){ console.log('Error adding todo' , e); } } const fetchData = async () => { try{ const res = await axios.get('/api/todos'); setTodos(res.data); }catch(e){ console.log('Error fetching todo:' , e) } } useEffect(() => { fetchData(); },[]) const starEditing = (todo:Type) => { setEditTodos(todo._id) setEditText(todo.text) } const saveEdit = async (id:string) => { try{ const res = await axios.patch(`/api/todos/${id}`, { text: editText }); setTodos(todos.map((todo) => ( todo._id === id ? res.data : todo ))) setEditTodos(null) }catch(e){ console.log('Error updating todo:' , e); } } const deleteTodo = async (id:string) => { try{ await axios.delete(`/api/todos/${id}`); setTodos(todos.filter((t) => ( t._id !== id ))); }catch(e){ console.log('Error deleting todo:' , e); } } const toggleTodo = async (id:string) => { try{ const todo = todos.find((t) => t._id === id); const res = await axios.patch(`/api/todos/${id}`, { completed: !todo?.completed }) setTodos(todos.map((t) => ( t._id === id ? res.data : t ))) }catch(e){ console.log('Error toggline todo'); } } return ( <main className="flex items-center justify-center min-h-screen bg-gradient-to-r from-gray-200 to-gray-300"> <Toaster position="top-center" toastOptions={{ style: { background: '#ccc', padding: '20px', fontWeight: 'bold' } }}/> <div className="bg-white p-4 shadow-xl shadow-gray-500 rounded-md"> <h1 className="text-center text-gray-700 font-bold text-3xl my-6">Task Manager</h1> <form onSubmit={addTodo} className="flex items-center gap-2 mb-5"> <input type="text" placeholder="Enter a task..." value={newTodo} onChange={(e) => setNewTodo(e.target.value)} className="outline-none border border-blue-700 rounded-md p-2 text-gray-700" /> <button type="submit" className=" cursor-pointer bg-blue-600 text-white font-bold py-2 px-3 rounded-md">Add Task</button> </form> <div> {todos.length === 0 ? ( <p className="font-semibold text-center p-5 text-[17px] text-gray-700">There are no missions yet.</p> ): ( <div className="flex flex-col gap-4 "> {todos.map((todo) => ( <div key={todo._id}> <div> {editTodos === todo._id ? ( <div className="flex items-center gap-4"> <input type="text" value={editText} onChange={(e) => setEditText(e.target.value)} className="flex-1 border p-1" /> <button onClick={() => saveEdit(todo._id)} className="bg-green-500 w-7 h-7 flex justify-center items-center rounded-full text-white font-bold text-2xl"><IoIosCheckmark /></button> <button onClick={() => setEditTodos(null)} className="bg-gray-400 w-7 h-7 flex justify-center items-center rounded-full text-white font-bold text-2xl"><IoIosClose /></button> </div> ): ( <div className="flex justify-between items-center"> <div className="flex items-center gap-3"> <button onClick={() => toggleTodo(todo._id)} className={`border border-gray-800 w-6 h-6 flex items-center justify-center rounded-full text-[20px] ${todo.completed ? 'bg-green-500 border-green-500' : 'text-white'}`}><IoIosCheckmark /></button> <span className="text-gray-800 font-bold">{todo.text}</span> </div> <div className="flex items-center gap-4"> <button className="text-blue-600 text-[20px]" onClick={() => starEditing(todo)}><GrEdit /></button> <button onClick={() => deleteTodo(todo._id)} className="text-red-600 text-[20px]" ><FaRegTrashAlt /></button> </div> </div> )} </div> </div> ))} </div> )} </div> </div> </main> ) } export default App//كود فرونت اند # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* lerna-debug.log* node_modules dist dist-ssr *.local .env # Editor directories and files .vscode/* !.vscode/extensions.json .idea .DS_Store *.suo *.ntvs* *.njsproj *.sln *.sw? { "name": "server", "version": "1.0.0", "main": "index.js", "type": "module", "scripts": { "dev": "node --watch index.js", "build": "npm install && npm install --prefix client && npm run build --prefix client", "start": "node /server/index.js" }, "keywords": [], "author": "", "license": "ISC", "description": "", "dependencies": { "cors": "^2.8.5", "dotenv": "^17.2.1", "express": "^5.1.0", "mongoose": "^8.18.0" } } import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vite.dev/config/ export default defineConfig({ plugins: [react()], server:{ proxy:{ '/api/todos': { target: 'http://localhost:3000' } } } }) ارسلت لكم الاكود ارجو مساعدة

يوجد لدي خطأ لم افهمه خطأ هو ان في دالة لازم استدعي parameter name ومشروعي كله مافيه name Todo.zip

في الإصدار 5 من express تحتاج إلى تعديل: app.get("*" , (req , res) => إلى: app.get('/{*splat}', (req, res) => حيث يجب أن يتم تسمية الـ wild card أي رمز النجمة *

السلام عليكم ورحمة الله وبركاته اسعد الله اوقاتكم جميعا انا مطور .net core اعمل كفري لانسر من سنتين وحاصل على شهادة بكالوريوس في تكنلوجيا المعلومات ودبلومة خبير ويب عالمية بريطانية وحاليا اخطط لافتتاح شركة برمجة خاصة ولدي فريق من ثلاث مبرمجين react +node +react native بالاضافة لي ، هل تنصحون ان ابدأ في افتتاح شركتي الخاصة ام اتوجه للوظيفة ام ابقى كفري لانسر ، وهل ما زالت شركات البرمجة مشاريع ناجحة؟ افيدوني جزاكم الله خيرا.

بالضبط، لكل دورة اشتراك سنة

قبل الغوص في الكود، حاول فهم الغرض من المشروع. ما المشكلة التي يحلها؟ ما هي الوظائف الرئيسية؟ قراءة وصف المشروع أو الـ README (إن وجد) ستساعدك على فهم السياق. لا تحاول استيعاب المشروع كاملًا دفعة واحدة. قسّم الكود إلى أجزاء صغيرة (مثل الدوال، الكائنات، أو الوحدات). ركز على فهم كل جزء على حدة قبل الانتقال إلى التالي. أثناء قراءة الكود، أضف تعليقاتك الخاصة لشرح ما يفعله كل جزء. إذا كنت تستخدم بيئة تطوير مثل VS Code، يمكنك كتابة ملاحظات بجانب السطور لتوضيح فهمك. لا تكتفِ بالمشاهدة فقط. قم بتنصيب المشروع على جهازك، وشغّل الكود. جرب تعديل أجزاء صغيرة منه (مثل تغيير قيم المتغيرات أو إضافة ميزة بسيطة) لفهم كيفية عمل المشروع عمليًا. استخدم أدوات التصحيح في بيئة التطوير (مثل نقاط التوقف Breakpoints) لتتبع كيفية تنفيذ الكود خطوة بخطوة. هذا سيعزز فهمك لتدفق البرنامج. حاول تتبع الكود يدويًا (مثلما تفعل عند حل مسائل الرياضيات). اكتب قيم المتغيرات أو النتائج المتوقعة على ورقة لفهم كيف يعمل الكود.

وعليكم السلام ورحمة الله وبركاته. من الطبيعي ألا تستطيع إعادة كتابة المشروع من الصفر فور مشاهدته وذلك في البداية أو عند تعلم تقنيات ولغات جديدة وذلك بسبب أنك تريد بناء مشروع كامل مباشرة بعد فهم الدروس أو مشاهدة الفيديوهات حيث في هذا الوقت بالفعل قمت بفهم الدروس ولكن لم تطبق هذه المعرفة في تمارين بسيطة أولاً ثم مشاريع بسيطة أي التدرج في التطبيق وذلك يقابله محاولة التطبيق على عدة دروس فقط ثم متابعة مشاهدة الدروس وهكذا بدلاً من التطبيق على المشروع كاملاً بعد الإنتهاء من الدروس جميعها . وللمزيد من النصائح وكيفية تحقيق أقصى استفادة من الدورات التعليمية يرجى الإطلاع على المصادر التالية