A modern, responsive React application for discovering and exploring food recipes. This application allows users to search for recipes, view detailed cooking instructions, and get information about ingredients and nutritional values.
- 🔍 Real-time recipe search
- 📝 Detailed recipe information including:
- Cooking time
- Serving size
- Vegetarian/Vegan indicators
- Price per serving
- 📋 Complete ingredient lists with measurements
- 📝 Step-by-step cooking instructions
- 🖼️ High-quality recipe images
- 💫 Smooth animations and transitions
- 📱 Responsive design for all devices
- ⚡ Fast performance with React 18
- 🔄 Real-time UI updates
- 🎨 Modern component architecture
- Node.js (version 14 or higher)
- npm or yarn
- A Spoonacular API key
- Clone the repository:
git clone https://github.com/6Glow/Food-Recipe-App.git- Install dependencies:
npm install- Create a
.envfile in the root directory and add your Spoonacular API key:
VITE_API_KEY=your_spoonacular_api_key_here
VITE_API_URL=https://api.spoonacular.com/recipes/complexSearch- Start the development server:
npm run dev- React - Frontend framework
- React 18.2.0 with improved rendering and concurrent features
- React Hooks for state management
- Custom hooks for API integration
- Functional components with TypeScript support
- Vite - Build tool
- Fast Hot Module Replacement (HMR)
- Optimized build process
- Environment variable handling
- Spoonacular API - Recipe data API
- CSS Modules - Styling
src/
├── components/ # Reusable React components
│ ├── Container.jsx # Layout container component
│ ├── FoodDetails.jsx # Detailed recipe view
│ ├── FoodItem.jsx # Individual recipe card
│ ├── FoodList.jsx # List of recipe cards
│ ├── InnerContainer.jsx # Inner layout component
│ ├── Item.jsx # Individual ingredient item
│ ├── ItemList.jsx # List of ingredients
│ ├── Nav.jsx # Navigation component
│ └── Search.jsx # Search functionality
├── App.jsx # Main application component
└── main.jsx # Application entry point
- Functional Components: Modern React components using hooks
- Custom Hooks: Specialized hooks for API calls and state management
- Props Type Checking: Runtime type checking for component props
- Error Boundaries: Graceful error handling
- Memo and Callbacks: Optimized rendering performance
- Real-time recipe search as you type
- Debounced search implementation
- Instant results display
- Rich preview cards for each recipe
- Search history management
- Comprehensive recipe information
- Ingredient lists with quantities
- Step-by-step cooking instructions
- Cooking time and serving size
- Dietary information (vegetarian/vegan)
- Cost per serving
- Nutritional information
- Dynamic image loading with lazy loading
- React Hooks for local state
- Custom hooks for shared logic
- Efficient state updates
- Optimized re-rendering
The application uses CSS Modules for styling, providing:
- Scoped styling for components
- Clean and modern UI design
- Smooth animations and transitions
- Responsive layout for all screen sizes
- Dark/Light mode support
- C 8595 SS Variables for theme customization
- Flexbox and Grid layouts
- Mobile-first approach
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Run linting
npm run lint- Hot Module Replacement (HMR)
- ESLint configuration
- Development mode with detailed errors
- Source maps for debugging
- Performance monitoring
Required environment variables:
VITE_API_KEY: Your Spoonacular API keyVITE_API_URL: Spoonacular API endpoint
- ESLint for code linting
- Prettier for code formatting
- React best practices enforcement
- Component composition patterns
- Custom hooks guidelines
- Performance optimization techniques
- Follow the existing code style
- Write meaningful commit messages
- Update documentation as needed
- Add tests for new features
- Ensure all tests pass before submitting
This project is licensed under the MIT License - see the LICENSE file for details.
- React.js team for the amazing framework
- Spoonacular API for the recipe data
- The open-source community for inspiration and tools