- 236
- 692 856
Simple Arab Code
Приєднався 25 лют 2022
CODING MADE SIMPLE
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
🔗 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
ممكن تشرح mongodb
الافضل بوستقر
@salimalaleeli مع node?
شغل عالي جدا ربنا يبارك فيك
متحمسة جداااا , ربنا يبارك فيك ويجازيك كل خير
ربنا يوفقك
طب بالنسبة ان اغلب الشركات ان مكنش كلها مش عايزين حد جونيور او مشتغلش في شركة قبل كده ، الجونيور هيلاقي شغل ازاي ؟
الشركات startup بتطلب ناس juniors والشركات دي بتتعرف من حجم التيم اللي شغال في الشركه ومنها بتطلع للشركات اللي بتطلب سينيورز
ربنا يوفقك
ممتاز ربنا يوفقك
اشكرك انت ساعدتني كثيرا بارك الله فيك وفي علمك ونفعنا الله بك
ربنا يوفقك
We waiting a video of action gitHub, bcs how u are explain its amazing, Keep Doing❤
ربنا يوفقك
❤❤❤❤❤❤
footer il foooter
ممكن تعمل فيديوهات لtools تساعد في الشغل لفل ستاك
انا عندى مشكلة فى تنزيل الmigrate وجربت كل حاجة ومش عايز يعمل حد يقدر يفيدنى
ربنا يوفقك ويجزيك كل خير (نصيحة ما تحطش موسيقى في فيديوهاتك عشان ماتبقاش سيئات عليك)
ماشاء الله عليك يا جدع ربنا يزيد ويبارك دانت تنين مجنح باذن المولى عز وجل هعديك
جزاك الله خيرا ❤مجهود اكثر من رائع❤❤❤
ممتاز ❤
حاجة ولا أسامة إلزيرو 😂
ما شاء الله تبارك الله , ربنا يجعله في ميزان حسناتك يارب, شرح فوق الممتاز بجد .. اسلوب ممتاز ومميز وشرح مبسط وبالتفاصيل ولما ربنا يبارك فيك يارب وجزاك الله كل خير
سويت كل الخطوات لكن للاسف ما يعرض لي غير ٦ صور وانا حاطه ٨ صور ايش الحل؟
بارك الله بك٫ شنو الفرق بين Next-Auth و Auth.js؟
احسن شرح للرياكت لقيته علي اليوتيوب ربنا يبارك فيك ويزيدك من علمه
السلام عليكم جزاك الله خيرا يا بشمهندس كريم وجعله فى ميزان حسناتك بخصوص جزئية الترجمة انا كان عندى تعقيب صغير انت كان ممكن تستخدم 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> ); } انا مش عارف اذا كان فيه فرق ولا لا بس انا شايف انى دى اسهل وانضف
لو موجود في page بتجيب locale من params لو في server component مش بس page بتستخدم getCurrentLocale
عاش يا باش مهندس ماشاء الله المشروع فعلا قوي ربنا يجعله في ميزان جسناتك ان شاء الله , بس في تعليق بسيط, بالنسبة لجزئية الضغط علي زرار اضافة الي السلة تحديدا في 3:54:09 انت مش بتعمل request غلي الفاضي هقولك ليه, دلوقتي انا لو اضفت منتج الي السلة وجيت بعد شهر مثلا علشان اشتري المنتج ده, وارد جدا ان المنتج يكون سعره اتغير, لكن صفحة السلة هيكون فيها السعر القديم وده مش صح, علشان كده الافضل ان يكون معاك الايديز والكمية بتاعت المنتجات واول ما المستخدم يفنح صفحة السلة يبعت request علشان يجيب احدث القيم, اتمني تكون الفكرة وصلت ومستني ردك ان شاء الله علشان انا لو غلطان في حاجة تصححهالي, وجزاك الله خيرا
محتوي ال cart بيجي من redux store ودا بينضاف اثناء data fetching لل products طبعا فيه caching بيتم قدامك حلين اولا تستخدم ISR وهو انك revalidate cache after 3600 مثلا او لو بتستخدم طريقه caching with tags فا ساعتها وانت في Admin Dashboard بتغير بيانات المنتج سعتها تعمل Revalidate products tag كده ضامن احدث بيانات للمنتجات في cart
مجهود جبار شكرا لك ❤❤
G R E A T L E S S O N 🌼🌼🌼🌼🌼
دورة كانت مفيدة
❤شكرا على كل شيء
والله بحاول الاقي مالقيت😊
انا عايز اتواصل معاك والله عشان اشكرك بس فعلا ربنا يباركلك يارب و يوفقك ف حياتك اكتر و اكتر يارب ♥♥♥♥♥
هل استطيع ان استخدم redux فى الجلوبال state فقط واستخدم معه react query بدون استخدام rtk query ؟
THANKS BRO ❤
عشان كده بسمعك
هوا خلاص كده ده اخر حاجه فى الكورس
ربنا يبارك فيك كان في كمية افكار كنت عاوز اطبقها عشان ابقى جاهز لسوق العمل لقيتها هنا ولقيتها في قناتك بشكل عام اسئل الله رب العرش العظيم ان يرزقك رزقا كبيرا ربنا يبارك فيك يا باش مهندس
لو بيكون فيديو يشرح كيف برمجة admin panel
you deserve millions of subscribers man
do you have any paid courses
الله ينور يا هندسة ❤❤
❤❤❤❤❤❤❤
شكرا إلك... جزاك الله خيرا أتمنى يوما ما أن يكون هناك مشروع مع zustand وال react query ويعطيك العافية يارب 🤲✨️
🎉🎉🎉🎉🎉❤❤❤❤❤❤
احسن شرح عربي و مستوى جد عالي في شرح الاساسيات ماشاءالله ضابط المسائل ديالك👏🏻. بفضلك فهمت مسألة السيرفر و الكلاينت والفرق بينهم. شكرا بزاف على المحتوى لي كاتقدمو
هل هذا مشروع متكامل او part 2 لمشروع سابق نحتاج نشوف part 1
يعم ايه الجمال ده ربنا يباركلك ❤❤❤
الله يحفظك😊
مبدع كالعادة 🖤🖤🖤🖤🖤
جزاك الله كل خير وجعله في ميزان حسناتك ❤