WineTime: Social Media App

A Tailored Wine Experience

WineTime Landing Page

For the final project of my full stack bootcamp, my team of four people decided to build a mobile-first web application that would end up having 406 git commits in eight days. Its premise was simple: take a questionnaire to find your flavor profile, discover new wines from recommendations, and share them with other site users. This is WineTime.

Live Link: http://www.wine-time.me/
GitHub Repo: https://github.com/ad-800/WineTime
See More Projects Here: https://adalyneportfolio.herokuapp.com/

Technology Stack

• Planning: We used Figma to create initial website wireframes, gather inspiration for the black/white simplistic design, and mock up user flow. A Trello Kanban board was used for organization and productivity.
• Back-End: We used Ruby on Rails MVC architecture.
• Database: PostgresSQL was used with Rail’s Active Record. To plan our database, Le Wagon’s schema editor was used.
• Front-End: My team learned from our previous project’s messy SCSS execution and primarily used Bootstrap for this project. We also used JavaScript via Rail’s Stimulus Controllers.
• Notable Gems: Cloudinary to store images; Devise to set up the login/signup views; and Simple Form for the forms.
• Production: Heroku was used to deploy the application to the cloud.

Working as a Team: Feature Flow

Below is the process we used in development, which focused on feature flow, where all team members develop a feature from the backend to the front end.

SQL Schema Editor

1. We started crafting user stories that outlined our required routes, controllers, and methods.
2. We created our database schema to illustrate the foreign keys and relationships between models.
3. Next, we pair programmed to begin the newly created Rails app. Together two people created a skeleton of routes, models, and controllers while the other two worked on the inspiration for the design and critical UI/UX features.
4. Next came features. For the next five days, we worked in agile sprints, all creating branches, pushing the branch when we were done, and merging back to master.
5. The last day and a half were spent testing and mastering front-end responsiveness.

Always Learning: New Considerations

There were a couple of new challenges and features for this application:

Bootstrap Carousel in a specific custom collection

• Mobile-first design. Everything had to be intuitive to navigate, and space had to be used carefully to focus the user's attention on 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. To add logic to the recommendations, each seeded wine comes with scores for five 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 fewer points, the more bitter/mineral. Totaling the number of points from the quiz produces a corresponding wine personality, which has its table in the database. Each personality has three hard-coded wines to recommend on the quiz results page.
• No API — we could not 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 for background-ridden photographs of the bottles that needed to be uploaded to the Cloudinary photo database.

Lead Developer: My Contribution

Picked to be in charge of delegating tasks, doing stand-up meetings with TAs, and pushing to production, these are the following specific contributions I made to the application.

Partial view of the modal in charge of showing specific details about a chosen wine

• Transferring Questionnaire Data to a New User — WineTime has a functionality that allows visitors to take the questionnaire and get a sample of results before being prompted to sign up. To transfer the quiz results to a user’s profile, the values of the answers needed to be stored as an array in a rails session, which holds the answers as a cookie in a user’s browser.
• Position Absolute and Relative — All the incredible drawings on the website were created using DALL-E 2 AI. We used them and scribbles from Scribbbles and 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 an 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 on 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.

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

Improvements to Make

Celebrities have flocked to the website and have started sharing their wine collections :)

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