GROCERY-STORE

❯ A modern web frontend for discovering, saving, and sharing recipes

Technologies used

• Vue.js
• JavaScript
• Vite
• TailwindCSS
• npm

Table of Contents

• Overview
• Features
• Project Structure
  • Project Index
• Getting Started
  • Prerequisites
  • Installation
  • Usage
  • Testing
• Project Roadmap
• Contributing
• License
• Acknowledgments

---

Overview

Grocery-Store is a web frontend application developed as part of the WAF – Web Application Frontend course at MENDELU (Spring 2024/2025). The app allows users to browse a curated collection of recipes, search by ingredients or cuisine, save favourites, and contribute their own recipes. Built with a modern JavaScript framework (Vue.js or React), the project emphasises component-based architecture, responsive design, and clean UX.

---

Features

• Browse and search recipes by name, ingredient, or category
• View detailed recipe pages with ingredients and step-by-step instructions
• Save and manage a personal collection of favourite recipes
• Submit and share custom recipes
• Responsive design for desktop and mobile
• User authentication (login / register)
• Integration with a recipe REST API or backend service

---

Project Structure

└── cooking-app/
    ├── src/
    │   ├── components/
    │   ├── views/
    │   ├── router/
    │   ├── store/
    │   ├── services/
    │   ├── assets/
    │   └── App.vue / App.jsx
    ├── public/
    │   └── index.html
    ├── tests/
    ├── package.json
    ├── vite.config.js
    └── README.md

Project Index

COOKING-APP/

src

components/	❯ Reusable UI components (RecipeCard, SearchBar, NavBar, etc.)
views/	❯ Page-level components (Home, RecipeDetail, Favourites, Profile)
router/	❯ Client-side routing configuration
store/	❯ Global state management (Vuex / Pinia / Redux)
services/	❯ API call abstractions and data-fetching utilities

branches

master

❯ Stable production branch

---

Getting Started

Prerequisites

• Node.js v18+
• npm or yarn

Installation

Build from source:

1. Clone the repository:

❯ git clone https://github.com/svareX/cooking-app.git

2. Navigate to the project directory:

❯ cd cooking-app

3. Install the dependencies:

❯ npm install

4. Configure environment variables (if applicable):

❯ cp .env.example .env
# Edit .env with your API base URL and any API keys

Usage

Start the development server:

❯ npm run dev

Build for production:

❯ npm run build

The app will be available at http://localhost:5173 (Vite default) or http://localhost:3000.

Testing

Run the test suite using the following command:

❯ npm test

Or for end-to-end tests:

❯ npm run test:e2e

---

Project Roadmap

• Task 1: Recipe browsing and search by ingredient/category.
• Task 2: User favourites and custom recipe submission.
• Task 3: Meal planning calendar and grocery list generation.

---

Contributing

• 💬 Join the Discussions: Share your insights, provide feedback, or ask questions.
• 🐛 Report Issues: Submit bugs found or log feature requests for the cooking-app project.
• 💡 Submit Pull Requests: Review open PRs, and submit your own PRs.

Contributing Guidelines

1. Fork the Repository: Start by forking the project repository to your GitHub account.
2. Clone Locally: Clone the forked repository to your local machine.

   git clone https://github.com/svareX/cooking-app

3. Create a New Branch: Always work on a new branch.

   git checkout -b new-feature-x

4. Make Your Changes: Develop and test your changes locally.
5. Commit Your Changes: Commit with a clear message.

   git commit -m 'Implemented new feature x.'

6. Push to GitHub: Push the changes to your forked repository.

   git push origin new-feature-x

7. Submit a Pull Request: Create a PR against the original project repository.

---

License

This project is protected under the MIT License. For more details, refer to the LICENSE file.

---

Acknowledgments

• Developed as part of the WAF – Web Application Frontend course at MENDELU (Spring 2024/2025)
• Course instructor and teaching staff at MENDELU FBE
• Recipe inspiration from the open-source culinary community

---