Zayka Express is a modern, responsive e-commerce platform specialized in authentic food delivery and online ordering services. This repository contains the frontend implementation built with React.js and Vite, showcasing modern web development practices, clean UI/UX design, and seamless user experience.
⚠️ Note: This repository contains only the frontend code for portfolio demonstration purposes. The backend API, database, and admin panel are privately hosted as this is a production application currently serving real customers.
- Food Catalog: Browse through extensive food collections with categories
- Food Details: Comprehensive product information with images and descriptions
- Shopping Cart: Add, remove, and manage cart items with real-time updates
- Order Management: Place orders and track order history
- User Authentication: Secure login/registration system with JWT tokens
- Payment Integration: Stripe payment gateway integration
- Search & Filter: Advanced food search and category filtering
- Responsive Design: Optimized for all device sizes (mobile-first approach)
- Modern UI/UX: Clean, intuitive interface with smooth animations
- Fast Loading: Optimized performance with Vite build tool
- Interactive Components: Dynamic food display and cart management
- Toast Notifications: Real-time feedback for user actions
- Protected Routes: Authenticated pages for orders and profile
- Favorites System: Save favorite food items for quick access
- Home: Landing page with food categories and featured items
- All Foods: Complete food catalog with search and filter
- Food Detail: Individual food item details with add to cart
- Cart: Shopping cart management with quantity controls
- Place Order: Checkout process with user details and payment
- My Orders: Order history and tracking for logged-in users
- Profile: User profile management and settings
- Favorites: Saved favorite food items
- Search Results: Dynamic search results display
- Contact Us: Customer support and contact information
- About Us: Company information and story
- Delivery: Delivery information and policies
- Privacy Policy: Privacy and data protection policies
- Verify: Order verification and confirmation page
- React.js (v18.2.0) - Modern JavaScript library for building user interfaces
- Vite (v5.0.8) - Fast build tool and development server
- React Router DOM (v6.22.0) - Client-side routing and navigation
- React Toastify (v10.0.4) - Toast notification system
- CSS3 - Custom styling with modern CSS features
- Responsive Design - Mobile-first responsive layout
- Axios (v1.6.7) - HTTP client for API calls
- React Context API - Global state management for cart, user, and app state
- Custom Hooks - Reusable logic components
- Local Storage - Persistent storage for user sessions
- Stripe (v3.0.3) - Payment processing integration
- JWT Authentication - Secure user authentication
- Protected Routes - Route-level access control
- ESLint - Code quality and consistency
- Vite Plugins - Development enhancement and build optimization
- Modern JavaScript (ES6+) - Latest JavaScript features
frontend/
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── Navbar/ # Navigation component
│ │ ├── Header/ # Page header component
│ │ ├── Footer/ # Footer component
│ │ ├── LoginPopup/ # Authentication modal
│ │ ├── FoodDisplay/ # Food items grid display
│ │ ├── FoodItem/ # Individual food item component
│ │ ├── ExploreMenu/ # Category menu component
│ │ ├── SearchResults/ # Search results display
│ │ ├── StarRating/ # Rating system component
│ │ ├── ReviewsList/ # Reviews display component
│ │ ├── OrderTracking/ # Order status tracking
│ │ ├── FavoriteButton/ # Favorite toggle component
│ │ ├── UserReviews/ # User review management
│ │ └── AppDownload/ # App download section
│ ├── pages/ # Route components
│ │ ├── Home/ # Landing page
│ │ ├── AllFoods/ # Food catalog page
│ │ ├── FoodDetail/ # Individual food detail page
│ │ ├── Cart/ # Shopping cart page
│ │ ├── PlaceOrder/ # Checkout page
│ │ ├── MyOrders/ # Order history page
│ │ ├── Profile/ # User profile page
│ │ ├── Favorites/ # Favorite items page
│ │ ├── ContactUs/ # Contact page
│ │ ├── AboutUs/ # About page
│ │ ├── Delivery/ # Delivery info page
│ │ ├── PrivacyPolicy/ # Privacy policy page
│ │ └── Verify/ # Order verification page
│ ├── Context/ # Global state management
│ │ └── StoreContext.jsx # Main app context
│ ├── assets/ # Static resources (images, icons)
│ ├── App.jsx # Main app component with routing
│ ├── main.jsx # Application entry point
│ └── index.css # Global styles
├── public/ # Public assets and index.html
├── package.json # Dependencies and scripts
├── vite.config.js # Vite build configuration
├── .eslintrc.cjs # ESLint configuration
└── .gitignore # Git ignore rules
- Node.js (v16 or higher)
- npm or yarn package manager
# Clone the repository
git clone [repository-url]
cd zayka-express
# Navigate to frontend directory
cd frontend
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Run ESLint
npm run lintCreate a .env file in the frontend directory if needed:
VITE_API_URL=http://localhost:4000
VITE_STRIPE_PUBLIC_KEY=your_stripe_public_key- Production Environment: This is a live Zayka Express platform serving real customers
- Sensitive Data: Contains payment gateways, user data, order information, and business logic
- Security: API keys, database connections, and admin functionalities are protected
- Compliance: Maintains data privacy and food safety standards
- ✅ Complete frontend implementation
- ✅ Modern React architecture and patterns
- ✅ Responsive UI/UX components and design
- ✅ API integration structure and state management
- ✅ Payment integration (frontend)
- ✅ User authentication flow
- ✅ Cart and order management system
- 🔒 Backend API and database
- 🔒 Admin panel and restaurant dashboard
- 🔒 Payment processing logic and webhooks
- 🔒 User data and order analytics
- 🔒 Production deployment configurations
- 🔒 Restaurant management system
- Modern React Patterns: Functional components, hooks, context API
- Responsive Design: Mobile-first approach with CSS Grid and Flexbox
- Performance Optimization: Code splitting, lazy loading, and optimized builds
- API Integration: RESTful API consumption with error handling
- State Management: Complex application state with React Context
- Authentication: JWT-based user authentication and protected routes
- Payment Integration: Stripe payment gateway implementation
- SEO Optimization: Semantic HTML and meta tag management
- Complete E-commerce Flow: Browse → Add to Cart → Checkout → Payment
- User Management: Registration, login, profile management
- Order Processing: Cart management to order completion
- Search & Discovery: Food search, filtering, and categorization
- Review System: Customer reviews and ratings
- Favorites System: Save and manage favorite items
- Order Tracking: Real-time order status updates
- Component Architecture: Modular, reusable component design
- Custom Hooks: Reusable logic for data fetching and state management
- Error Handling: Comprehensive error boundaries and user feedback
- Loading States: Smooth loading experiences throughout the app
- Form Validation: Client-side validation with user-friendly feedback
- Toast Notifications: Real-time user feedback system
Note: As this is a production application, the live demo with backend functionality is not publicly accessible. This repository demonstrates the frontend implementation and development skills.
For live demo access or backend code review, please contact:
- 📧 Email: [email protected]
- 💼 LinkedIn: https://www.linkedin.com/in/tabrezrabbani
- 🐱 GitHub: https://github.com/tabrez-rabbani
Developer: Tabrez Rabbani
- 🌐 Portfolio: https://tabrezrabbani.in
- 📧 Email: [email protected]
- 💼 LinkedIn: https://www.linkedin.com/in/tabrezrabbani
- 🐱 GitHub: https://github.com/tabrez-rabbani
This project is proprietary software. The source code is provided for portfolio demonstration purposes only.
All rights reserved. No part of this software may be reproduced, distributed, or transmitted in any form or by any means, including photocopying, recording, or other electronic or mechanical methods, without the prior written permission of the developer.
For licensing inquiries, please contact the developer.
⭐ If you're a recruiter or potential collaborator, I'd love to discuss this project and demonstrate the complete application including backend functionality in a private setting!
- Real-time Order Tracking: WebSocket integration for live updates
- Push Notifications: Browser notifications for order updates
- Multi-language Support: Internationalization (i18n)
- Dark Theme: Theme switching capability
- Progressive Web App: PWA features for mobile experience
- Advanced Filters: More sophisticated search and filtering options