Zen Eddin Allaham

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

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

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

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

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

لمذا 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

كيف يمكن إستخدام AI في مشاريع البرمجة وهل مفيد استخدامه ام الافضل تجنبه

هل يمكن الاعتماد على جافا سكريبت وتجنب تايب سكريبت لأن تايب سكريبت مزعجة جدأ

هل كورس تطوير تطبيقات بستخدام JavaScript كافية للعمل في شركات بقوة

هل اساسيات جافا سكريبت تعتبر ايضاً قسم لأجراء الاختبار للحصول على شهادة

من الافضل Express nest

لقد انتهيت من مشروع لكن لدي أخطاء في التجاوبية ويمكنكم مراجعة رابط من خلال الهاتف لتوضيح مشكلة ومع ان تنسيقات لا اشك انها بها اخطاء https://alshahba-gym-1.netlify.app/ alshahba-gym.zip

لا اعلم اين مشكلة في تنسيق لماذا التنسيقات لا تأتي في منتصف alshahba-gym.zip

لماذا لم يتم رفع الاكود بالكامل برغم من ان اضفت خطوات git بشكل سليم 1- git init 2- git add . 3- git commit -m "رسالة" 4- git branch -M main -5 git remote add origin اسم مشروع 6- git push -u origin main هذه هي الخطوات وللعلم اني حذفت git وحذفت مشروع من github وانشأت مشروع من جديد ولم تنحل مشكلة

لما تايب سكريبت يظهر خطأ ما هي المشكلة بالظبط macbook pro.zip

كيف يمكن ان اخصل على عميل عبرة مستقل ك front end developer https://mostaql.com/u/zenAldin/portfolio هل يجب تحسين ملف شخصي ماهي النصائح الممبتكرة للحصول على اول عميل

لقد انشأت تطبيق ملاحظات الخاص بمسار react في دورة جافا سكريبت لكن استخدمت تايب سكريبت هل كود نظيف او يمكن تحسينه import { useEffect, useState } from "react"; import Note from "./Components/Note"; import Alert from "./Components/Alert"; function App() { interface Notes{ id: number | null; title: string; content: string; } const [notes , setNotes] = useState<Notes[]>(() => { const saveNotes = localStorage.getItem('notes'); return saveNotes ? JSON.parse(saveNotes) : []; }); const [selectedNote , setSelectedNote] = useState<number| null>(null); const [title , setTitle] = useState<string>(''); const [content , setContent] = useState<string >('') const [creating , setCreating] = useState<boolean>(false); const [editing , setEditing] = useState<boolean>(false); const [validationError , setValidationError] = useState<string[]>([]); useEffect(() => { localStorage.setItem('notes' , JSON.stringify(notes)) },[notes]) useEffect(() => { if(validationError.length !==0){ setTimeout(() => { setValidationError([]) },3000) } },[validationError]) const validate = () => { const validationError: string[] = [] let passed = true; if(!title){ validationError.push('الرجاء ادخال عنوان الملاحظة') passed = false } if(!content){ validationError.push('الرجاءادخال محتوى الملاحظة') passed = false } setValidationError(validationError) return passed } const titleChange = (event: React.ChangeEvent<HTMLInputElement>) => { setTitle(event.target.value); } const contentChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => { setContent(event.target.value); } const addToNoteHandler = () => { setCreating(true) setEditing(false); setTitle('') setContent('') } const saveToNoteHandler = () => { if((!validate())) return const note = { id: Date.now(), title: title, content: content } const saveNotes = [...notes , note] setNotes(saveNotes) setSelectedNote(note.id) setCreating(false) setTitle('') setContent('') } const selectNoteHandler = (noteId:number) => { setSelectedNote(noteId) setEditing(false) setCreating(false) } const editNoteHandler = () => { const note = notes.find(note => note.id === selectedNote); setEditing(true) setTitle(note?.title || '') setContent(note?.content || '') } const updateNoteHandler = () => { if((!validate())) return const updateNotes = [...notes]; const noteIndex = updateNotes.findIndex(note => note.id === selectedNote); updateNotes[noteIndex] = { id: selectedNote, title: title, content: content } setNotes(updateNotes); setEditing(false); setTitle('') setContent('') } const deleteNoteHandler = () => { const deleteNotes = [...notes]; const noteIndex = deleteNotes.findIndex(note => note.id === selectedNote); deleteNotes.splice(noteIndex,1) setNotes(deleteNotes) setSelectedNote(null) } const deleteAll = () => { if( window.confirm('هل انت متأكد بحذف جميع الملاحظات')) setNotes([]) setSelectedNote(null) } const getAddNote = () => { return ( <div> <h2>إضافة ملاحظة جديدة</h2> <div> <input type="text" name="title" className="form-input mb-30" placeholder="العنوان" value={title} onChange={titleChange} /> <textarea rows={10} name="content" className="form-input" placeholder="النص" value={content} onChange={contentChange} /> <a href="#" className="button green" onClick={saveToNoteHandler}> حفظ </a> </div> </div> ); }; const getPreview = () => { if(notes.length === 0){ return <h2 className="center">لا يوجد ملاحظة</h2> } else if(!selectedNote){ return <h2 className="center">الرجاء اختيار ملاحظة</h2> } const noteShow = notes.find(note => { return note.id === selectedNote }); let noteDisplay = ( <div> <h2>{noteShow?.title}</h2> <p>{noteShow?.content}</p> </div> ) if(editing){ noteDisplay = ( <div> <h2>تعديل ملاحظة</h2> <div> <input type="text" name="title" className="form-input mb-30" placeholder="العنوان" value={title} onChange={titleChange} /> <textarea rows={10} name="content" className="form-input" placeholder="النص" value={content} onChange={contentChange} /> <a href="#" className="button green" onClick={updateNoteHandler}> تعديل </a> </div> </div> ) } return ( <div> {!editing && <div className="note-operations"> <a href="#" onClick={editNoteHandler}><i className="fa fa-pencil-alt" /> </a> <a href="#" onClick={deleteNoteHandler}><i className="fa fa-trash" /></a> <a href="#" onClick={deleteAll}><i className="fa-solid fa-ban"></i></a> </div> } {noteDisplay} </div> ); }; return ( <div className="App"> <div className="notes-section"> <ul className="notes-list"> {notes.map(note => <Note key={note.id} title={note.title} noteClicked={() => selectNoteHandler(note.id || 0)} active={note.id === selectedNote}/>)} </ul> <button className="add-btn" onClick={addToNoteHandler}>+</button> </div> <div className="preview-section">{creating ? getAddNote() : getPreview()}</div> {validationError.length !==0 && <Alert validationMassge={validationError}/>} </div> ); } export default App;

هل node js لح يتم استبداله ب bun في مستقبل

هل يوجد اضافات في محرر الشيفرات لتحسين شكل Terminal

لقد انشأت متجر الكتروني لكن في صفحة details في شاشة هاتف لقد رأيت سكرول من محور الاكس وانا متاكد ان لا يوجد شيء خاررج صفحة هل يمكنكم مساعدتي https://arabic-store.netlify.app/ store.zip

انا عم اشتغل على متجر الكتروني بدون API يعني كل شي يدوي بستخدام Array بهي الحالة بحسن اسوي بحث عن منتجات ام حصراً لازم تكون منتجات من API

لقد اضفت مميزات للمشروع مارايكم بها وايضاً ماهي المميزات التي يمكن اضافتها لتحسين تجربة المستخدم بشكل فائق https://zen-online-store-1.netlify.app/ Ecommerce website.zip

في dom الا يمكننا استخدام map

لماذا نستخدم في رياكت map بدلاً من loop while for