Simple Arab Code
Simple Arab Code
  • 236
  • 692 856
Full Stack Food Ordering App (Admin Dashboard ) -Next.js,Prisma,Stripe,Tailwind CSS Part 2 in Arabic
Learn how to build a food ordering app from scratch using Next.js, Tailwind CSS, Prisma, and TypeScript. This guide covers setting up an admin dashboard, managing restaurant menus, implementing payment processing, and optimizing the user interface for seamless orders and delivery tracking. Perfect for beginners and developers looking to refine their skills.
🔗 Full Stack Food Ordering App (Shopping Cart)
ua-cam.com/video/0Uauw7LDAa4/v-deo.html
🔗 Source code on Github
github.com/Kareem2002Shimes/food-ordering-app
📚 Tutorial References:
🔗 Playlist for ReactJS 2024 Series:
ua-cam.com/play/PLxRKoQzM5m3LhmXA4b9FwuuUFzRnJCzoe.html
🔗 Playlist for Next.js Series:
ua-cam.com/play/PLxRKoQzM5m3JJoFlboEXOUs36zuGiZW04.html
🔗 Learn Tailwind CSS:
ua-cam.com/video/nKAZkVSimRE/v-deo.html
🔗 Learn Prisma:
ua-cam.com/video/uRPLhqR_d5I/v-deo.html
🔗 Learn Next Auth:
ua-cam.com/video/GL2Dc4r6tkU/v-deo.html
🔗 Learn Zod with React Hook Form:
ua-cam.com/video/onXHb9Y5sf8/v-deo.html
🔗 Learn Shadcn UI in Next.js15 & React19:
ua-cam.com/video/V1r0ed0q1F4/v-deo.html
🔗 Learn Redux Toolkit:
ua-cam.com/play/PLxRKoQzM5m3J6gDMz-_eqLvxIR6UH0Pf7.html
🔗 Build Airbnb Project with Next.js:
ua-cam.com/video/yelcI4CFN_o/v-deo.html
🔗 Playlist for this Authentication & Authorization Series:
ua-cam.com/play/PLxRKoQzM5m3LmYyem25fvxfwWJZiFqIbf.html
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/kareem4shimas
💖 Support me on PayPal: www.paypal.com/paypalme/kareem4mohamed
🚩 Subscribe ➜ www.youtube.com/@SimpleArabCode
👇 Follow Me On Social Media:
Github: github.com/Kareem2002Shimes
facebook: profile.php?id=100095323242063
LinkedIn: www.linkedin.com/in/kareem-shimes-6a9b3a200
📚 Tutorial References:
🔗 NextAuth.js Official Site: next-auth.js.org/
🔗 Next.js Official Site: nextjs.org/
🔗 ES7 React Snippets Extension: marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
⏱️ Timestamps:
00:00:00 - Introduction
00:04:13 - App Features
00:18:13 - Setup Next Auth
00:39:11 - Add JSX for auth pages
00:48:30 - Build useFormFields Hook
01:20:03 - Add Signin Form (signin action)
02:24:09 - Add Signup Form (signup action)
03:02:27 - Protected Routes (Next Middleware)
04:07:52 - Add EditUserForm Component
05:52:55 - Add AdminTabs Component
06:00:47 - Add Categories Page
06:46:45 - Add MenuItems Page
10:17:01 - Add Users Page
10:33:43 - Test App Scenarios
#ReactJS #NextJS #Ecommerce
Переглядів: 3 325

Відео

