Vinio

Vinio

Vinio is a web application built to simplify the art of wine pairing, eliminating the need for extensive wine education, by providing quick and effective answers on how to pair wines.

MySQL

Node JS

Express JS

JavaScript

TypeScript

React JS

TailwindCSS

Next JS

Vercel

My thoughts

Why did I choose this tech stack?

The choice for this tech stack involved leveraging the relationship between data using MySQL, which helped me build a more intuitive database. React, with its state management features, proved very handy in updating components whenever we interacted with the 'translator-like' interface. Next.js played a crucial role in optimizing page loading through server-side rendering of the landing page.

Shape 3
Shape 5
Shape 9
Shape 1

What do I want to achieve?

I wanted to create a mobile-friendly web app inspired by translation apps like deepl.com and Google Translate. It's designed for on-the-go moments, whether I'm at a restaurant or in the supermarket. The app has two modes: 'pairing mode,' where I input a wine and a food to find the perfect match, and 'suggestion mode' where I input a wine to get a list of compatible foods. The goal is to simplify the wine and food experience, making it easy and enjoyable when I'm out with just my phone and an internet connection.

Shape 1
Shape 6
Shape 8
Shape 3

What are the main difficulties I faced?

I faced two key challenges in this project. First, sourcing and interpreting data from oenology books and online resources presented difficulties due to occasional discrepancies. Making informed choices before integrating information into my database was crucial. Second, obtaining certain data proved challenging due to reluctance within the exclusive wine industry. On the frontend, I chose to build components from scratch for learning purposes instead of using pre-made libraries. This decision, while rewarding, brought its own set of challenges, particularly in successfully managing data handling and fetching from the backend.

Shape 8
Shape 4
Shape 2
Shape 9

What did I learn?

Before this project, my database skills were limited to NoSQL databases like MongoDB. Taking on this project provided a golden opportunity to explore SQL and relational databases, dedicating about half of my time to mastering MySQL. I delved into concepts such as data modeling, hierarchical data, recursive queries, and associative tables, crucial for shaping the Vinio database. Learning proved challenging but rewarding, as I took a hands-on approach, building Vinio alongside my journey. Despite being familiar with the Node environment, I chose Prisma ORM to stay within the Node ecosystem, adding another layer of enrichment to my learning experience, gaining valuable insights into data fetching and handling from a different perspective.

Shape 9
Shape 1
Shape 5
Shape 7

Vinio suggestion mode

Vinio suggestion mode

Vinio pairing mode

Vinio pairing mode

Visit the web application