GitHunt
WH

wheevu/naver-lens

Embedded AI chat widget for the Naver Smart Store UI. Uses product review data for comprehensive summary. Built for the NAVER Vietnam AI Hackathon.

Name of Product and Hackathon team     UI

Naver-Lens is an embedded chat that provides organized summaries of product reviews using NAVER's HyperCLOVA AI model.

This codebase includes the Naver Smart Store UI (rebuilt from scratch) and the backend for everything.

Built for the NAVER Vietnam AI Hackathon in the final round.

💡 Note: This is an archived showcase of the project. The live NAVER Cloud deployment and HyperCLOVA AI services were only available during the hackathon and are no longer running. This project has been set up with a "showcase mode" that uses a saved AI response so you can still see how the full interface works.

What I Did

I built the backend and handled the deployment for our four-person team, team-triple-threat. Here's what I worked on:

  • Backend Development: I built the main server using Node.js from the ground up.
  • Cloud Deployment: I set up a Linux server on Naver Cloud Platform and got everything running there. I packaged the app using Docker and handled the full deployment so our project could be accessed online.
  • Planning & Presentation: I helped come up with the product idea, wrote down what we needed to build, and designed the slides we used to present our project.

NAVER AI Hackathon Certificate     Team Presentation

How It Works

Backend (Node.js / Express.js)

The backend stores and manages all the product information, lets users filter and browse products, and connects to the AI service (which was developed/tuned by my teammate). I also added caching to make frequently viewed products load faster.

Review Summaries

The main feature is the AI summary panel. When you ask for a summary, the backend streams the response in pieces as it is generated, so you don't have to wait for the entire result.

AI Panel Toast     AI Panel Summary

Database (MongoDB)

I designed the database to handle complex product details like multiple photos, different product options, and customer reviews.

Database Schema Diagram

Cloud Deployment (Naver Cloud Platform)

I packaged the entire app using Docker and put it on a live Naver Cloud Platform server so people could actually use it online.

SSH into Naver Cloud Server

UI

It was Naver's hackathon, so we decided to use one of their existing platforms as the UI. It includes light and dark modes, as well as multilingual support (English/Korean) (the deployed version had working images...).

🇺🇸/🇰🇷 Homepage

Homepage English     Homepage Korean

Product Catalog & Details

Product grid    
Product blogs    

Product details

How to Run (Showcase Mode)

1. Clone the repository

git clone https://github.com/wheevu/naver-lens.git
cd naver-lens

2. Run the Backend

cd backend
npm install
# Make sure SHOWCASE_MODE=true in .env
npm run dev

3. Run the Frontend

cd frontend
npm install
npm run dev

Tech

  • Frontend: React 19, Vite, TypeScript, TailwindCSS, i18next
  • Backend: Node.js, Express.js, MVC, Server-Sent Events (SSE)
  • Database: MongoDB, Mongoose
  • AI: NAVER HyperCLOVA (original), Mock Service (showcase)
  • Deployment: Docker, Naver Cloud Platform, Linux (Ubuntu)

I learned git and properly used GitHub for the first time during this hackathon. It was my first time on Slack too.

As you can imagine, it was mostly the same for everything else 😅 (backend, deployment, writing PRs, resolving conflicts, learning how to make a database schema (!),...), over the course of 3 weeks, from ideation to a working deployment.

It was wild. But it was fun.

wheevu/naver-lens | GitHunt