A modern, full-stack food ordering web application with real-time order tracking, built with .NET 10, React 19, and SignalR.
- Browse Menu - Explore categories (Pizza, Burgers, Appetizers, Desserts, Drinks)
- Real-Time Order Tracking - Live order status updates via SignalR WebSockets
- Secure Authentication - JWT-based user authentication
- Shopping Cart - Add/remove items with quantity management
- Multiple Payment Options - Stripe integration and Cash on Delivery
- Order History - View past orders and their status
- Bilingual Support - English and Arabic (RTL support)
- Responsive Design - Works seamlessly on desktop and mobile
- Dashboard - Overview of orders, revenue, and statistics
- Order Management - View and update order status in real-time
- Product Management - Add, edit, and delete products
- Category Management - Organize products by categories
- Real-Time Notifications - Instant alerts for new orders
- User Management - View customer information
- .NET 10 - Web API framework
- Entity Framework Core - ORM for database operations
- SQL Server - Database (LocalDB)
- ASP.NET Identity - User authentication and authorization
- JWT Authentication - Token-based security
- SignalR - Real-time WebSocket communication
- Stripe API - Payment processing
- React 19 - UI library
- Vite - Build tool and dev server
- Redux Toolkit - State management
- React Router - Client-side routing
- TailwindCSS 4 - Styling
- Lucide React - Icon library
- i18next - Internationalization (i18n)
- @microsoft/signalr - SignalR client for React
git clone <repository-url>
cd Online-Food-Ordering-Web-ApplicationNavigate to the backend directory:
cd backend/FoodOrdering.ApiRestore NuGet packages:
dotnet restoreConfigure the database connection in appsettings.json:
{
"ConnectionStrings": {
"DefaultConnection": "Server=(localdb)\\MSSQLLocalDB;Database=FoodOrderingDb;Trusted_Connection=True;MultipleActiveResultSets=true;TrustServerCertificate=True"
}
}Configure JWT settings:
{
"Jwt": {
"Key": "Your-Secret-Key-Here",
"Issuer": "YourIssuer",
"Audience": "YourAudience"
}
}Configure Stripe (optional):
{
"Stripe": {
"SecretKey": "sk_test_your_stripe_secret_key",
"PublishableKey": "pk_test_your_stripe_publishable_key"
}
}Navigate to the frontend directory:
cd frontendInstall dependencies:
npm installcd backend/FoodOrdering.Api
dotnet runThe API will be available at:
- HTTP:
http://localhost:5157 - HTTPS:
https://localhost:7056 - Swagger UI:
http://localhost:5157/swagger
cd frontend
npm run devThe frontend will be available at:
http://localhost:5173
Online-Food-Ordering-Web-Application/
├── backend/
│ └── FoodOrdering.Api/
│ ├── Controllers/ # API endpoints
│ ├── Data/ # Database context and seeding
│ ├── Dtos/ # Data transfer objects
│ ├── Hubs/ # SignalR hubs for real-time
│ ├── Models/ # Entity models
│ ├── Migrations/ # Database migrations
│ ├── Services/ # Business logic services
│ └── Program.cs # Application entry point
├── frontend/
│ ├── public/ # Static assets
│ ├── src/
│ │ ├── components/ # Reusable components
│ │ ├── pages/ # Page components
│ │ ├── services/ # API and SignalR services
│ │ ├── store/ # Redux state management
│ │ ├── App.jsx # Main app component
│ │ └── main.jsx # Entry point
│ └── package.json
└── README.md
- Email: admin@food.com
- Password: Admin123!
- Email: customer@food.com
- Password: Customer123!
POST /api/auth/register- Register new userPOST /api/auth/login- Login userGET /api/auth/profile- Get user profile
GET /api/categories- Get all categoriesGET /api/products- Get all productsPOST /api/products- Create product (Admin)PUT /api/products/{id}- Update product (Admin)DELETE /api/products/{id}- Delete product (Admin)
POST /api/orders- Place orderGET /api/orders/my-orders- Get user ordersGET /api/orders/admin-orders- Get all orders (Admin)GET /api/orders/{id}- Get order by IDPUT /api/orders/{id}/status- Update order status (Admin)
POST /api/payments/create-intent- Create Stripe payment intent
/hubs/order- Real-time order updates
The application uses Entity Framework Core with Code First migrations. The database is automatically created and seeded with:
- 5 food categories
- 20 products (4 per category)
- Admin and customer demo users
The application supports English and Arabic languages. Language switching is available in the navigation bar.
Using SignalR WebSockets, the application provides:
- Instant order status updates - Customers see status changes immediately
- Live admin notifications - Admins receive new orders instantly
- Automatic reconnection - Handles connection drops gracefully
The backend is configured to allow requests from:
http://localhost:5173http://localhost:5174https://localhost:5173https://localhost:5174
Key configuration is in appsettings.json:
- Database connection string
- JWT secret key
- Stripe API keys
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License.
- Development Team
- Food images from Unsplash
- Icons from Lucide
- UI components inspired by modern food delivery platforms
For support, email support@bites.com or open an issue in the repository.
Built with ❤️ using .NET and React