Hello 👋

I'm excited to share my project, recommen.do, developed for the Appwrite x Hashnode Hackathon. An innovative app that enhances your online shopping experience using the power of Next.js, Appwrite, OpenAI and Plasmo.

It's my first time participating in a Hackathon, so huge thanks to Appwrite and Hashnode!

Team Details

  • Alexandru Bacanu - @bachi312

Description of Project

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686808968659/6416449d-a992-4410-bf49-035d9765ec5f.png align="center")

recommen.do is a web application and browser extension designed to simplify the overwhelming task of selecting the right product from a sea of search results on platforms like Amazon, Newegg, and eBay. Built with Next.js, Plasmo, and Appwrite it acts as your personal shopping advisor.

With recommen.do, you benefit from expert guidance akin to having Linus himself by your side. Leveraging the power of OpenAI, it provides tailored recommendations based on your inputs. Say goodbye to endless scrolling and uncertainty, and let recommen.do streamline your online shopping experience.

Features:

  • Unified Authentication: Seamlessly authenticate across the website and extension

  • Subscription/Payment Management: Manage your subscriptions, gain access to premium features with the ability to upgrade, downgrade, or cancel

  • Custom API Key Integration: Utilize your own API key with OpenAI

Tech Stack

  • Next.js - Front-end framework for building the web application with server-side rendering and improved performance

  • Appwrite Cloud

    • Authentication - Handles user authentication and authorization. It works flawlessly with Plasmo

    • Database - Stores user profile, stripe customer, subscription status, credits

    • Cloud Functions - Node.js - Implements backend logic for generating user profiles in the database

    • Webhooks - Enables the creation of customers in stripe based on database events

  • Stripe - Payment processing platform integrated into the application

  • Plasmo - Framework used for the browser extension

  • Vercel - Deployment and hosting platform for the web application

Other mentions:

  • shadcn/ui - UI library used for building the user interface components

  • tailwindcss - CSS framework for styling the application and creating responsive layouts

Challenges I Faced

  • Developing the browser extension: It was my first time developing a browser extension and there was a learning curve to overcome. Understanding the extension architecture, permissions, and how to interact with the content scripts presented initial challenges. However, through research and experimentation, I successfully built the extension component and integrated it with the web application.

  • Integration of Plasmo and Next.js: It was challenging to have Plasmo, the browser extension framework, and Next.js, the web application framework, coexist within the same repository. Setting up a monorepo with separate repositories for the web application and the extension could have been a more suitable approach.

  • Setting up a seamless payment system for subscriptions required careful planning and implementation. Integrating Stripe and handling recurring payments, subscription management, cancellations, and upgrades proved challenging. However, after many hours of trying, I managed to successfully implement a reliable payment system, ensuring a smooth user experience.

Some screenshots

Front page - Navbar and a Hero section

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686809002425/025b247b-44ce-441e-ac5b-088ab29a3dca.png align="center")

Front page - Features, Pricing Table and Footer

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686809048074/b67149ce-6793-4b94-a8b2-e2e10457a4ff.png align="center")

Profile page - User authenticated and details of their plan/usage

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686809075267/74153a4e-957c-4227-93fd-832500119525.png align="center")

Extension popup - Same as profile page, components are shared between NextJS and Plasmo

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686809108758/2b211459-8360-4196-8aa1-b856d5ec1ac1.png align="center")

Extension content ui - User prompt injected in pages like Amazon, Newegg, Ebay for functionality

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686809168545/cbd95caa-464c-4fd4-be0b-fb6799652b2b.png align="center")

Public Code Repo

You can find the code for recommen.do (website + extension) on GitHub: GitHub recommen.do App You can also look at the code for the Appwrite Functions: GitHub recommen.do Functions

Demo Link

You can check out the demo on recommen.do Website You can also watch this video to see the app in action:

Hashtags

#Appwrite #AppwriteHackathon #Next.js #OpenAI #Plasmo #ChatGPT #Stripe #Vercel