The problem ⁉️

When I try to buy a new item, whether it's a tech product or anything else, I always try to find the best product for the price. For that, I scroll through many articles, YouTube videos, reviews, and more. Sometimes I spend several days on this task 🥲. Also, if someone is planning to buy a new item, they need to know what to consider when buying it. So they have to research the product and find out which one fits best.

For example, let's say I want to buy a pair of headphones 🎧 and I haven't had headphones before. There are many choices in the market with a wide price range. I have to know the differences in these products before buying one. For that, I have to get familiar with the product terms⚙️. In the headphone world 🌐 there are different terms like LDAC, ANC, Hi-Res sound, NFC, drivers, and so on. Also, there are different types of headphones called in-ear, on-ear, and over-ear 👂🏻. As a newbie 🐣 to the headphone world, I have to get familiar with these terms. For that I have to scroll through many videos and articles 😶. First, I have to learn about the headphones, then find the headphone that matches my needs 🤩. This scenario is not limited to headphones ⚠️; when we buy a new product, we all go through this overwhelming long process. If not, most of the time we end up buying a product that isn't worth its price 😮.

Here are the problems,

1. Information Overload: With countless products available, it’s easy to feel overwhelmed by the sheer number of choices 🫠. And to find the best match, you have to read and watch many articles and videos 📺.

2. Comparing Products: Finding the best value for your money 💸 can be a daunting task. Like if you selected a product and you wonder are there any other competitors for the same product in same price range. Then you still have to scroll through many sites to find other competitors ⚔️.

3. Wasting Time: Researching and comparing products takes time. Time that could be spent on more important activities ⏳.

The Idea 💡

Rather than spending our valuable time on searching 🔍 and researching on a single item. What if there was a platform where we can get recommendations of products 📦 according to our requirements. And if we already have a selected product, what if there was a dedicated page to compare ⚖️ our product with some competitive products which gives better features at the same price range. It is even better if we can learn about the product and know what are the things we have to consider before buying it (For example :- Smartphone, Laptop, Pillow, Refrigerator, etc...) 😀.

Can we do it ?

YES WE CAN !!! 👇🏻

Introducing SpotIt ✨

SpotIt is a website where you can get product recommendations for your requirements and find the prefect fit for you 😉. That's not all there are more... All you have to do is login to the website using your google account, and by few clicks you will be able to find your best match because of it's simple UI 📱.

All the AI tasks of this app is done by Google Gemini LLM.

Before we deep dive into the features let's take a look at the website ✨.

This web app is designed to make searching products easier and more efficient by addressing several common challenges consumers face:

• Information Overload: With countless products available, it’s easy to feel overwhelmed by the sheer number of choices 🫠. This app simplifies the process by providing tailored product recommendations, helping you to find the perfect item without any stress 🤩.

• Comparing Products: Finding the best value for your money can be a daunting task. Our app helps you compare ⚖️ similar products within the same price range, ensuring you get the best deal possible.

• Time Efficiency: Researching and comparing products takes time ⌛, time that could be spent on more important activities. Our app consolidates all the relevant information in one place, saving you valuable time and effort ⏳.

With SpotIt, you can make informed purchasing decisions quickly and confidently, ensuring you get the best products at the best prices 🙌🏻.

Tech Stack ⚙️

Now let's take a look at the technologies that I used to build the project 🛠️. I used,

• NextJS as the Javascript framework ⚛️

• Tailwind CSS as the CSS framework 💄

• Firebase as the Database 🗂️

• NextAuth for Authentication ✅

• Axios to manage API requests 📡

• And I used a library called "react-toastify" for the notification pop-ups 🎉

Thanks to NextJS api routes I was able to do to the backend part without making a dedicated backend 🙂. And it was easy to deploy the app too.

Features 🔥

Let's take a look at the features of this app and what you'll get from it.

• Get Product Recommendations: Find products that meets your specific requirements along with detailed product specifications 📃.

• Compare Products: Easily compare products to determine which one matches your needs perfectly ⚔️.

• Save Products: Save products without memorizing all the names in your head, making it easier to keep track of your favorites 💾.

• Guided Instructions: Receive instructions on how to choose the right product, eliminating the need to spend hours researching specific product types 📝.

By leveraging these features, SpotIt transforms the product searching experience 🔍 into a seamless and enjoyable process. Say goodbye 👋🏻 to the hassle of endless research and uncertainty. SpotIt equips you with all the necessary tools to make smart, confident purchasing decisions with ease 💫.