متتعلمش كل حاجة ... اتعلم صح!
Переглядів 4,1 тис.Місяць тому
اتعلم المطلوب في Roadmap مش كل حاجة في المجالات المختلفة 📚 Tutorial References: 🔗 Build Full Stack Food Ordering App using Next.js: ua-cam.com/video/0Uauw7LDAa4/v-deo.html 🔗 Playlist for ReactJS 2024 Series: ua-cam.com/play/PLxRKoQzM5m3LhmXA4b9FwuuUFzRnJCzoe.html 🔗 Playlist for Next.js Series: ua-cam.com/play/PLxRKoQzM5m3JJoFlboEXOUs36zuGiZW04.html 🔗 Learn Tailwind CSS: ua-cam.com/video/nKAZkVS...
How to use Server Actions in Next js | شرح بالعربي
Переглядів 1,1 тис.Місяць тому
In this comprehensive tutorial, we dive into Server Actions in Next.js - a powerful feature that allows you to handle server-side logic directly within your components. Learn how to simplify data fetching, handle form submissions, and execute server-side code seamlessly, all within your React components. 📚 Tutorial References: 🔗 Build Full Stack Food Ordering App using Next.js: ua-cam.com/video...
Full Stack Food Ordering App (Shopping Cart) - Next.js,React,Prisma,Stripe,Tailwind Part 1 in Arabic
Переглядів 9 тис.Місяць тому
Learn how to build a food ordering app from scratch using Next.js, Tailwind CSS, Prisma, and TypeScript. This guide covers setting up an admin dashboard, managing restaurant menus, implementing payment processing, and optimizing the user interface for seamless orders and delivery tracking. Perfect for beginners and developers looking to refine their skills. 🔗 Source code on Github github.com/Ka...
Form Submission using useFormState & useFormStatus in ReactJS 19 [38] | دورة شاملة لتعلم ريأكت
Переглядів 675Місяць тому
Form Submission using useFormState & useFormStatus in ReactJS 19 [38] | دورة شاملة لتعلم ريأكت
Enhance user experience (useOptimisitc Hook) in ReactJS 19 [37] | دورة شاملة لتعلم ريأكت
Переглядів 542Місяць тому
Enhance user experience (useOptimisitc Hook) in ReactJS 19 [37] | دورة شاملة لتعلم ريأكت
How to Setup Shadcn UI + Themes in NextJs 15 | React 19 شرح بالعربي
Переглядів 1,3 тис.Місяць тому
How to Setup Shadcn UI Themes in NextJs 15 | React 19 شرح بالعربي
Improve Performance (Optimistic Updates) in ReactJS [36] | دورة شاملة لتعلم ريأكت
Переглядів 755Місяць тому
Improve Performance (Optimistic Updates) in ReactJS [36] | دورة شاملة لتعلم ريأكت
اتعلم المطلوب في السوق مش اللي بتحبه | تجارب حياتية (3)
Переглядів 1,5 тис.Місяць тому
اتعلم المطلوب في السوق مش اللي بتحبه | تجارب حياتية (3)
سر استمراري في التقدم والنجاح | تجارب حياتية (2) | ميسي ؟
Переглядів 6962 місяці тому
سر استمراري في التقدم والنجاح | تجارب حياتية (2) | ميسي ؟
تعلم كل شئ عن (ORM) Prisma مع Typescript
Переглядів 1,6 тис.2 місяці тому
تعلم كل شئ عن (ORM) Prisma مع Typescript
Build Custom Hook in ReactJS [35] | دورة شاملة لتعلم ريأكت
Переглядів 4762 місяці тому
Build Custom Hook in ReactJS [35] | دورة شاملة لتعلم ريأكت
useRef Hook in ReactJS [34] | دورة شاملة لتعلم ريأكت
Переглядів 2992 місяці тому
useRef Hook in ReactJS [34] | دورة شاملة لتعلم ريأكت
useReducer vs useState (State Management) in ReactJS [33] | دورة شاملة لتعلم ريأكت
Переглядів 2622 місяці тому
useReducer vs useState (State Management) in ReactJS [33] | دورة شاملة لتعلم ريأكت
useReducer in Data fetching in ReactJS [32] | دورة شاملة لتعلم ريأكت
Переглядів 3232 місяці тому
useReducer in Data fetching in ReactJS [32] | دورة شاملة لتعلم ريأكت
useReducer Hook (Example 3) in ReactJS [31] | دورة شاملة لتعلم ريأكت
Переглядів 3362 місяці тому
useReducer Hook (Example 3) in ReactJS [31] | دورة شاملة لتعلم ريأكت
useReducer Hook (Example 2) in ReactJS [30] | دورة شاملة لتعلم ريأكت
Переглядів 3412 місяці тому
useReducer Hook (Example 2) in ReactJS [30] | دورة شاملة لتعلم ريأكت
useReducer Hook in ReactJS [29] | دورة شاملة لتعلم ريأكت
Переглядів 4582 місяці тому
useReducer Hook in ReactJS [29] | دورة شاملة لتعلم ريأكت
Build Shopping Cart (Part 2) using ReactJS [28] | State Management | دورة شاملة لتعلم ريأكت
Переглядів 7222 місяці тому
Build Shopping Cart (Part 2) using ReactJS [28] | State Management | دورة شاملة لتعلم ريأكت
بعض الحيل للتقديم علي وظائف في مجالات البرمجة
Переглядів 4,2 тис.2 місяці тому
بعض الحيل للتقديم علي وظائف في مجالات البرمجة
Git & GitHub Crash Course شرح بالعربي
Переглядів 2,7 тис.2 місяці тому
Git & GitHub Crash Course شرح بالعربي
Build Shopping Cart using ReactJS [27] | Data fetching & state management | دورة شاملة لتعلم ريأكت
Переглядів 1,1 тис.2 місяці тому
Build Shopping Cart using ReactJS [27] | Data fetching & state management | دورة شاملة لتعلم ريأكت
أخر يوم شغل كا Frontend Developer في شركة عقارماب | تجارب حياتية
Переглядів 5 тис.2 місяці тому
أخر يوم شغل كا Frontend Developer في شركة عقارماب | تجارب حياتية
Context API (useContext) in ReactJS [26] | دورة شاملة لتعلم ريأكت
Переглядів 5203 місяці тому
Context API (useContext) in ReactJS [26] | دورة شاملة لتعلم ريأكت
Context API (ex1) in ReactJS [25] | دورة شاملة لتعلم ريأكت
Переглядів 5123 місяці тому
Context API (ex1) in ReactJS [25] | دورة شاملة لتعلم ريأكت
Context API in ReactJS [24] | دورة شاملة لتعلم ريأكت
Переглядів 5343 місяці тому
Context API in ReactJS [24] | دورة شاملة لتعلم ريأكت
useEffect called twice in ReactJS [23] | دورة شاملة لتعلم ريأكت
Переглядів 5553 місяці тому
useEffect called twice in ReactJS [23] | دورة شاملة لتعلم ريأكت
Data Fetching in ReactJS [22] | دورة شاملة لتعلم ريأكت
Переглядів 6233 місяці тому
Data Fetching in ReactJS [22] | دورة شاملة لتعلم ريأكت
Render data from API | Data Fetching in ReactJS [21] | دورة شاملة لتعلم ريأكت
Переглядів 5673 місяці тому
Render data from API | Data Fetching in ReactJS [21] | دورة شاملة لتعلم ريأكت
تفاصيل حول منصة دورات البرمجة في Simple Arab Code
Переглядів 5073 місяці тому
تفاصيل حول منصة دورات البرمجة في Simple Arab Code

