RPInSights

Project Story: RPInSights

Inspiration

In my first week as a freshman I heavily relied on Google Maps to navigate the RPI campus which was quite challenging. I noticed that Google Maps was good for getting me places but even then it tend to give me the wrong direction, mess up, etc and it lacked real-time data on facilities like dining halls, study spaces, and how I could take advantage of these resources to make the most of my time at RPI. This problem inspired me to develop RPInSights, a modern, AI-powered campus navigation tool with interactive 3D mapping.

Key Learnings

This project provided valuable experience in:

• API Integration: Mapbox (mapping), OpenAI (NLP)
• Web Development: Responsive design with Next.js and React
• Geospatial Data Management: Using GeoJSON
• Routing Algorithms: Real-time, multi-modal routing
• UI Design: Tailwind CSS for a simple user-friendly interface
• Security: Handling environment variables and API keys

One of my main takeaways in building this API rich AI powered webapp is that prompt engineering is an art - crafting prompts that consistently return structured data took multiple iterations. Many online courses, or at least the ones I've taken, work(ed) with simple LLMs that take(d) in single-sentence strings and output many other strings. In working with GeoJSON data, however, I found myself "dancing" with the right prompt and in considering the context window as well as the modalities I included in the webapp. I thank GPT for assisting me with bugs, even solving them for me and on top of that I thank most of my efforts to documentation, specifically clear documentation of API responses, which saved immense time during development. Lastly, without the work of the countless developers behind my tech stack this project would not have been possible so my gratitude goes towards them as well.

Development Process

1. Data Collection & Structuring

• Collected campus facility data, organized in structured GeoJSON files
• Included detailed info like hours of operation and special features

2. Core Features

• Built a 3D interactive map with Mapbox GL JS, used GeoJSON files to customize map landmarks
• Integrated GPT-4 for natural language assistance and for real time polyline path creation
• Added multi-modal routing (walk, bike, drive) and custom UI with Tailwind CSS

3. User Experience Enhancements

• Designed a casual yet accurate AI assistant interface for seamless interaction with user
• Implemented real-time location tracking and a "nearest facility" feature for different locations
• Multi-modal routing options for people with varying preferences at transportation

Challenges

• Data Management: Setting up Mapbox with accurate, up-to-date facility data and ensuring chatbot accuracy with said data in conversation
• Race Conditions: Handling async operations when users rapidly change routes or search queries
• Edge Cases: Handling building entrances, restricted areas, and construction zones
• API Coordination: Managing multiple services, handling rate limits
• Performance: Optimizing map rendering and API calls to reduce latency

Built With

• authority
• class
• clsx
• components
• contextapi
• css
• customhookpatterns
• cva)
• directions
• dynamicimports
• eslint
• geocoding
• geojson
• geolocationapi
• gl
• gpt-4
• javascript
• json
• lucide
• mapbox
• merge
• next.js
• node.js
• npm
• openai
• postcss
• primitives
• radix
• react
• reacthooks
• shadcn
• tiling
• typedeclarations
• typescript
• typescriptinterfaces
• variance
• webstorageapi