The Guided Cooking App is a web application designed to enhance the home cooking experience. It allows users to discover new recipes, manage their pantry, generate shopping lists, and follow step-by-step cooking instructions with integrated timers. The application aims to provide a seamless and intuitive user experience with a modern, minimalist design.
A recently integrated feature that allows users to:
The application is built with a modern and robust tech stack:
Before you begin, ensure you have the following installed on your system:
Follow these steps to set up and run the project locally:
git clone https://github.com/smile-plzz/guided-cooking-app.git
cd guided-cooking-app
cd server
npm install
cd ../client
npm install
You need to start both the backend server and the frontend client.
server directory and run:
npm start
The server will typically run on http://localhost:5000.
client directory and run:
npm start
The client application will typically open in your browser at http://localhost:3000.
The application relies on the Spoonacular API for various features. You need to obtain an API key and configure it:
.env in the server/ directory (if it doesn’t already exist).SPOONACULAR_API_KEY="YOUR_ACTUAL_API_KEY_HERE"
"YOUR_ACTUAL_API_KEY_HERE" with the key you obtained from Spoonacular..env file for the changes to take effect.The project is organized into two main directories: client/ for the React frontend and server/ for the Node.js/Express backend.
guided-cooking-app/
├── client/ # React frontend application
│ ├── public/ # Public assets (HTML, images, manifest)
│ ├── src/ # React source code
│ │ ├── components/ # Reusable UI components (e.g., Navbar, RecipeList, MealPlanner)
│ │ ├── styles/ # Global styles and design tokens (e.g., tokens.css)
│ │ ├── utils/ # Utility functions (e.g., motion.js for Framer Motion variants)
│ │ ├── App.js # Main application component, handles routing
│ │ ├── index.css # Tailwind CSS imports and global styles
│ │ └── index.js # React app entry point
│ └── package.json # Frontend dependencies and scripts
├── server/ # Node.js/Express backend application
│ ├── config/ # Database configuration
│ ├── data/ # Initial seed data (recipes.json)
│ ├── tests/ # Backend unit and integration tests
│ ├── database.js # Sequelize models and database connection
│ ├── server.js # Main Express server setup and API routes
│ └── package.json # Backend dependencies and scripts
├── .git/ # Git version control
├── .gitignore # Specifies intentionally untracked files to ignore
├── context.txt # Detailed development history and current context
├── README.md # Project documentation (this file)
└── ... # Other project-level configuration files
The application adheres to a minimalist aesthetic, focusing on a fluid user experience and accessibility. Key principles include:
page-content-padding class to ensure consistent top padding for main content areas, clearing the fixed navigation bar.RecipeForm.js have been updated with consistent Tailwind classes, leveraging CSS variables for borders, backgrounds, and enhanced focus states.client/src/styles/tokens.css have been increased for improved readability across all screen sizes.The backend uses SQLite as its database, managed by Sequelize ORM.
Recipe model is defined in server/database.js, including fields for title, image, readyInMinutes, servings, extendedIngredients (JSON), and analyzedInstructions (JSON).sequelize.sync(). Initial recipe data is seeded from server/data/recipes.json if the Recipe table is empty. The seeding logic is encapsulated in an exportable seedDatabase function for testing purposes.The Express.js server (server/server.js) provides a RESTful API for managing recipes and proxying Spoonacular API requests.
GET /api/recipes: Retrieve all recipes from the local database.POST /api/recipes: Add a new recipe to the local database.PUT /api/recipes/:id: Update an existing recipe in the local database.DELETE /api/recipes/:id: Delete a recipe from the local database.POST /api/recipes/favorites: Fetch a list of recipes by their IDs (used for displaying favorited recipes).GET /api/search-recipes: Proxies requests to Spoonacular’s complexSearch endpoint, supporting query, cuisine, diet, and intolerances parameters.GET /api/recipe/:id: Proxies requests to Spoonacular’s information endpoint for detailed recipe data.GET /api/recipe/:id/nutrition: Proxies requests to Spoonacular’s nutritionWidget.json endpoint for nutritional information.GET /api/ingredient-substitutes: Proxies requests to Spoonacular’s food/ingredients/substitutes endpoint for ingredient substitution suggestions..env file).memory-cache to reduce redundant requests and improve performance.The backend includes comprehensive unit and integration tests using Jest and Supertest.
recipes.test.js: Covers CRUD operations for local recipes, including validation, error handling, and the favorites endpoint. It also tests the database seeding process.spoonacular.test.js: (Assumed to exist and cover Spoonacular proxy endpoints).The frontend uses react-router-dom (v6 API) for navigation:
/: Home page, displaying a list of recipes./recipe/:id: Detailed view for a single recipe./add-recipe: Form for adding new recipes./edit-recipe/:id: Form for editing existing local recipes./favorites: Displays only favorited recipes./shopping-list: Manages the user’s shopping list./pantry: Manages the user’s pantry items./meal-planner: The new meal planning interface.useState and useEffect for component-level state management.localStorage.client/src/styles/tokens.css for easy theming and consistency.document.documentElement for a seamless theme switch.App.js: The main application component, setting up routing and global context (dark mode, notifications).Navbar.js: Provides primary navigation, search input, filter dropdowns, and the dark mode toggle.RecipeList.js: Displays a grid of recipe cards, handles search and filtering, and integrates lazy loading for images.RecipeDetail.js: Shows detailed recipe information, manages favorites, editing/deletion, unit conversion, ingredient substitution, nutritional data, and guided cooking steps.RecipeForm.js: A form for adding and editing local recipes.ShoppingList.js: Manages the user’s shopping list.Pantry.js: Manages the user’s pantry items.MealPlanner.js: The core component for meal planning, allowing users to assign recipes to meal slots.RecipeSelectionModal.js: A modal used within the Meal Planner to select recipes from both local data and Spoonacular API search results.Notification.js: A reusable component for displaying transient success/error messages.Timer.js: A reusable component for countdown timers within guided cooking.This project has undergone continuous development and refinement. Key historical changes include:
recipes.json) to a more robust SQLite database with Sequelize ORM.new_client (Vue.js) application was removed as the project standardized on React.While the application is functional and feature-rich, there are areas for further improvement:
WebSocket connection to 'ws://localhost:3000/ws' failed errors appearing in the browser console. These typically relate to the frontend development server’s hot-reloading and need further investigation.