Git Product home page Git Product logo

wewine's Introduction

WeWine

University project

Theme

We want to create a community of wine lovers, from the novice to the entrepreneur, where you can share your opinions about wine, with all the peculiarities of a social network.

Mockup

You can view the mockups down here.
For a better experience you can view the mockups by downloading the file mockup.html in the mockup folder, open it in your browser and use up and down arrows to move between the mockups.
In alternative you can use this link (fullscreen recommended): https://slides.com/alessandrosciarrillo/palette

WeWine Mockup descpription Mockup Base Template Mobile Mockup Base Template Tablet Mockup Base Template Desktop Mockup Login Mobile Mockup Login Tablet Mockup Login Desktop Mockup Profile Mobile Mockup Profile Tablet Mockup Profile Desktop Mockup Feed Mobile Mockup Feed Tablet Mockup Feed Desktop Mockup Notifications Mobile Mockup Notifications Tablet Mockup Notifications Desktop

How the design was done

  • Initially we created some minimal mockups with the essential input interfaces
  • We recreated this mockups with some basic HTML and backend
  • We did an "experience prototyping" session with some external eterogeneous users (various age and computer knowledge) to evaluate the prototypes
  • After collecting the results of the previous point we evoluted the initial mockups resolving all the reported problems
  • We did a focus group with some target users (in our case, three sommeliers) to define accurately the domain and the terms to use
  • We applied all the advices received during the focus group

Scope

  • A user can follow and be followed by other users, add or remove likes and comments on other users' posts
  • A user can edit his own profile after registrating, using the apposite button in the Profile section, which let him modify all the profile data including the password and the profile picture
  • A user can specify its category (owner/grower/sommelier/passionate/novice) and, in the first two cases, a company address
  • In a profile you can click on Followers and Followed fields to view the list of all the relative users
  • A user can post a review regarding the tasting of a wine, being able to enter:
    • name of the wine
    • origin
    • rating (0-5 stars)
    • taste notes
    • a photo
    • 4 taste indicators with adjustable sliders (a balance indicator of their values will be shown under them)
      • light/structured
      • soft/tannic
      • dry/sweet
      • flat/sour
    • It is also possible to scan or manually enter the wine barcode in order to make it easier for other users to search that specific wine on the web, using a dedicated button
  • A post can be opened by clicking on the text.
  • On an opened post you can see the list of users who liked the post by clicking on the number at the bottom right of every post
  • It's possible to view and post comments by clicking the comment logo at the bottom right of every post
  • In the bottom section of every post is present a button "Search wine" which redirect to a Google search of that specific wine: if the barcode was entered, the search is based on it, in other case the wine name will be used
  • For every post and notification it's shown the time passed from the event.
  • When a user receives a notification:
    • the notifications logo starts to swing and by clicking on the notifications button it is possible to view both the new and old notifications, distinguished by color
      • if the user is online at the time of receipt, a push notification is displayed Push Notification

Peculiarities

  • The password are not transmitted in clear and salted with an unique salt
  • The queries are executed by a special user with particular privileges on the DB
  • We prevented SQL injections by using parameter binding
  • The feed is loaded dynamically for a better efficiency
  • The user search is dynamic and not require to click a button to launch it
  • Every action includes a check of the login status: if you are not logged anymore you will be redirect to the login page
  • Push notifications are shown in overlay for every event happened in the last 3 seconds
  • When new notifications are present the notification logo of the navigation bar starts to swing
  • To insert a barcode of a wine we have set up a barcode scanner, which use the device camera or an uploaded image Barcode scanner

Instructions

  • Copy the folder on a web server
  • Run the file db_init.sql on a DBMS
  • Connect to localhost\wt-project\website and create an account
  • Login
  • Start using the social!

wewine's People

Contributors

nmusso avatar alessandrosciarrillo avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.