Did you like your wine? Tinto!
Tinto: Appwrite Hashnode Hackathon
Team Details
Just me! Maxi 💁🏽♂️ https://hashnode.com/@maxicapodacqua
Description of Project
🍷 Do you like wine?
🍷 Have you ever wanted to try a new wine but had no clue about wine culture or what is a good bottle?
🍷 Or, have you ever wanted to buy a wine you've tried before, but can't quite remember what it was called?
If you answered any of those questions with YES, congrats, you and my fiance have some things in common.
We like to enjoy wine on different occasions, but sometimes we don't feel like trying new flavors - we just want to have something we like and don't want to go down the rabbit hole of wine grapes, years, countries, notes, labels, color, etc etc etc.
But other times, we do feel like being adventurous and trying something new... we just can't remember what we've had and what we haven't had!
Introducing: Tinto
Tinto is a mobile-friendly website that will help you write down the wines that would definitely drink again, and wines that you'd rather give to your worst enemy.
With the power of Appwrite and Vercel, Tinto brings a Material Design (v2) based interface to store different lists of wines for the user and show statistics of the most liked wines from the community. Making sure you always have the information that you need for that special moment with your glass of wine
Why "Tinto"?
Tinto means Red wine in spanish (not literally, but that's how we usually refer to red wine). Red wine is also my favorite type wine.
And if you wonder, my favorite wine grape is Malbec 🇦🇷
Tech Stack
Appwrite
This is our core backend, we used their Auth, Database and Function services.
Auth simplified A LOT at the start of the project, bringing sign-up and sign-in client processes without having to write the backend from scratch, as well as integrating this to the Database collection permissions.
The Function service allows us to keep stats updated when any user updates their wine lists, without having to run heavy queries on the client.
And of course, we used their Database service, especially their solution for permission-based access to documents, which made our client code easy to implement
Next JS
Meta framework of choice for writing server and client code mostly with React
Vercel
I used their Github integration to deploy my code to their host service, their integration with NextJS made it magical🌈! No setup needed
MUI
Also knowns as Material UI, it's a component design system. It made the website more mobile-friendly and helped me with design decisions.
Challenges We Faced
Autocomplete, but where is the data?
I didn't like the idea of having to manually write the wine names fully, so I implemented it with Autocomplete, MUI provides a very good component for it, but..I was missing a key piece. Where am I going to get a good list of wines for the autocomplete?
After some research, I came across a sample API: https://sampleapis.com/wines
I made an integration with their graphql service and with the help of typescript and a code generator I had a very robust autocomplete search
Bulk delete
I used checkboxes to allow bulk actions on wines, for now, the only possible action is "delete"|, but the Appwrite backend (database) didn't like getting a whole bunch of DELETE requests at the same time (I assume for data consistency), so I had to implement a delay on every request to avoid more 500 error codes.
Public Code Repo
https://github.com/maxicapodacqua/tinto
Demo Link
Feel free to create a user or log in with the demo user
Email:
appwrite@test.comPassword:
test12345
#Appwrite
#AppwriteHackathon