/HealthNutrition-Frontend

Vue.js based frontend app for the Health Nutrition backend.

Primary LanguageVueApache License 2.0Apache-2.0

Health Nutrition - Frontend

Vue.js based frontend app for the Health Nutrition backend.

Node.js Vue.js Linter

📖 Table of contents

📃 Description

The frontend part of StoreTracker project that complements the backend by providing the Vue.js-based user interface that allows users to interact with the nutrition comparison platform.

It offers a visually appealing and intuitive UI to enhance the user experience.

Key Features:

  • Presents a user-friendly and visually appealing interface.
  • Enables users to effortlessly search for specific products.
  • Provides the capability to browse products by categories.
  • Displays comprehensive product information, including store details.
  • Supports users in making informed purchasing decisions by comparing prices.
  • Enhances user convenience by highlighting the most favorable prices.
  • Ensures responsive and seamless interactions for efficient shopping.

Together, the backend and frontend collaborate to create a *comprehensive nutritional value comparison solution, empowering users to explore the nutritional content of various food products and make health-conscious dietary decisions. This integrated system facilitates users in comparing nutritional values seamlessly, ensuring they can make informed choices for their dietary needs across a diverse range of food items.

The project was created for educational purposes, any matches with real values are accidental.

Backend part: https://github.com/FCTL3314/StoreTracker-Backend

🌄 Demonstration

Product categories

Aminations

compared-products-deleting comparison-group-deleting

Products

Product detail

firefox_9HVqv9g46p firefox_hrfbO4yzoT

Comparison groups

firefox_TgwCqy76Wf

Compared products

Profile

Settings

firefox_TwCMDgqiKa

Authorization

Responsive design

💽 Local installation

  1. Clone or download the repository.

  2. Create an .env file or rename .env.dist in .env and populate it with all variables from .env.dist file.

  3. Install dependencies: npm install

  4. Run the development server: npm run dev

🏗️ Build deploy

  1. Complete the first 3 steps of the 💽 Local installation section

  2. Build the project: npm run build.

  3. Duplicate index.html file of the dist directory and rename it to the 404.html

    This trick is needed for vue-router to work.

  4. Publish built project to the gh-pages branch: gh-pages -d dist