Skip to content

FCTL3314/HealthNutrition-Frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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.

πŸŒ„ 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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published