Overview

• Academic Year: 2020-2021
• Project Title: MapRecipes: implementation and usability testing of a web application using the Vue.js framework
• CFUs: 9

In this project we implemented a working prototype of a web application (MapRecipes) for cataloguing and geolocalizing italian recipes.

Tools and Techniques

The main tools and techniques used are:

• Vue.js: for building the user interface and single-page application
• BootstrapVue: for building a responsive interface using Bootstrap v4
• Leaflet: for integrating a mobile-friendly interactive map
• Netlify: for web hosting and automated deployment

Expected Outcomes

We expect the following outcomes from this project:

• Working prototype of the application, publicly accessible from the Web. This will consist in a single-page web application, implemented with a responsive layout to ensure a great user experience even on mobile devices with smaller screens. This prototype will use static data and it should be able to demonstrate the main features and use cases.
• Results from Usability Testing, which should hopefully help us in identifying potential issues and improvements to be made.

Summary

The idea for this project was born from the mutual interest in the gastronomic field. The intent was to discover and catalog, also from a geographical point of view, recipes from all over Italy, representing the culinary traditions of the different regions.

Our goal is to make the final product as easy, accessible and user friendly as possible, for people of any age.

Project Documents

• Report is available here
• Presentation is available here

Development

Requirements

• Node.js (tested on v15.5.1)
• npm (tested on v6.14.11)

Project setup

git clone https://github.com/n3d1117/maprecipes.git
cd maprecipes/
npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint