عمر قره محمد

قم بإضافتهم من الخانة الخاصة بالـ cookies اسف الزر send :

ثم قم بإضافة الدومين الذي تريد تشغيل ملفات الارتباط عليه وضاف ال cookies التي تريدها للدومين :

يمكنك القيام بذلك كالتالي :
const onSubmit = async e => { e.preventDefault() if (password !== password2) { const error = { id: new Date().getTime(), type: "danger", msg:"Passwords does not mutch" }; dispatch(alertActions.setAlerts(error)) setTimeout(()=> dispatch(alertActions.removeAlert(error)), 3000) } console.log("success") }  

هذا ملف المشروع الخاص بك بعد التعديل :
import React, { useState, useId } from "react"; import { useDispatch, useSelector } from 'react-redux' import { Link } from "react-router-dom"; // import axios from 'axios' import { v4 as uuid } from 'uuid'; import { alertActions } from '../../redux/slices/alertSlice' function Register() { const dispatch = useDispatch() const alerts = useSelector(store => store.alert.alerts) console.log(alerts); const [formData, setFormData] = useState({ name: '', email: '', password: '', password2: '' }); const { name, email, password, password2 } = formData const onChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value }) } const onSubmit = async e => { e.preventDefault() let errors = []; if (password.length < 6) { errors.push({ id: uuid(), type: "error", msg: "Passwords must be more than 6 characters" }) } if (password !== password2) { errors.push({ id: uuid(), type: "error", msg: "Passwords does not mutch" }) } if (errors.length) { return dispatch(alertActions.setAlerts(errors)) } console.log("success") } return ( <section className="container"> <h1 className="large text-primary">Sign Up</h1> <p className="lead"> <i className="fas fa-user"></i> Create Your Account </p> <form className="form" onSubmit={e => onSubmit(e)} > <div className="form-group"> <input type="text" placeholder="Name" name="name" value={name} onChange={e => onChange(e)} required /> </div> <div className="form-group"> <input type="email" placeholder="Email Address" name="email" value={email} onChange={e => onChange(e)} /> <small className="form-text"> This site uses Gravatar so if you want a profile image, use a Gravatar email </small> </div> <div className="form-group"> <input type="password" placeholder="Password" name="password" value={password} onChange={e => onChange(e)} // minLength="6" /> </div> <div className="form-group"> <input type="password" placeholder="Confirm Password" name="password2" value={password2} onChange={e => onChange(e)} minLength="6" /> </div> <input type="submit" className="btn btn-primary" value="Register" /> </form> <p className="my-1"> Already have an account? <Link to="/login">Sign In</Link> </p> </section> ); } export default Register; يمكنك الاطلاع على التعديلات التي اجريتها
1- واهما هو استخدام المكتبة uuid بدلاً من uuidv4 :
npm uninstall uuidv4 npm install uuid و كود الاستدعاء يصبح بالشكل :
import { v4 as uuid } from 'uuid'; 2- وتعديل نظام اضافة الاخطاء.
وما انصحك به هو التخلي عن هذا الاسلوب واستخدام react-hot-toast و react-hook-form وهذه المكاتب هي التي استخدمها انا شخصياً من اجل التعامل مع النماذج وهي افضل بكثير واسرع واكثر قابلية للتحكم من ان تبني المنطق بنفسك.

يمكنك القيام بذلك بهذه الطريقة :
 
