🛍️ Shop smarter and faster with recommen.do, your ultimate shopping companion!
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.
- Alexandru Bacanu - @bachi312
Description of Project
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.
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
Next.js - Front-end framework for building the web application with server-side rendering and improved performance
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
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.
Front page - Navbar and a Hero section
Front page - Features, Pricing Table and Footer
Profile page - User authenticated and details of their plan/usage
Extension popup - Same as profile page, components are shared between NextJS and Plasmo
Extension content ui - User prompt injected in pages like Amazon, Newegg, Ebay for functionality
Public Code Repo
You can check out the demo on recommen.do Website You can also watch this video to see the app in action:
#Appwrite #AppwriteHackathon #Next.js #OpenAI #Plasmo #ChatGPT #Stripe #Vercel