كل الأنشطة

خلينا نبدأ خطوة بخطوة من فضلكم اولا: هل يوجد اخطاء في مشروع من ناحية ملفات واهمها هم 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 ثم إعادة إنشاء مشروع جديد واختيار المستودع الصحيح.

ذكرت لك الطريقة الأسهل، وبالطبع متاح ما تريده، ستحتاج إلى تعديل أمر الـ build والـ start على render لكل من الواجهة الأمامية والخلفية، بحيث تستخدم أمر cd للإنتقال للمجلد المطلوب ثم تنفيذ أمر التحزيم وأمر تشغيل المشروع، بمعنى للواجهة الأمامية أمر build: cd client && npm i && npm run build وأمر start: cd client && npm start وللواجهة الخلفية أمر build: cd server && npm i و أمر Start: cd server && npm start

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

لكن هل هذا احس انه سيسبب فوضى في حسابي على جيت هب لان اذا كل مشروع بدي اسويه رابطين لح يسبب فوضى هل يوجد طريقة ربط مجلدين في مجلد واحد دون تأثير على render

عليك فصل مجلد الخادم عن مجلد الواجهة الأمامية، أي كل منهم في مستودع git منفصل، وكل منهم له ملف env. منفصل. ستتوجه إلى كل مجلد، ثم إنشاء مستودع من خلال: git init ثم إنشاء ملف gitignore. لكل مجلد ثم رفع المشروع إلى مستودع منفصل من خلال الأوامر التالية: git add . // ثم git commit -m "first commit" // ثم git branch -M main // ثم git remote add origin رابط المستودع // ثم git push -u origin main ثم التوجه إلى render ونشر كل مشروع من خلال رابط المستودع الخاص به، وبالطبع سيتعين عليك إنشاء متغيرات بيئة على render أثناء نشر المشروع، وهي نفس المتغيرات التي كنت تستخدمها في ملف env. وبالنسبة للواجهة الخلفية يجب إنشاء قاعدة بيانات أيضًا على render وستحصل على رابط استخدمه في متغيرات البيئة الخاصة بالواجهة الخلفية على render

بالضبط، يجب ذلك

السؤال غير واضح، في حال متعلق بأحد الدروس بالدورة، أرجو طرح السؤال أسفل الدرس، عند النزول لأسفل ستجدي صندوق تعليقات كما هنا

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

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

كيف يعني هل انشئ مستودعين في كل مشروع يعني رابطين على جيت هب واحد فرونت اند و واحد باك اند

أنت تستخدم إضافة code runner وهي تعمل على تشغيل الكود وعرضه في تبويب output وليس terminal، بالتالي لن تستطيع إدخال أي قيمة. لتشغيله في الـ terminal اضغط على file بالأعلى في المحرر ثم اختر preferences ثم settings وابحث عن code runner run in terminal ثم قم بتفعيل ذلك الخيار وأعد تشغيل الكود

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

لا يتم العثور على ملف package.json لتثبيت الحزم اللازمة لتشغيل لمشروع، في حال قمت باستخدام مستودع المشروع الذي يحتوي على مجلدين client و server فذلك غير صحيح، يجب عليك رفع مجلد client على مستودع منفصل، ومجلد server في مستودع منفصل ثم نشر كلاهما على render

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

المستودع تم إنشائه في مجلد client بالتالي سيتم رفع ذلك المجلد فقط، لو أردت رفع المجلدين، ستحتاج إلى إنشاء مستودع في المجلد الرئيسي Todo ووضع gitignore. هناك وليس في المجلدات client و server حاليًا قم بحذف المستودع وإنشاء مستودع جديد، ورفع المجلد الرئيسي إليه بعد إنشاء مستودع محلي به أولاً.

لمذا 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' } } } }) ارسلت لكم الاكود ارجو مساعدة

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

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

حللت المشكلة، كانت هناك مشكلة في الDNS كما ذكرت واستعنت بcopilot للحل التفصيلي (غيرت الDNS ليكون 8.8.8.8 و 8.8.4.4)، شكرا

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

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

بالطبع لكن يُشترط الخبرة وإثبات ذلك عن طريق معرض أعمالك بشكل إحترافي، ويجب التخصص، بمعنى تخصيص حسابك على منصة العمل الحر لمجال المحاسبة فقط، وليس إدخال بيانات مثلاً فذلك يقلل من أهمية ما تقوم به ويقلل الثقة لدى العميل. ستجد هنا على منصة مستقل مشاريع تتطلب محاسب بمختلف الخبرات: https://mostaql.com/projects?category=business&sort=latest أيضًا على منصة خمسات: https://khamsat.com/business/finance-services تفقد نوعية الخدمات المطلوبة بكثرة واعمل على توفيرها بشكل أفضل وتنافسي. والأمر بحاجة إلى وقت، أي لا تتوقع الحصول على عمل مباشرًة بل أنت بحاجة إلى بعض الوقت لكي تكتسب خبرة في طريقة التقديم على المشاريع، وطريقة بناء معرض أعمال بشكل جيد. والأفضل الحصول على مشاريع على منصة مستقل، فالخدمات المُصغرة ليست الأنسب، لكن على أي حال تواجد على منصة خمسات واعرض خدماتك.