A modern, responsive web application for discovering and managing recipes from around the world. Built with vanilla JavaScript, Firebase, and featuring a beautiful, mobile-optimized UI with advanced recipe analysis.
- Multi-filter Search - Search by category, area, or ingredients
- Random Recipe Generator - Discover new dishes with one click
- Pantry Search - Find recipes based on ingredients you have at home
- Real-time Results - Instant search with skeleton loading states
- Smart Cooking Time Estimation - AI-powered time calculation based on ingredients and techniques
- Difficulty Assessment - Automatic difficulty rating from cooking methods
- Calorie Range Estimation - Nutritional insights based on ingredients and portions
- Cuisine Recognition - Enhanced with country flags and regional categorization
- Firebase Authentication - Secure login with Google Sign-In and email/password
- Personal Bookmarks - Save and organize favorite recipes with cloud sync
- User Profiles - Customizable profiles with editable display names and statistics
- Recipe History - Track your cooking journey and preferences
- Responsive Layout - Optimized for all screen sizes (320px to 4K+)
- Touch-Friendly Interface - Large buttons and swipe-friendly recipe cards
- Mobile Navigation - Collapsible menus and thumb-friendly controls
- Smooth Scrolling - Hardware-accelerated animations for buttery performance
- Glass-morphism Design - Beautiful frosted glass effects and modern aesthetics
- Formatted Instructions - Step-by-step cooking instructions with proper numbering
- Full-width Recipe View - Expanded modal layout for better readability
- Authentic Testimonials - Real user reviews with believable content
- Clean Typography - Professional fonts (Gabarito, Titillium Web) for excellent readability
🏠 Home Dashboard Modern navigation, recipe sliders, smart search |
🔐 Authentication Split-screen design, Google Sign-In, glass effects |
📱 Mobile Experience Responsive design, touch-friendly interface |
🍽️ Recipe Details Full-width instructions, smart analysis, bookmarks |
👤 User Profile Personal dashboard, bookmark management |
🔍 Advanced Search Multi-filter options, real-time results |
🥘 Pantry Search Ingredient-based recipe discovery |
📚 Saved Recipes Organized bookmark collection |
🎲 Random Discovery One-click recipe suggestions |
- Cooking Time Estimation - AI analyzes ingredients and techniques to predict cooking duration
- Difficulty Assessment - Automatic rating based on cooking methods and complexity
- Calorie Range Calculation - Nutritional insights derived from ingredients and portions
- Cuisine Recognition - Enhanced categorization with country flags and regional details
- Smooth Slider Performance - Hardware-accelerated scrolling for buttery smooth experience
- Responsive Testimonials - Optimized layout for mobile screens with authentic user reviews
- Touch-Friendly Navigation - Large buttons and intuitive mobile controls
- Mobile Recipe Cards - Compact, readable design perfect for phone screens
- Full-Width Recipe Instructions - Expanded modal layout for better readability
- Formatted Step-by-Step Cooking - Numbered instructions with proper spacing
- Authentic Testimonials - Real user reviews with Indian names for better relatability
- Clean, Professional Design - Eliminated horizontal scrollbars and optimized layouts
- Modern web browser
- Firebase account (for authentication and data storage)
- Clone the repository
- Set up Firebase configuration
- Deploy to your preferred hosting platform
- Create a Firebase project
- Enable Authentication (Email/Password and Google)
- Set up Firestore database
- Configure security rules
- Update
firebase-config.jswith your credentials
- HTML5 - Semantic markup with modern standards
- CSS3 - Advanced styling with Grid, Flexbox, and animations
- Vanilla JavaScript - Pure JS for optimal performance and compatibility
- CSS Grid & Flexbox - Modern layout systems for responsive design
- Firebase Authentication - Secure user management with Google Sign-In
- Cloud Firestore - Real-time NoSQL database for user data
- TheMealDB API - Comprehensive recipe database with 1000+ recipes
- Progressive Web App - Offline capabilities and app-like experience
- Font Awesome - Professional icon library
- Google Fonts - Gabarito (headings) & Titillium Web (body text)
- Glass-morphism UI - Modern frosted glass design language
- Responsive Images - Optimized for all screen sizes and resolutions
ZaikaBox is meticulously optimized for all devices:
| Device Type | Screen Size | Optimizations |
|---|---|---|
| 📱 Mobile | 320px - 767px | Touch-friendly buttons, stacked layouts, optimized scrolling |
| 📟 Tablet | 768px - 1199px | Balanced grid layouts, medium-sized touch targets |
| 💻 Desktop | 1200px - 1920px+ | Full-featured interface, hover effects, multi-column layouts |
| 🖥️ Large Screens | 1920px+ | Centered content with maximum width constraints |
- Hardware Acceleration - GPU-powered smooth scrolling and animations
- Optimized Touch Scrolling - Native momentum scrolling for iOS/Android
- Reduced JavaScript Complexity - Minimal DOM manipulation for better performance
- Compressed Assets - Optimized images and minified code
- Skeleton Loading States - Beautiful placeholders while content loads
- Progressive Enhancement - Core functionality works without JavaScript
- Lazy Loading - Images load only when needed
- Caching Strategy - Smart caching for faster subsequent visits
// Smart cooking time estimation algorithm
const estimateCookingTime = (instructions, ingredients) => {
// Analyzes cooking keywords, ingredient complexity, and instruction length
// Returns accurate time estimates: "15-30 min", "1+ hours", etc.
}
// Difficulty assessment based on techniques
const estimateDifficulty = (instructions, ingredients) => {
// Evaluates cooking techniques, ingredient count, and instruction complexity
// Returns: "Beginner", "Intermediate", or "Expert"
}- Touch-Optimized Sliders - Smooth horizontal scrolling with momentum
- Responsive Grid Layouts - Adaptive card sizes for optimal viewing
- Mobile Navigation - Collapsible menus with thumb-friendly controls
- Gesture Support - Swipe navigation and touch-friendly interactions
- Glass-morphism Effects - Frosted glass backgrounds with backdrop blur
- Smooth Animations - CSS transitions and transforms for fluid interactions
- Consistent Design System - Unified color palette and typography scale
- Accessibility Features - ARIA labels, keyboard navigation, and screen reader support
- Modern web browser (Chrome 90+, Firefox 88+, Safari 14+)
- Firebase account for authentication and database
- Internet connection for recipe API access
# 1. Clone the repository
git clone https://github.com/Pranay-Suthar/ZAIKABOX.git
# 2. Navigate to project directory
cd ZAIKABOX
# 3. Set up Firebase configuration
# Update ZAIKABOX/HTML/JS/firebase-config.js with your credentials
# 4. Deploy to your preferred hosting platform
# (Netlify, Vercel, Firebase Hosting, etc.)- Create Firebase Project - Set up a new project at Firebase Console
- Enable Authentication - Turn on Email/Password and Google Sign-In methods
- Set up Firestore - Create a database with appropriate security rules
- Get Configuration - Copy your Firebase config object
- Update Config File - Replace credentials in
firebase-config.js
// Firestore Security Rules
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /users/{userId} {
allow read, write: if request.auth != null && request.auth.uid == userId;
}
}
}- ✅ Optimized Mobile Scrolling - Fixed slider performance issues on touch devices
- ✅ Responsive Testimonials - Mobile-friendly layout with authentic user reviews
- ✅ Full-Width Recipe Instructions - Improved modal layout for better readability
- ✅ Formatted Cooking Steps - Numbered instructions with proper spacing
- ✅ Consistent Navigation - Unified button styles across all pages
- ✅ Mobile Bookmark Grid - Optimized 2-column layout for phone screens
- ✅ Eliminated Horizontal Scrolling - Fixed overflow issues for cleaner experience
- 🚀 50% Faster Mobile Scrolling - Hardware acceleration and optimized CSS
- 📱 Improved Touch Response - Better gesture recognition and feedback
- 🎨 Cleaner UI - Removed theme complexity for focused user experience
- 📖 Better Readability - Enhanced typography and spacing throughout
- 🎯 User-Centric Design - Every feature designed with user experience in mind
- 📱 Mobile-First Approach - Optimized for the majority of users on mobile devices
- 🧠 Smart Features - AI-powered recipe analysis and recommendations
- 🔒 Secure & Scalable - Firebase backend ensures data security and scalability
- 🎨 Modern Aesthetics - Beautiful glass-morphism design that feels premium
- ⚡ High Performance - Optimized for speed and smooth interactions
Pranay Suthar Lead Developer 📧 Email | 🔗 GitHub |
Aryan Thakar Co-Developer 📧 Email | 🔗 GitHub |
This project is licensed under the MIT License - see the LICENSE file for details.
We welcome contributions! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
If you found this project helpful, please give it a ⭐ on GitHub and share it with fellow food enthusiasts!
- Pranay Suthar - Lead Developer
- Aryan Thakar - Co-Developer
🍴 Made with ❤️ for food lovers everywhere 🍴
Discover • Cook • Share • Enjoy
