Pint: Appwrite Hashnode Hackathon
Hello everyone! I wanted to share a project a made with my friends, which we call Pint.
Team Details ->
Ashish Khare - Ashish Khare
Anurag Srivastav - Anurag Srivastav
Akshat Mishra - Akshat Mishra
Description of Project
It's a service that helps you fancify your images before sharing them on the web. Exactly, we frame your image inside a mesh gradient and provide a cooler version of the same. Also, there is a history section that enables you to save your edits on the cloud and view them later on any device.
For example, you can share a code snippet more stylishly like this one,
Tech Stack
So, the entire project is built using the following technologies,
Next js
Appwrite Cloud
Authentication
Database
Vercel
Frontend
Talking about the front end, the entire UI is held together using Tailwind CSS for styling and Radix UI for the accessible components. While all of the heavy liftings of javascript is handled by NextJS. NestJS is an incredible tool when it comes to image optimizations, and file routing system and the best part is the API routes functionality.
Backend
Here comes the hero, Appwrite, the backbone of your project. Appwrite helped set up the Authentication Flow for the users to save their edits for future use. Also, we used the NoSQL database for storing the user data. Appwrite exposes a great set of functions through its API to seamlessly talk to the service and interact with them.
Hosting
For hosting, NextJS' ol' friend Vercel came to the rescue. The whole of the project is hosted on Vercel.
Challenges We faced
The biggest and the most brutal one to talk about was choosing a tech to convert the image-laid mesh gradient react components into exact replicas(here, images to share). Also, we wanted to restrict this image generation to the client side only.
We tried Satori, a great project which converts any pure and stateless component into a 600x400 svg. However, this didn't work out for us. Hence, we switched to a library called react screenshot. I would like to conclude that there is a deficiency of good client-side libraries for this kind of work.
We thought Appwrite would be a hassle after all of this but it turned out to be a smooth experience. The user-friendly dashboard, great API, and easy integrations worked like a charm. Appwrite we are good now!
Public Code Repo
Demo Link
Try it out!
Website - Pint (pint-blue.vercel.app)
Video Demo at Youtube - https://youtu.be/zFdta46trx4
I hope you like your product and share it with others! Feel free to report bugs and issues back to us. We would be more than happy to talk about it.