Demo 🪧

This app has a simple UI that anyone can easily understand 🙂. But Anyway, I'll show you how it works 🙌🏻.

The SpotIt website is fully responsive, so you'll have no problem viewing it on a mobile phone or a large TV 📱.

Home Page 🏠

Once you open the site you'll be able to see a simple, yet modern home page that looks like this. 👇🏻

Here, I have listed some features 💥 of SpotIt with a big head line and a sign-in button ✅. You can click on sing-in and sign-in to the app with your google account. As I mentioned above. I have used Next-Auth with firebase authentication for easy login and user management 🗂️.

Once you logged-in you'll see a home page with some new links on the nav bar like below.

That's it. Now you can experience the fully functioning SpotIt webapp 👏🏻.

Find Page 🔍

In the find page, you can enter your requirement and get the product recommendations ✨.

Once you hit submit you'll see a nice skeletal loading too 😉

When the data is retrieved, you'll see 4 products in a horizontal scrolling list that match your requirements. Each product comes with a description and highlighted key features, as shown below 👇🏻. There is also a save button 💾, allowing you to save one product or all the products to review later.

Comparison page ⚖️

The Comparison Page lets you compare the product you have chosen with others in the same price range. You don't need to spend your time finding competing products ⚔️. SpotIt will find them for you and show the pros and cons of each compared to your chosen product 😎. Here's how the page looks.

You might be wondering what "General Opinion" means. In the box below that heading, there you will find a summary of the feedback provided by experts and users of the product you selected. Here is an example:

As our 1st example was a headphone 🎧, I'll pick a headphone. So the inputs will looks like this 👇🏻,

(Actually I have no idea about the headphone 'Bowers & Wilkins PX8'. I just enter a random headphone I saw on internet 🙃)

As I said before below the heading "General Opinion" you'll see a general idea, and under the "Products" you will be able to find 4 products in a horizontal scrolling list with a description, pros and cons over the given product ℹ️.

(FYI :- This is not an advertisement 😅)

Guide Page 🧭

This page is designed to save you the time and effort you spend researching products and their specific features 🕗. Simply enter the type of product type you want to buy, and SpotIt will do the rest 😉. Here's a preview of how the guide page looks like.

Here, you'll see a different loading spinner 🔃. I wanted to have the consistency of the elements but circle spinner will save lots of code and it perfectly matches for this place rather than generating a huge skeletal loading. To be fair I implemented it to a another place 😁.

This is how the response comes out,

This seems too much 🤯 but actually it is very informative and saves time. You can find what are the things you have to consider when choosing a product and specific terms used in a the product type you searched 🔍 and also the meanings of it. Isn't it cool ?

Saved Product Page 💾

Here, you can find the products you saved in the "Find page".

In this page, all the items are showed in a grid unlike the horizontal scrolling lists that I showed above. You can click on the "❌" icon in the bottom right of each item to remove that product from saved list. I have used Firebase as the database of this app, so it is easy work with real time data 🗂️.

Don't forget to hover over the "🩵" in the footer of the SpotIt website 😉.

Struggles 😕

• I had to spend some time on finding the specific types of some values in the code as I used TypeScript. (Too much TS 😅)

  

• I spent 2 days making the horizontal scrolling component. The problem was that when I viewed it on a small screen, the data (headings, paragraphs, etc.) in the components didn't wrap, and I couldn't see the rest of the data in the small screen 😶. I used TailwindCSS for this project and had to switch to plain CSS to figure out what was wrong. Eventually, I found the error. The issue was that I had used "flex-shrink-0" instead of "flex shrink-0". This small mistake wasted an entire day 😑.

• There were some export errors that I had to figure out while deploying my project on Vercel.

• I had some problems when saving the JWT, and retrieving and rendering data but I was able to find solutions for all of these.✌🏻

Future Plans 🔮

• There are lot of data in the guide page response and it's bit unreadable 🤯. I am planning to improve it as a chat application 💬 and give the specific output according to the user input without giving a load of information.

• Improve UI to support dark mode 🌙.

Important Links 🔗

• Deployed app

• GitHub repository

Conclusion 🙂

Thank you for reading all the way to the end 🙌🏻. Hope you enjoyed it. Let me know your ideas by leaving a comment below 💬.

---

PS: If you find that there are too many emojis in this article and it makes it difficult to read, please let me know. I will remove them as per your preference 😁.