Welcome to GoodFoodRecipes, your go-to app for exploring delicious meals and connecting with experienced cooking coaches. Whether you're a food enthusiast looking for new recipes or a budding chef eager to enhance your skills, GoodFoodRecipes has you covered. The app can be cheked at https://vuemealsandcooks.web.app/ .
- Random Recipes: Explore 10 random meal recipes to discover new and exciting dishes.
- Dynamic Search: Find meals by entering keywords, letters, or ingredients in the search bar.
- Alphabetical Search: Browse meals by clicking on the letter corresponding to the recipe's initial letter.
- Ingredient Search: Explore a list of ingredients and find meals based on your preferred ingredients.
- Table View: Access a paginated table showcasing a variety of meals.
- Pin and Unpin: Pin your favorite meals to easily access them later.
- Pin Limit: Users can pin a maximum of 5 meals.
- Coaches List: Explore a list of cooking coaches available for mentorship.
- View Coach Details: Get detailed information about a cooking coach's expertise and experience.
- Register as a Cook: Users can register as a cooking coach by logging in.
- Contact Coach: Connect with a coach for personalized guidance.
- View Incoming Requests: Logged-in users can view incoming requests from aspiring cooking enthusiasts.
To create GoodFoodRecipes, I utilized the following technologies and tools as prerequisites:
- TailwindCSS: TailwindCSS served as the styling framework, providing a visually appealing user interface. The integration details can be found in the TailwindCSS Vite Guide.
- Vue Router 4: Vue Router 4 was used for navigation, enabling the creation of a seamless single-page application experience.
- Vuex 4: Vuex 4 played a crucial role in state management, allowing for the efficient handling of application data. The Vuex store was modularized to manage various aspects of the app.
- TailwindCSS Forms: TailwindCSS Forms enhanced form styling, contributing to an improved user experience. The installation and usage details can be found in the TailwindCSS Forms GitHub repository.
- Axios: Axios, a promise-based HTTP client, was used for making API requests. It facilitated seamless communication with external APIs, such as fetching data from TheMealDB Recipe API.
- Firebase: Firebase services, including the database and authentication, were employed for securely storing user data. Firebase Hosting was utilized for deploying and hosting the app.
- TheMealDB Recipe API: External API for fetching meal recipes and ingredients.
In GoodFoodRecipes, the application's logic is efficiently managed through the Vuex store, which is divided into modular sections to handle different aspects of the app:
-
State:
userId: The unique identifier of the authenticated user.token: The authentication token associated with the user.didAutoLogout: A flag indicating whether the user has been automatically logged out.
-
Mutations, Actions, Getters:
- Manage user authentication, token storage, and auto-logout functionality.
-
State:
coaches: An array of cooking coaches, each containing details such asid,firstName,lastName,areas,description, andhourlyRate.
-
Mutations, Actions, Getters:
- Handle the retrieval and manipulation of coaching information.
- Allow users to register as coaches.
-
State:
requests: An array containing user requests.
-
Mutations, Actions, Getters:
- Manage incoming requests from users seeking coaching.
-
State:
searchedMeals: An array of meals resulting from a user's search query.mealsByLetter: An array of meals categorized alphabetically.mealsByIngredient: An array of meals based on selected ingredients.pinnedMeals: An array to store up to 5 user-pinned favorite meals.ingredient: An object representing a selected ingredient.
-
Mutations, Actions, Getters:
- Handle the retrieval and display of various meal-related data.
- Allow users to pin and unpin favorite meals.
- Manage the storage and retrieval of ingredients.
The modular structure of the Vuex store ensures a clean separation of concerns, making the application scalable and maintainable. Each module focuses on a specific aspect of the app, providing a clear and organized structure for handling state, mutations, actions, and getters.
-
Clone the Repository:
git clone https://github.com/your-username/VueMealsAndCooks.git
-
Install Dependencies:
cd VueMealsAndCooks npm install -
Run the App:
npm run dev
-
Explore and Enjoy: Open your browser and navigate to http://localhost:3000 to start using VueMealsAndCooks.
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.
- VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensionsfrom VSCode's command palette - Find
TypeScript and JavaScript Language Features, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Windowfrom the command palette.
