Cook.io is a comprehensive web platform for recipe discovery, designed to be fast, intuitive, and highly functional. By leveraging the robust Edamam API, the project provides access to thousands of recipes with granular filters for health labels, diets, and cuisine types.
- Smart Search: Find specific recipes by name or key ingredients instantly.
- Advanced Filtering: Refine results by diet (Vegan, Low-Carb), allergies, meal types, and cuisines.
- Recipe Book (Favorites): Save your favorite recipes using localStorage for persistent access.
- Native Dark Mode: Built-in theme switcher with automatic system preference detection.
- Responsive UI: Optimized interface focusing on seamless mobile and desktop experiences.
- High Performance: Smooth user experience with skeleton screens and infinite scroll logic.
| Tool | Usage |
|---|---|
| JavaScript (ES6+) | Modular logic, DOM manipulation, and state management. |
| HTML5 & CSS3 | Semantic structure and advanced styling with CSS Variables. |
| Edamam API | Real-time data source for recipes and nutritional info. |
| Vite | Modern build tool for fast development and optimized production bundling. |
| Vercel | Cloud platform for static site hosting and continuous deployment. |
The directory is organized into a clean, modular architecture:
Cook.io/
├── assets/
│ ├── css/
│ │ └── style.css # Global styles and theme variable definitions
│ ├── images/ # Logos, interface icons, and placeholders
│ └── js/
│ ├── api.js # API configuration and fetch handling
│ ├── global.js # Core utilities and favorites management
│ ├── home.js # Homepage logic and tab navigation
│ ├── recipes.js # Filtering logic and dynamic result listing
│ ├── detail.js # Individual recipe data rendering
│ ├── theme.js # Theme manager (Light/Dark persistence)
│ └── module.js # Helper functions (time conversion, etc.)
├── index.html # Main Entry Point
├── recipes.html # Search Results and Filters Page
├── detail.html # Single Recipe Detail View
├── saved-recipes.html # User's Personal Recipe Gallery
├── vite.config.js # Multi-page build configuration
└── vercel.json # Deployment and routing rules
- Clone the repository:
git clone https://github.com/YasmimRodrigues/cook-io.git- Install dependencies:
npm install- Run in development mode:
npm run dev- Build for production:
npm run buildThis project is configured for Vercel using Clean URLs. Thanks to the vite.config.js and vercel.json configurations, you can navigate between pages without the .html extension in the URL (e.g., /recipes instead of /recipes.html).