const express = require('express'); const app = express(); const upload = require('./multer'); const fs = require('fs'); app.post('/upload', upload.single('file'), (req, res) => { const { name, email } = req.body; console.log(`Received file: ${req.file.originalname}`); console.log(`Name: ${name}`); console.log(`Email: ${email}`); // Perform any necessary processing on the uploaded file here // Delete the file from disk fs.unlink(req.file.path, (err) => { if (err) { console.error(err); return res.status(500).send('Error deleting file'); } console.log(`File ${req.file.originalname} deleted successfully`); res.send('File uploaded and deleted successfully!'); }); }); app.listen(3000, () => { console.log('Server started on port 3000'); });

عند تعريف ال user يجب ان تقوم بإضافة الـ reference حتى تعرف mongoose ماهي الـ collection التي تقصدها :
const ImageSchema = new Schema({ user: { type: Schema.Types.ObjectId, ref: "example" // اسم المودل التي تحتوي المستخدمين }, title: { type: String, required: true }, ... وهذا مثال بسيط يوضح كيفية ربط المودل ببعضهم البعض :
const mongoose = require('mongoose'); const { Schema } = mongoose; const personSchema = Schema({ name: String, age: Number, stories: [{ type: Schema.Types.ObjectId, ref: 'Story' }] }); const storySchema = Schema({ author: { type: Schema.Types.ObjectId, ref: 'Person' }, title: String, fans: [{ type: Schema.Types.ObjectId, ref: 'Person' }] }); const Story = mongoose.model('Story', storySchema); const Person = mongoose.model('Person', personSchema);  

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

لفعل ذلك عليك ان تقوم بإنشاء terminal جديد بحيث يظهر لديك تبويبات الـ terminals تحت بعضها البعض ومن ثم يمكنك سحب الـ terminal  التي تريد وضعها في نافذة tap عبر النقر عليها بالزر الايسر بشكل متواصل وسحبها باتجاه التبويبات taps كما في الصورة :

 

تقنية الـ Connection pooling يمكنك تشبيهها ببركة  تحتوي على مجموعة من الاتصالات  بقاعدة البيانات مفتوحة وجاهزة للاستخدام المتكرر  ( ولنفترض 10)  والفائدة من ذلك توفير الوقت الذي يكون مابين اغلاق الاتصال و فتحه مرة أخرى لعملية أخرى.
بذلك وعند نفاذ كمية الاتصالات من البركة (اي ان هناك عدد معين من المستخدمين في نفس الوقت  يستخدمون جميع قنوات الاتصال في هذه البركة ) يتم اضافة اتصال آخر بشكل اوتوماتيكي ( ليصبح مثلا 14 اتصال  داخل البركة )  وعند الانتهاء يرجع للعدد الطبيعي (10)  ويتم غلق هذه الاتصالات.
تعد تقنية Connection pooling مفيدة جدًا في تحسين أداء قاعدة البيانات، حيث يمكنها تقليل عدد الاتصالات التي يتم إجراؤها بشكل متكرر مع قاعدة البيانات، وبالتالي توفير استجابة أسرع للطلبات.
يمكنك استخدام connection pooling مع Mongoose عن طريق تحديد خيار poolSize في URI الخاص بالاتصال بقاعدة البيانات. يمكنك إضافة "poolSize={pool size}" إلى URI الخاص بالاتصال بقاعدة البيانات. على سبيل المثال، يمكنك استخدام
mongodb://{user}:{password}@localhost:{port}/{db_name}?poolSize=5 لتحديد حجم حوض الاتصال الذي ترغب في استخدامه. 
أحد أهم عيوب Connection pooling هو أنه يستهلك ذاكرة كبيرة، خاصةً إذا كان هناك عدد كبير من الاتصالات المفتوحة في نفس الوقت. ومن بين المزايا التي يوفرها هذه التقنية هو تحسين أداء قاعدة البيانات وزيادة سرعة استجابتها.
للتعمق اكثر يمكنك الاطلاع على هذا المقال بالانجليزية.

هل جربت القيام بذلك بنفسك ؟ إذا كنت قد جربت، فماهي المشاكل التي تواجهها حتى نقوم بمساعدتك ؟
إذا كنت ما تزال في مرحلة التعلم، فيمكنك القيام بذلك عبر التحكم بالـ dom.
وهذا مثال بسيط لعداد مع زر إضافة وتنقيص يوضح كيفية التعامل مع الـ DOM في js والية التلاعب بأكواد الـ html في js :
<!DOCTYPE html> <html> <head> <title>Counter</title> </head> <body> <h1>Counter</h1> <!-- يتم إنشاء زرين، أحدهما للزيادة والآخر للنقصان --> <button onclick="decrement()">-</button> <span id="count">0</span> <button onclick="increment()">+</button> <script> // يتم تعريف متغير count وتعيين قيمته الأولية إلى 0 let count = 0; // يتم الحصول على العنصر span بواسطة معرفه وتخزينه في متغير countElement const countElement = document.getElementById("count"); // يتم تعريف دالة increment لزيادة قيمة المتغير count بواحد وتحديث نص العنصر span function increment() { count++; countElement.textContent = count; } // يتم تعريف دالة decrement لإنقاص قيمة المتغير count بواحد وتحديث نص العنصر span function decrement() { count--; countElement.textContent = count; } </script> </body> </html> يمكنك التعلم عن الـ dom من هنا :
 
https://academy.hsoub.com/questions/23559-ما-هو-الـ-dom-في-javascript/

سبب المشكلة أنه عندما اعطيته الخاصية fixed أبح في طبقة ثانية خلف الطبقة الاصلية، وبشكل افتراضي فإنه يعود إلى بداية الصفحة.
جرب إعطائه padding أو margin من الأعلى، أو يمكنك التحكم بموقعه عبر إعطاءه الخاصية top و right. 
مثل :
#sidebar { top:150px; }  

Data Science هو علم يجمع بين الرياضيات والإحصاء والبرمجة المتخصصة والتحليلات المتقدمة والذكاء الاصطناعي والتعلم الآلي مع خبرة محددة في موضوع معين لكشف الأفكار القابلة للتنفيذ المخفية في بيانات المؤسسة. يمكن استخدام هذه الأفكار لتوجيه عملية صنع القرارات والتخطيط الاستراتيجي.
AI Data هو تطبيق للذكاء الاصطناعي في مجال تحليل البيانات. يستخدم AI Data تقنيات التعلم الآلي والشبكات العصبية لتحليل بيانات المؤسسة وإنشاء نظام توصية يستند إلى التحليلات.
لا يمكن قول أن Data Science أفضل من AI Data أو العكس، حيث يختلف كلاهما في طبيعة استخدامه. إذا كان هدفك هو تحليل بيانات المؤسسة، فإن Data Science هو المجال المثالي لك. إذا كان هدفك هو تطبيق التحليلات على بيانات المؤسسة، فإن AI Data هو المجال المثالي لك.
هناك العديد من الموارد التعليمية عبر الإنترنت التي يمكن استخدامها لتعلم Data Science و AI Data.  كما تحتوي أكاديمية حسوب على مسار خاص بتحليل البيانات في دورة بايثون.

حل المشكلة هو ان تعدل الكود الخاص بالإضافة للشكل التالي:
const addtodosHandler = (todo) => { setTodos((todos) => [...todos, todo]); }; حيث ان الشكل :
(todos) => [...todos, todo] يستخدم القيمة الأصلية للـ todos (غير المفلترة) بينما الشكل الخاص بك :
[...todos, todo] فإنه يستخدم الـ todos التي تم التعديل عليها في الكود التالي :
if (showTodo === 'active') { todos = todos.filter(todo => !todo.status) console.log(todos); } else if (showTodo === 'finish') { todos = todos.filter(todo => todo.status) console.log(todos); }  

اغلب الدورات المجانية ذات الجودة العالية هي باللغة الانجليزية ولذلك لا استطيع ترشيح دورة عربية جيدة في نود فأغلبها قديمة أو انها ليست جيدة.
بعد قول ذلك فهنالك الدورة المقدمة من قبل موقع freeCodeCamp هي الافضل بالنسبة للدورات المجانية :
 
أما من الدورات المدفوعة فيوجد دورة تطوير التطبيقات باستخدام JavaScript المقدمة من قبل أكاديمية حسوب، حيث تتطرق لأساسيات بيئة Node.js بشرح مفصّل وعملي وفيها مشاريع عملية حيث ستبني واجهة برمجية لتقييم الأفلام خلال الدورة.
شكراً لك.

هل يمكنك إيضاح سؤالك بشكل اكبر.
وإن كنت تقصد انه لم يظهر في نتائج البحث فأنت بحاجة للانتظار حتى يقوم متعقب المواقع الخاص بمحرك البحث الذي تريده بالزحف إلى موقعك وإضافته إلى قاعدة البيانات الخاصة بمحرك البحث.
يمكنك تحسين ظهور موقعك في نتائج البحث عن طريق تحسين محتوى موقعك وتحسين العناوين والوصف والعلامات والروابط الداخلية والخارجية لموقعك. يمكنك أيضًا التسجيل في خدمة (Google MyBusiness) التي يُقدّمها جوجل لتحسين ظهور الموقع عبر نتائج بحث جوجل.
 
بالإضافة إلى ذلك، يمكنك استخدام خدمات تحسين محركات البحث (SEO) لتحسين ظهور موقعك في نتائج البحث. 
قد يفيدك قراءة :
 
 

لا يمكنك الوصول إلى الصور بهذه الطريقة،
لحل المشكلة أنت بحاجة لوضعها في ملف الـ public مثل :

أو ان تقوم باستيرادهم بشكل فردي، كل واحدة على حدى.

يمكنك فعل ذلك باستخدام كل من react و nodejs و مكتبة multer و الطرف الثالث لحفظ الصور Cloudinary، وهذه هي الاكواد اللازمة لذلك :
كود الخاص بـ react وهو يقوم بإرسال بيانات الصورة إلى السيرفر باستخدام axios ثم يتلقى رابط الصورة ويقوم بعرضها بعد ان يتم التحميل :
import axios from 'axios'; import React, { useState } from 'react'; const ImageUpload = () => { // الحالة الخاصة بالصورة const [imageUrl, setImageUrl] = useState(''); // الوظيفة الخاصة بإرسال الطلب وتلقي رابط الصورة بعد الرفع const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => { // event نحضر الصورة من الـ const file = event.target.files[0]; // نرسلها إلى الوظيفة التي انشأناها (في الاسفل) const imageUrl = await uploadImage(file); // نقوم بحفظ الرابط في الحالة بعد تلقي رابط الصورة بعد الرفع setImageUrl(imageUrl); }; return ( <div> <input type="file" onChange={handleFileUpload} /> {imageUrl && <img src={imageUrl} alt="Uploaded image" />} </div> ); }; const uploadImage = async (file: File) => { const formData = new FormData(); formData.append('image', file); try { const res = await axios.post('/api/upload-image', formData, { headers: { 'Content-Type': 'multipart/form-data', }, }); return res.data.url; } catch (err) { console.error(err); } }; ويجب تحميل الحزمة axios كالتالي :
npm install axios كود الـ multer مع Cloudinary يصبح بالشكل :
import cloudinary from 'cloudinary'; import multer from 'multer'; import { CloudinaryStorage } from 'multer-storage-cloudinary'; // Cloudinary اعدادات cloudinary.v2.config({ cloud_name: process.env.CLOUDINARY_CLOUD_NAME, api_key: process.env.CLOUDINARY_API_KEY, api_secret: process.env.CLOUDINARY_API_SECRET, }); // Cloudinary وربطها مع multer اعدادات const storage = new CloudinaryStorage({ cloudinary: cloudinary.v2, params: { folder: 'images', allowed_formats: ['jpg', 'png'], }, }); const upload = multer({ storage }); حيث انك يجب ان تضع المعلومات الخاصة بحساب Cloudinary في ملف الـ env بالأسماء التالي :
CLOUDINARY_CLOUD_NAME CLOUDINARY_API_KEY CLOUDINARY_API_SECRET وكذلك يجب تحميل كل من  الحزم multer و  multer-storage-cloudinary و  cloudinary كالتالي :
npm install multer multer-storage-cloudinary cloudinary ونقوم بإعداد الـ route الخاص بتلقي الصورة كالتالي :
app.post('/api/upload-image', upload.single('image'), (req, res) => { res.json({ url: req.file.path }); }); حيث نستخدم المتغير upload الذي اعددناه في الكود السابق، ثم نعيد المسار الذي سيقوم Cloudinary بتقديمه ليتم إرساله إلى العميل.
بعد تنفيذ الخطوات السابقة سيكون لديك رابط src خاص بالصورة يمكنك حفظه في قاعدة البيانات مع باقي بيانات الـ post.

لا يوجد طريقة لاستخدام قاعدة البيانات locally وستحتاج إلى خادم backend حتى تستطيع التحدث مع قاعدة البيانات.
ولكن بعد قول هذا فيمكنك استخدام بعض شركات الطرف الثالث مثل firebase والتي توفر لك كل من الـ backend و الـ database ويمكنك الوصول إليها من الـ client مباشرةً.

تخبرك رسالة الخطأ ان المتغير المسمى myFunction غير معرف. 
أي انك لم تقم بتعريف المتغير myFunction قبل استخدامه في الكود الخاص بك، وقد يكون الكود الخاص بك بالشكل :
myFunction(...) والصحيح هو ان يتم تعريف الوظيفة قبل استخدامها :
const myFunction = (...)=>{...} myFunction(...)

جرب إضافة الـ effect التالي والذي يقوم بتعديل الحالة setQtyArray عند كل تعديل على الحالة cartItems في اللمف Cart.jsx :
useEffect(() => { const ids = cartItems.map((item) => { return item.id; }); const filteredCartItems = qtyArray.filter((item) => ids.indexOf(item.id) !== -1); setQtyArray(filteredCartItems); }, [cartItems]);  

اعتقد ان سبب المشكلة هو انك تحاول إضافة after إلى العنصر من النوع img.
وهذا غير صحيح في CSS.
لحل المشكلة جرب الكود التالي :
<div class="col"> <div class="imageContainer"> <img src="../images/a.jpg" alt=""> </div> </div> وفي css :
.imageContainer { width: 260px; position: relative; text-align: center; } .imageContainer img { width: 100%; } .imageContainer::after { content: ""; display: block; width: 80px; height: 100%; background-color: var(--scolor); top: 0; right: 0; position: absolute; } حيث اضفنا حاوية جديدة تحتوي على الصورة و الـ after.

يوجد مشكلتين :
الاولى هي انك اخطأت في استيراد الملفات،  ولحل المشكلة يجب اضافة :
./css/ قبل اسم الملف في الـ href الخاصة بكل من ملفات الـ font awesome.
جرب تعديل الكود للشكل :
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ayman's first project</title> <!-- main css file --> <link rel="stylesheet" href="./css/style.css"> <!-- normalize the css --> <link rel="stylesheet" href="./css/normalize.css"> <!-- google fonts --> <link rel=" preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <!-- icon css --> <link rel="stylesheet" href="./css/all.min.css"> </head> <body> <i class="fa-solid fa-mustache"></i> <i class="fa-duotone fa-pen-nib"></i> </body> </html> والمشكلة الثانية هي ان الايقونات التي استخدمتها هي ايقونات غير مجانية، وإذا اردت استخدام الايقونات المجانية يجب ان تحدد على علامة free في محرك البحث الخاص بـ fontawesome.

يمكنك استخدام api لمتجر الكتروني بحيث يكون اقرب ما يكون للموقع الحقيقي.
مثل fake store api حيث تقوم بإرسال طلبات إلى الـ api وتحصل على منتجات تجريبية جاهزة.
وكذلك فعلى ما يبدو أنه لديهم توثيق لأغلب الروابط المتاحة
وهذا مثال عن منتج معين من هنا

مرحباً محمود عدل الوظائف الخاصة بإضافة مستخدم جديد للشكل التالي :
async function fetchRandomUsers() { const response = await fetch('https://randomuser.me/api') const responseData = await response.json() const newUser = { user: `${responseData.results[0].name.first} ${responseData.results[0].name.first}`, // money: formatMoney(Math.floor(Math.random() * 1000000)) الكود القديم *************** money: Math.floor(Math.random() * 1000000) // الكود الجديد **************** } setData([newUser]); } // Add User const handleAdd = async () => { const response = await fetch('https://randomuser.me/api'); const responseData = await response.json(); const newUser = { user: `${responseData.results[0].name.first} ${responseData.results[0].name.last}`, // money: formatMoney(Math.floor(Math.random() * 1000000)) الكود القديم *************** money: Math.floor(Math.random() * 1000000) // الكود الجديد **************** }; setData([...data, newUser]); }; بحيث لا تقوم بفرمتت المال في هذه المرحلة، وإنما تقوم بفرمتته عند عرضه وذلك في المكون Main.jsx :
import React from "react"; function Main({ data }) { // Format number as money function formatMoney(number) { return "$" + number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,"); } return ( <div className='main'> <h2> <strong>Person</strong> Wealth </h2> {data.map((user, index) => ( <div key={index}> <h4 className='person'> <strong>{user.user}</strong> {formatMoney(user.money)} </h4> </div> ))} </div> ); } export default Main;  

جرب تعديل الكود للشكل التالي :
const [data, setData] = useState([]); async function fetchRandomUsers() { const response = await fetch("https://randomuser.me/api"); const responseData = await response.json(); // data عدلت اسم المتغير حتى لا يكون بنفس اسم الحال; const newUser = { user: `${responseData.results[0].name.first} ${responseData.results[0].name.first}`, money: Math.floor(Math.random() * 1000000), }; setData([...data, newUser]); return newUser; } useEffect(() => { // اضفت حلقة تتكرر 5 مرات ليتم اضافة 5 مستخدمين (async () => { const users = []; for (let i = 0; i < 5; i++) { const newUser = await fetchRandomUsers(); users.push(newUser); } setData(users); })(); }, []);  

اغلب الشركات تملك designer و frontend developer، حيث يأتيك ملف الـ xd أو غيره من برامج التصميم وتكون مهمتك هي تحويله إلى اكواد.
ولكن في حالات كثيرة قد يتم اعطاء بعض مهام الـ designer للـ frontend developer، ويجب على الـ frontend developer أن يمتلك بعض المهارات في التصميم حتى وإن لم يكن سيعمل كـ designer.
أما في مجال العمل الحر فأغلب الاعمال تتطلب منك ان تكون designer و frontend developer، وحتى backend developer في اغلب الحالات.