Cook Book 👨‍🍳

A modern, responsive recipe application built with React that allows users to browse and search through a collection of delicious recipes. The application features a clean, user-friendly interface with search functionality and recipe categorization.

🚀 Features

• Recipe Browser: Browse through a comprehensive collection of recipes with beautiful card layouts
• Search Functionality: Real-time search to find recipes by title
• Responsive Design: Fully responsive design that works on desktop, tablet, and mobile devices
• External Recipe Links: Direct links to full recipe instructions on external sites
• Hero Section: Eye-catching hero section with call-to-action
• Smooth Navigation: Sticky search bar for easy access while browsing

🛠️ Tech Stack

• Frontend: React
• Styling:
  • Tailwind CSS
  • Bootstrap
  • React Bootstrap
• UI Components: Fluent UI React
• HTTP Client: Axios
• Build Tool: Create React App
• Testing: Jest with React Testing Library

📁 Project Structure

cook-book/
├── public/                 # Static assets
├── src/
│   ├── App.js             # Main application component
│   ├── api.jsx            # Main recipe display component
│   ├── searchBar.jsx      # Search functionality component
│   ├── heroSection.jsx    # Hero section component
│   ├── data.json          # Recipe data source
│   ├── App.css            # Application styles
│   ├── api.css            # API component styles
│   └── index.js           # Application entry point
├── build/                 # Production build files
└── package.json           # Project dependencies

🚀 Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn package manager

Installation

1. Clone the repository:

git clone https://github.com/neweracy/cook-book.git
cd cook-book

2. Install dependencies:

npm install

3. Start the development server:

npm start

4. Open your browser and navigate to http://localhost:3000

📜 Available Scripts

npm start

Runs the app in development mode. The page will reload when you make changes and display any lint errors in the console.

npm test

Launches the test runner in interactive watch mode for running unit tests.

npm run build

Builds the app for production to the build folder. The build is minified and optimized for the best performance with hashed filenames.

npm run eject

Note: This is a one-way operation. Once you eject, you can't go back!

Removes the single build dependency and copies all configuration files and transitive dependencies into your project for full control over the build process.

🎨 Styling

The application uses a combination of:

• Tailwind CSS: For utility-first styling and responsive design
• Bootstrap: For additional UI components and grid system
• Custom CSS: For specific component styling

The color scheme primarily uses warm colors (amber, orange, yellow) to create an inviting, food-focused aesthetic.

📊 Data Source

Recipes are stored in src/data.json and include:

• Recipe title
• Category classification
• External recipe URL
• Recipe image
• Source attribution

🌐 Deployment

The application can be deployed to various platforms:

1. Build the project:

npm run build

2. Deploy the build folder to your preferred hosting service:
   • Netlify
   • Vercel
   • GitHub Pages
   • AWS S3
   • Any static hosting provider

📱 Browser Support

The application supports all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Neweracy

🙏 Acknowledgments

• Recipe data sourced from Times of India
• Images from Unsplash
• Built with Create React App
• Styled with Tailwind CSS and Bootstrap