Full Stack Food Ordering App (Shopping Cart) - Next.js,React,Prisma,Stripe,Tailwind Part 1 in Arabic

Опубликовано: 18 Январь 2025
на канале: Simple Arab Code

6,935

433

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
https://github.com/Kareem2002Shimes/f...

📚 Tutorial References:
🔗 Playlist for ReactJS 2024 Series:
   • دورة شاملة لتعلم React JS 2024

🔗 Playlist for Next.js Series:
   • Learn Next.js in Arabic

🔗 Learn Tailwind CSS:
   • تعلم كل شئ في Tailwind CSS في فديو واحد

🔗 Learn Prisma:
   • تعلم كل شئ عن (ORM) Prisma مع Typescript

🔗 Learn Next Auth:
   • Next-Auth Login Authentication Tutori...

🔗 Learn Zod with React Hook Form:
   • Learn React Hook Form & Zod | Form va...

🔗 Learn Shadcn UI in Next.js15 & React19:
   • How to Setup Shadcn UI + Themes in Ne...

🔗 Learn Redux Toolkit:
   • Redux Toolkit Tutorial

🔗 Build Airbnb Project with Next.js:
   • Build Airbnb Clone with NEXT.JS! | Ap...

🔗 Playlist for this Authentication & Authorization Series:
   • The Complete Guide to master Authenti...

☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/kareem4s...

💖 Support me on PayPal: https://www.paypal.com/paypalme/karee...

🚩 Subscribe ➜    / @simplearabcode

👇 Follow Me On Social Media:
Github: https://github.com/Kareem2002Shimes
facebook: https://www.facebook.com/profile.php?...
LinkedIn:   / kareem-shimes-6a9b3a200

📚 Tutorial References:
🔗 NextAuth.js Official Site: https://next-auth.js.org/
🔗 Next.js Official Site: https://nextjs.org/
🔗 ES7 React Snippets Extension: https://marketplace.visualstudio.com/...

⏱️ Timestamps:

00:00:00 - Introduction
00:06:05 - Setup Next.js Project
00:20:57 - Setup Shadcn UI
00:30:35 - Add Header Component
00:55:21 - Add Hero Component
01:06:48 - Add Best Sellers Component
01:51:56 - Database Setup
02:40:06 - Next.js Caching
02:54:42 - Update Database Schema
03:18:41 - About Page
03:21:20 - Contact Page
03:22:26 - Add Footer Component
03:23:33 - Menu Page
03:33:45 - Shopping Cart Logic
05:31:15 - Add Internationalization in Next.js
06:23:53 - The Next Parts?
06:26:00 - Push the code into Github?

#ReactJS #NextJS #Ecommerce