A modern food delivery application built with React TypeScript frontend and .NET backend, designed for deployment to Azure Container Apps using Azure Developer CLI (azd).
- Modern UI: Beautiful, responsive design inspired by popular food delivery apps
- Real Food Content: Sample restaurants and food items with real images from Unsplash
- Complete Food Delivery Flow: Browse restaurants → Add to cart → Checkout → Track orders
- Azure Container Apps: Scalable, serverless container hosting
- Azure Developer CLI: One-command deployment and management
- Frontend: React 18 + TypeScript + Material-UI
- Backend: .NET 9 Web API with RESTful endpoints
- Infrastructure: Azure Container Apps + Container Registry
- Deployment: Azure Developer CLI (azd)
- Azure Developer CLI
- Docker Desktop
- Azure subscription
-
Initialize the project:
azd init
-
Login to Azure:
azd auth login
-
Deploy to Azure:
azd up
This will:
- Create Azure resources (Container Apps, Container Registry, etc.)
- Build and push Docker images
- Deploy both frontend and backend
- Provide you with the live URLs
-
Run the backend:
cd GrubifyApi dotnet run -
Run the frontend:
cd grubify-frontend npm install npm start -
Access the app:
- Frontend: http://localhost:3000
- Backend API: http://localhost:5000
GET /api/restaurants- List all restaurantsGET /api/restaurants/{id}- Get restaurant detailsGET /api/fooditems/restaurant/{id}- Get menu items for restaurantGET /api/cart/{userId}- Get user's cartPOST /api/cart/{userId}/items- Add item to cartPOST /api/orders- Place an orderGET /api/orders/{id}- Track order status
- Home Page: Restaurant listings with search and filters
- Restaurant Page: Menu items with add-to-cart functionality
- Cart Page: Review items, modify quantities
- Checkout: Multi-step process with delivery and payment info
- Order Tracking: Real-time order status updates
- React 18 with TypeScript
- Material-UI (MUI) for components
- React Router for navigation
- Axios for API calls
- .NET 9 Web API
- Entity Framework Core ready
- Swagger/OpenAPI documentation
- CORS enabled for frontend
- Azure Container Apps
- Azure Container Registry
- Azure Log Analytics
- Bicep for Infrastructure as Code
The app uses the following environment variables:
Frontend:
REACT_APP_API_BASE_URL- Backend API URL
Backend:
ASPNETCORE_ENVIRONMENT- Environment (Development/Production)ASPNETCORE_URLS- Binding URLs
Configure your deployment with azd env set:
azd env set AZURE_LOCATION eastus2
azd env set AZURE_SUBSCRIPTION_ID your-subscription-idgrubify/
├── GrubifyApi/ # .NET Backend
│ ├── Controllers/ # API Controllers
│ ├── Models/ # Data Models
│ ├── Dockerfile # Backend container
│ └── Program.cs # App configuration
├── grubify-frontend/ # React Frontend
│ ├── src/
│ │ ├── components/ # Reusable components
│ │ ├── pages/ # Page components
│ │ ├── services/ # API services
│ │ └── types/ # TypeScript types
│ ├── Dockerfile # Frontend container
│ └── nginx.conf # Nginx configuration
├── infra/ # Azure Infrastructure
│ ├── main.bicep # Main Bicep template
│ ├── main.parameters.json # Parameters file
│ └── core/ # Bicep modules
└── azure.yaml # Azure Developer CLI config
# Deploy everything
azd up
# Deploy just the infrastructure
azd provision
# Deploy just the application code
azd deploy
# Monitor resources
azd monitor
# View environment details
azd show
# Clean up resources
azd downIf you prefer manual deployment:
- Create Azure Container Registry
- Build and push images
- Create Container Apps Environment
- Deploy container apps
See the infra/ directory for Bicep templates.
The app includes sample data for:
- 5 restaurants with different cuisines (Italian, Japanese, Indian, American, Healthy)
- 15+ food items with real images
- Complete menu categorization
- Realistic pricing and descriptions
- CORS configured for frontend domain
- Azure Managed Identity for container registry access
- Environment-based configuration
- Secure API communication
- Azure Log Analytics integration
- Container Apps built-in monitoring
- Application Insights ready
- Fork the repository
- Create a feature branch
- Make your changes
- Test locally with
azd up - Submit a pull request
This project is licensed under the MIT License.
For Azure Developer CLI issues, visit the azd documentation.
For application issues, please create an issue in this repository.