LocalLens

Bored? Find local events & businesses near you.

Comment

Inspiration

Small businesses struggle to make themselves known in a space dominated by well-established businesses and chains. Mainstream applications such as Google Maps and Yelp don’t do enough to help these small businesses, as they often prioritize bigger restaurants/chains. To attract attention to these small businesses, we hope to appeal to the younger demographic that has been increasingly drawn to short-form entertainment in recent years.

What it does

LocalLens is a community-powered discovery app that helps students and locals explore their city's hidden gems. By combining interactive maps with short-form, TikTok-style posts, LocalLens makes it easy to find restaurants, shops, and events tailored to your interests. Users can filter by category while small businesses gain visibility in a crowded market. With a community-developed social feed, LocalLens turns exploring your city into a vibrant, personalized experience.

How we built it

We built LocalLens as a modern full-stack web application with a clear separation between the frontend and backend. The frontend was developed with React 18 and bundled with Vite for optimized builds in production. Styling was handled with Tailwind CSS and PostCSS, which gave us a responsive, utility-first design system. We also integrated Leaflet with React-Leaflet to render interactive maps and pins for local businesses and events. For short-form reels, we embedded videos with the YouTube API and used the Intersection Observer to enable lazy-loading and smooth playback.

The backend was built on Node.js with Express, exposing RESTful API endpoints that connected the frontend to the database. All persistent data, including user accounts, posts, and business listings, was stored with MongoDB with Mongoose. MongoDB's geospatial indexing allowed us to efficiently power "near me" queries and category filtering. To support development and scalability, we used TypeScript in critical API interfaces for type safety, ESLint for code quality, and concurrently to run backend and frontend processes in parallel.

Finally, we deployed the frontend on Vercel and the backend on Heroku/Render, managed collaboration with GitHub, and ensured responsiveness across devices with consistent devices with consistent design patterns.

Challenges we ran into

One of the biggest challenges we faced in building LocalLens was implementing short-form video reels. Adding TikTok-style reels required us to handle video embedding and formatting -- material that our team had little to no prior experience with. Passing YouTube URLs to the frontend initially seemed simple, but formatting them correctly for playback proved tricky. We also had to learn how to do lazy-load and buffer videos so the feed didn't lag, especially when users scrolled quickly through multiple posts. Ultimately, we tackled these hurdles by experimenting with React player libraries, using the Intersection Observer API to trigger playback only when a video was visible. While it pushed us out of our comfort zone, this challenge helped us grow as developers and gave LocalLens a signature social feed component.

Accomplishments that we're proud of

  1. Fully functional interactive map - We successfully integrated Leaflet with React-Leaflet and tied it to MongoDB's geospatial queries, allowing users to explore local businesses and events in real time.
  2. TikTok-style reels feature - Even though none of us had prior experience with video embedding, we built a smooth reel system using YouTube API and Intersection Observer for lazy loading, making the app feel engaging and modern. Overall, we had many victories, big and small, but we are all proud of each other for our performance on our first hackathon. We set out for a goal more lofty than any of us had ever imagined before going into this, and we all grew both in coding and in teamwork skills because of it.

What we learned

Beyond developing many skills related to web development (as none of us had much or any prior experience going into it), a significant takeaway that we can all agree on is that while we did spend adequate time coming up with an idea that we wanted to implement, we should have spent just as much if not more time planning the distribution of tasks and timeline for the components of the project, as overlap in work and confusion over we should each be working on led to great inefficiency.

What's next for LocalLens

LocalLens could see growth into a mobile app, but we would firstly want to improve the security of the login system to better accommodate businesses looking to post videos. Moreover, we would also want to give businesses control over the display of the posts that pop up through the "feed" search. Finally, we would want to look beyond Ithaca, expanding the database to include other cities of NY and beyond.

Share this project:

Updates