WineTime Social Media App

A mobile-first web application that was developed by a team of four people for the final project of the Le Wagon Bootcamp (406 git commits). Take the questionnaire to find your flavor profile, discover new wines, and share them with other users of the site.

Completing the App in 8 Days

Our team followed the same feature flow from the Marketplace Clone project, dividing and conquering models -> controllers -> views vertically. We learned from our messy CSS execution and primarily used Bootstrap for front-end. There were a couple new challenges and features for this application:

• Mobile first design. Everything had to be intuitive to navigate and space had to be used carefully to focus attention of the user to the app's primary capabilities.
• Bootstrap javascript plugins for modals and carousels.
• Javascript stimulus controller for the questionnaire. A user is required to answer all questions before the Submit button appears.
• Wine recommendation algorithm (see next heading).
• No API — we were not able to find a good wine database for free and were forced to seed over 100 wines by hand. Scraping proved too difficult due to the need of background-ridden photographs of the bottles that needed to be uploaded to the Cloudinary photo database.

Specific parts and roles of development I worked on were:

• Lead Developer — Picked to be in charge of delegating tasks, doing stand up meetings with TAs, and pushing to production (heroku).
• Transferring Questionnaire Data to a New User — WineTime has the functionality that allows visitors to take the questionnaire and get a sample of results before being prompted to sign up. To transfer the results of the quiz to a user’s profile, the values of the answers needed to be stored as an array in a rails session, which stores the answers as a cookie in a user’s browser.
• Position Absolute and Relative — All the incredible drawings the website were created using DALL-E 2 AI. We used them and scribbles from Scribbbles as well as icons from FontAwesome, all of which needed to be positioned carefully for both mobile and desktop views. I became quite the specialist at setting (and centering) relative div widths to best accommodate absolute-positioned images.
• Modal Partial — Joked to be the beating heart of the website, the modal is used all over the website and had to be structured in a easy to read way that did not hinder people working on different parts of the app. The buttons in the modal’s footer depend on where the user is in the site (on their profile, in a search bar, in another user’s profile, in a collection, etc.) and a lot of ERB logic was used to bring everything together.
• Collection Wines Controller — Shared table that links wines to a collection. A Wine can have many CollectionWines and Collections can access Wines through CollectionWines.

Algorithm Design

To add logic to the recommendations, each seeded wine comes with scores for 5 wine flavor profiles (bitter, fruit, mineral, spice, and earth). Each answer in the six question quiz has a weight that corresponds to the values of these five profiles. The more points, the more fruity/spicy, the less points, the more bitter/mineral. Totaling the number of points from the quiz produces a corresponding wine personality, which has its own table in the database. Each personality has three hard-coded wines to recommend in the results page of the quiz.

Improvements to Make:

• Adaptive Algorithm — Tastes change and recommendations should adapt based on the wines in a user’s collection. A user should also be able to remove a wine from their recommendations.
• Bugs — We still need to customize the Devise Registration Controller to redirect to custom Sign Up page, make a back button after adding a wine to a collection, and users should not be allowed to add duplicates of a wine to a collection.
• About Page — Tells users more about the recommendations they are getting and how they are calculated from their quiz score.
• Multiselect Quiz — I enjoy all fruit, not just wild berries :)

I want to extend a huge shoutout to my team: Michele our wine algorithm designer, Patrick our backend engineer, Joáo our fearless spokesperson. I couldn't have asked for a better team