Inspiration
What inspired me to build this web app was an error, or you could call it a limitation, on Instagram, which pushed me to build this app. I am an avid user of social media apps such as Instagram, X, Reddit, etc., and I tend to save a lot of posts about various topics such as coding, gym, memes, food recipes and places to check out. Recently I experienced a fault in Instagram where I apparently exceeded the number of saved folders and saved posts/reels in those folders, due to which some of my saved folders were taken down by Instagram. One of those folders was saved places which I wanted to check out in multiple cities. This prompted me to check out other alternatives for saved Instagram posts or reels, and I stumbled upon quite a few options, but the only downside was that I had to pay for them, which wasn't in my budget. I also asked a few of my colleagues and friends about this issue, and they had all experienced the same issue at some point. This prompted me to use the opportunity given in this hackathon to solve this issue by building my own web app, which is free and lets users save posts/reels about places they want to check out in the future.
What it does
My app lets users save posts or reels in the app. The user has to either post the Instagram link for the post/reel or the user has to take a screenshot of the same and upload it in the add button. The AI which we have implemented scans the link or the screenshot and identifies the place and verifies with the user once if the identified place is correct or not. If it is correct, then the user can save it in the saved places list and can get key information about the place such as opening hours, busy timings, address, cost per person and ratings from google reviews. My app also has an AI integrated feature which is currently using Gemini 3.5 flash-lite model for helping the users scan their saved places lists and plan an itinerary for a hangout. The model can take inputs from the users and suggest them places accordingly for various occasions.
How we built it
For building the app, we used the given skills folder in Claude, and I started planning how to solve the issue at hand. For the app development, we used Next.js on Vercel for building the web pages. We used Next.js since it is built by Vercel and it helps with easy deployment, search engine visibility and application performance. We can also tweak the deployment modes in Vercel based on our needs. Since our project uses API keys for Google Maps and the Gemini model, we can easily integrate these API keys into our app with the help of Vercel. Vercel also helps us connect to our GitHub accounts easily and helps with scalable backend structures. For the backend, we used Supabase. Supabase provides easy sign-in, the database (profiles, spaces, places, photos, plans) and photo storage, along with row-level security so each user sees only their own rows. Supabase is also easy to integrate with Vercel. It provides instant APIs and helps us track the database schema easily, while being open source and easily scalable. Supabase also stores the places with their place IDs, which are easily retrievable. We used the Gemini 3.5 Flash-Lite model by integrating the API from Google AI Studio, which provides some free AI models for various use cases. The AI model reads screenshots, the Instagram link and captions to analyse the saved posts. It also estimates busy times for various places and helps plan the day for users using place IDs, making a perfect itinerary. We also use Google's APIs, such as google-maps-api and google-routes-api, for getting information such as addresses, opening hours, user ratings and cost per person. The google-routes-api gives key information such as transit times between stops so that the user can plan their day accordingly. We also keep a guard (keepSavedStops), which only allows places that have been saved by the user in our web app. To build this app, we first planned it out by analysing the scope, then installed all the tools and moved on to building the app (scope → PRD → spec). The total build was divided into 7 slices and executed slice by slice; the app was tested after each slice to check that it was working and then committed.
Challenges we ran into
Building this also had its own share of hurdles. I faced a billing error which broke our gemini api key. This forced us to migrate into a new project thus resetting everything we had built. We also encountered other errors such as one where gemini kept ignoring our formatting inside Next.js until we used Google's unbundled library. Also since social media captions rarely name exact locations we had to pivot to other methods such as using screenshots as our main input to increase user heuristics. Deploying the app was just as tough since Vercel was stalling the process until we were able to strictly configure the Next.js setup along with Supabase integration and also domain temporarily blocked our map which had to be configured using a code. We also experienced a weird bug which labeled all the photos to "no location" until a test photo finally helped us catch it. We also had difficulties in integrating the GitHub link since I had made some errors which creating the GitHub repo.
Accomplishments that we're proud of
I am proud to share that the app is working live while being deployed in Vercel and I have also made a video about the app showing the working demo. It is able to successfully build realistic itineraries by using the integrated AI by scrapping the user's saved places which is a perfect news for organizing those spots which we wanted to check out all in one place while removing Instagram limitation feature. The app also makes it easy to save and also add your photos as a memoir to revisit, while also factoring in some real-time information such as transit times and operating hours. The app is also designed to be minimalistic and colourful. I am proud of the design of the app as well building the app since I was able to work on these tools and frameworks which I wasn't aware of initially. I am proud of the fact that I made a solo project on my own and I am able to explain it properly.
What we learned
The entire hackathon was a huge learning opportunity where I happened to learn a lot about the behind the scenes of building a web-app or a native app for mobile phones. I learnt about building the specs, and writing the scope before writing the code. I also understood the importance of developing important documents such as PRD, TDD etc for any project which helps you understands the requirements for the project at hand and hence makes you execute the code better by removing the bottle-necks. I also understood of developing the project by splitting it in various execution-able parts such as slices and test each slice before moving on to the next one. I also understood about next.js using Vercel, supabase, various environment variables and the api keys being used for each project. I also learnt that we cannot solely depend on writing prompts and copy pasting the code from chatbots but rather we have to put in efforts in understanding the code and participating in the project. We have to understand what we are doing rather than blindly following AI tools.
What's next for Scroll Scrape
For the further development of the app, I would like to extend certain features which lets us save not just cool spots or places from various cities but also other stuff from social media such as coding, food recipes, dresses or anything else. I would also like to add better models for this project so that the AI can function better and also give better results. I would also like to add other features such as sharing this itinerary which the AI plans with friends and being able to plan together. We can also add a feature where the AI is able to recognise the place by the reel's audio itself which increases the user heuristics. Another feature I was planning on adding was nearby location suggestions by using the user's current location which also helps the user identify new places on his own. I hope to work on this project more and see what I can do since I do not want it to be another subscription based model which charges users but rather to keep it open-sourced and free for all.
Built With
- d3-geo
- gemini
- google-maps
- google-places
- google-routes-api
- next.js
- postgresql
- react
- supabase
- tailwindcss
- typescript
- vercel
Log in or sign up for Devpost to join the conversation.