КОМЕНТАРІ

  • @ahmed-goda510
    @ahmed-goda510 3 години тому

    ممكن تشرح mongodb

  • @momarzouq
    @momarzouq 6 годин тому

    شغل عالي جدا ربنا يبارك فيك

  • @asmaamohamed3857
    @asmaamohamed3857 15 годин тому

    متحمسة جداااا , ربنا يبارك فيك ويجازيك كل خير

  • @shabanelmogy7912
    @shabanelmogy7912 16 годин тому

    ربنا يوفقك

  • @Abdallah_Essam
    @Abdallah_Essam 16 годин тому

    طب بالنسبة ان اغلب الشركات ان مكنش كلها مش عايزين حد جونيور او مشتغلش في شركة قبل كده ، الجونيور هيلاقي شغل ازاي ؟

    • @SimpleArabCode
      @SimpleArabCode 13 годин тому

      الشركات startup بتطلب ناس juniors والشركات دي بتتعرف من حجم التيم اللي شغال في الشركه ومنها بتطلع للشركات اللي بتطلب سينيورز

  • @shabanelmogy7912
    @shabanelmogy7912 16 годин тому

    ربنا يوفقك

  • @shabanelmogy7912
    @shabanelmogy7912 17 годин тому

    ممتاز ربنا يوفقك

  • @تكنولوجي-ز8ن
    @تكنولوجي-ز8ن 23 години тому

    اشكرك انت ساعدتني كثيرا بارك الله فيك وفي علمك ونفعنا الله بك

  • @shabanelmogy7912
    @shabanelmogy7912 День тому

    ربنا يوفقك

  • @STAN-LEB
    @STAN-LEB День тому

    We waiting a video of action gitHub, bcs how u are explain its amazing, Keep Doing❤

  • @shabanelmogy7912
    @shabanelmogy7912 День тому

    ربنا يوفقك

  • @Ahmed-pu5st
    @Ahmed-pu5st День тому

    ❤❤❤❤❤❤

  • @rimazmar8823
    @rimazmar8823 День тому

    footer il foooter

  • @ahmedatef1343
    @ahmedatef1343 День тому

    ممكن تعمل فيديوهات لtools تساعد في الشغل لفل ستاك

  • @sobhan-allah-obhmdhi
    @sobhan-allah-obhmdhi 3 дні тому

    انا عندى مشكلة فى تنزيل الmigrate وجربت كل حاجة ومش عايز يعمل حد يقدر يفيدنى

  • @ItsMe-mk5kc
    @ItsMe-mk5kc 3 дні тому

    ربنا يوفقك ويجزيك كل خير (نصيحة ما تحطش موسيقى في فيديوهاتك عشان ماتبقاش سيئات عليك)

  • @tarekhero9764
    @tarekhero9764 5 днів тому

    ماشاء الله عليك يا جدع ربنا يزيد ويبارك دانت تنين مجنح باذن المولى عز وجل هعديك

  • @ahmedelbecy
    @ahmedelbecy 6 днів тому

    جزاك الله خيرا ❤مجهود اكثر من رائع❤❤❤

  • @ahmedelbecy
    @ahmedelbecy 6 днів тому

    ممتاز ❤

  • @mawahanna
    @mawahanna 6 днів тому

    حاجة ولا أسامة إلزيرو 😂

  • @ismailbadawy1001
    @ismailbadawy1001 6 днів тому

    ما شاء الله تبارك الله , ربنا يجعله في ميزان حسناتك يارب, شرح فوق الممتاز بجد .. اسلوب ممتاز ومميز وشرح مبسط وبالتفاصيل ولما ربنا يبارك فيك يارب وجزاك الله كل خير

  • @sh7004
    @sh7004 7 днів тому

    سويت كل الخطوات لكن للاسف ما يعرض لي غير ٦ صور وانا حاطه ٨ صور ايش الحل؟

  • @AhmedRaed-o3o
    @AhmedRaed-o3o 7 днів тому

    بارك الله بك٫ شنو الفرق بين Next-Auth و Auth.js؟

  • @gamal-t2e
    @gamal-t2e 8 днів тому

    احسن شرح للرياكت لقيته علي اليوتيوب ربنا يبارك فيك ويزيدك من علمه

  • @AhmedFahmy-g4w
    @AhmedFahmy-g4w 8 днів тому

    السلام عليكم جزاك الله خيرا يا بشمهندس كريم وجعله فى ميزان حسناتك بخصوص جزئية الترجمة انا كان عندى تعقيب صغير انت كان ممكن تستخدم params علشان تجيب locale بدل ما تستخدم export const getCurrentLocale = async () => { const url = (await headers()).get('x-url'); const locale = url?.split('/')[3] as Locale; return locale; }; import getTrans from "@/lib/translation"; import { Locale } from "@/i18n.config"; export default async function Home({ params }: { params: { locale: Locale } }) { const { locale } = params; const { title} = await getTrans(locale) return ( <main> <h2>{title}</h2> </main> ); } انا مش عارف اذا كان فيه فرق ولا لا بس انا شايف انى دى اسهل وانضف

    • @SimpleArabCode
      @SimpleArabCode 8 днів тому

      لو موجود في page بتجيب locale من params لو في server component مش بس page بتستخدم getCurrentLocale

  • @sharkgaming3998
    @sharkgaming3998 9 днів тому

    عاش يا باش مهندس ماشاء الله المشروع فعلا قوي ربنا يجعله في ميزان جسناتك ان شاء الله , بس في تعليق بسيط, بالنسبة لجزئية الضغط علي زرار اضافة الي السلة تحديدا في 3:54:09 انت مش بتعمل request غلي الفاضي هقولك ليه, دلوقتي انا لو اضفت منتج الي السلة وجيت بعد شهر مثلا علشان اشتري المنتج ده, وارد جدا ان المنتج يكون سعره اتغير, لكن صفحة السلة هيكون فيها السعر القديم وده مش صح, علشان كده الافضل ان يكون معاك الايديز والكمية بتاعت المنتجات واول ما المستخدم يفنح صفحة السلة يبعت request علشان يجيب احدث القيم, اتمني تكون الفكرة وصلت ومستني ردك ان شاء الله علشان انا لو غلطان في حاجة تصححهالي, وجزاك الله خيرا

    • @SimpleArabCode
      @SimpleArabCode 9 днів тому

      محتوي ال cart بيجي من redux store ودا بينضاف اثناء data fetching لل products طبعا فيه caching بيتم قدامك حلين اولا تستخدم ISR وهو انك revalidate cache after 3600 مثلا او لو بتستخدم طريقه caching with tags فا ساعتها وانت في Admin Dashboard بتغير بيانات المنتج سعتها تعمل Revalidate products tag كده ضامن احدث بيانات للمنتجات في cart

  • @MOHAMMED4754
    @MOHAMMED4754 9 днів тому

    مجهود جبار شكرا لك ❤❤

  • @icecream-wzsz
    @icecream-wzsz 10 днів тому

    G R E A T L E S S O N 🌼🌼🌼🌼🌼

  • @ichamama3826
    @ichamama3826 10 днів тому

    دورة كانت مفيدة

  • @ichamama3826
    @ichamama3826 10 днів тому

    ❤شكرا على كل شيء

  • @rahafalali2010
    @rahafalali2010 10 днів тому

    والله بحاول الاقي مالقيت😊

  • @mohamedbadresmail6868
    @mohamedbadresmail6868 11 днів тому

    انا عايز اتواصل معاك والله عشان اشكرك بس فعلا ربنا يباركلك يارب و يوفقك ف حياتك اكتر و اكتر يارب ♥♥♥♥♥

  • @mohamed46130
    @mohamed46130 14 днів тому

    هل استطيع ان استخدم redux فى الجلوبال state فقط واستخدم معه react query بدون استخدام rtk query ؟

  • @abdelalibelmady
    @abdelalibelmady 15 днів тому

    THANKS BRO ❤

  • @moaazibrahim-vq6jj
    @moaazibrahim-vq6jj 15 днів тому

    عشان كده بسمعك

  • @Ebrahim.Ahmed1
    @Ebrahim.Ahmed1 16 днів тому

    هوا خلاص كده ده اخر حاجه فى الكورس

  • @EGTARHAC
    @EGTARHAC 16 днів тому

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

  • @رتاج-ع2ع
    @رتاج-ع2ع 16 днів тому

    لو بيكون فيديو يشرح كيف برمجة admin panel

  • @YuuNimation
    @YuuNimation 16 днів тому

    you deserve millions of subscribers man

  • @YuuNimation
    @YuuNimation 16 днів тому

    do you have any paid courses

  • @MohamedKamal-rq6hq
    @MohamedKamal-rq6hq 16 днів тому

    الله ينور يا هندسة ❤❤

  • @Mahmoud-MAG
    @Mahmoud-MAG 16 днів тому

    ❤❤❤❤❤❤❤

  • @hadilibrahim4465
    @hadilibrahim4465 16 днів тому

    شكرا إلك... جزاك الله خيرا أتمنى يوما ما أن يكون هناك مشروع مع zustand وال react query ويعطيك العافية يارب 🤲✨️

  • @Mustafa_Alarify_IT
    @Mustafa_Alarify_IT 16 днів тому

    🎉🎉🎉🎉🎉❤❤❤❤❤❤

  • @xboxgame8580
    @xboxgame8580 16 днів тому

    احسن شرح عربي و مستوى جد عالي في شرح الاساسيات ماشاءالله ضابط المسائل ديالك👏🏻. بفضلك فهمت مسألة السيرفر و الكلاينت والفرق بينهم. شكرا بزاف على المحتوى لي كاتقدمو

  • @abdullahbamzahm3436
    @abdullahbamzahm3436 17 днів тому

    هل هذا مشروع متكامل او part 2 لمشروع سابق نحتاج نشوف part 1

  • @omardahab9708
    @omardahab9708 17 днів тому

    يعم ايه الجمال ده ربنا يباركلك ❤❤❤

  • @English_with_raw
    @English_with_raw 17 днів тому

    الله يحفظك😊

  • @mohamedhanfy7963
    @mohamedhanfy7963 17 днів тому

    مبدع كالعادة 🖤🖤🖤🖤🖤

  • @doaa.abdelfattah
    @doaa.abdelfattah 17 днів тому

    جزاك الله كل خير وجعله في ميزان حسناتك ❤