HaoMantap
An innovative map directory web app enriched with Google Gemini AI for personalized food recommendations. Built as a group project for the NUS Software Engineering on Application Architecture module.
Role
Fullstack Developer
Year
2024
Deliverable
Responsive Map Directory Web App
AI Recommendation Engine
Website
Tech Stack
Next.js ReactTypeScriptTailwind CSSMongoDBNextAuth.jsGoogle Maps APIGoogle Gemini APIYouTube Data API
Overview
HaoMantap is an innovative map directory responsive web app designed to help users discover popular nearby food places. This project was developed as part of the IT5007 - Software Engineering on Application Architecture module at NUS.
The application goes beyond simple listing by enriching location data with insights from Google Maps, YouTube, and Google Gemini AI.
Key Features
- AI Recommendation List: We integrated Google Gemini AI to curate personalized options, picking the best restaurant from a list tailored specifically to the user.
- Real-Time Data Fetching: The app utilizes the Google Places API to display restaurant locations and data in real-time, helping users find nearby dining options instantly.
- Multimedia Integration: To enhance the decision-making process, we integrated the YouTube Data API v3 to display related videos and thumbnails directly on the restaurant details page.
- User Personalization: Users can save their favorite spots using a secure backend powered by MongoDB Atlas.
Technical Architecture
The application was built using a modern, scalable tech stack:
- Frontend: React and Next.js styled with Tailwind CSS for a sleek, responsive interface.
- Backend: Leveraged Next.js API routes and Node.js for server-side logic.
- Authentication: Implemented NextAuth.js for secure user login and session management.
- Reliability: Developed with TypeScript for robust type checking and deployed on Vercel for seamless cloud hosting.