Real-time Research Assistant

• 

Inspiration

The idea for the Real-Time Research Assistant App stemmed from the growing need for quick, reliable, and verifiable information in an era of information overload. We were inspired by tools like Perplexity AI, which combine real-time web access with AI-driven answers, but we wanted to create a more focused, user-friendly tool tailored for researchers, students, and professionals. The goal was to build an app that not only provides accurate answers but also emphasizes transparency through citations and advanced search capabilities like domain filtering. The sleek, futuristic design of the app, reflected in its holographic logo, draws inspiration from sci-fi interfaces, symbolizing the cutting-edge technology powering the app.

What It Does

The Real-Time Research Assistant App allows users to ask any question and receive concise, accurate answers in real time, backed by citations from trusted sources. Key features include:

Query Input and Real-Time Answers: Users enter a question (e.g., "What is the capital of France?"), and the app delivers an answer with markdown formatting for readability (e.g., bullet points, headers).

Citations: Answers include clickable links to sources, ensuring transparency and trust.

Domain Filtering: Advanced users can filter results by domain (e.g., ".edu" for academic sources), leveraging the Sonar Pro model.

Recent Queries: The app saves up to five recent queries for quick access.

Responsive UI: Built with Tailwind CSS, the app works seamlessly across devices, with a holographic interface design that feels futuristic and intuitive.

The app is powered by Perplexity’s Sonar API, ensuring real-time web access and high-quality responses, making it ideal for academic research, professional fact-checking, or casual learning.

How We Built It

We built the app using a modern web tech stack to ensure scalability, performance, and ease of use:

Frontend: React (v18.2.0) for a dynamic, component-based UI, with Tailwind CSS for responsive styling. The UI renders answers and citations in a clean, prose-like format.

Backend: Node.js and Express.js for a lightweight server to handle API requests securely. The backend interfaces with the Perplexity Sonar API, using Axios for HTTP requests and the marked library to parse markdown responses.

API Integration: The Perplexity Sonar API (Sonar Pro model) powers the app’s core functionality, providing real-time answers, citations, and domain filtering. API keys are securely stored using dotenv.

Development Tools: We used Visual Studio Code for coding, Git for version control, Postman for API testing, and Vite for fast builds. Vercel was used for deployment, ensuring seamless hosting and scalability.

Logo Design: The holographic logo, featuring a magnifying glass and lightning bolt, was designed to reflect the app’s focus on real-time search and futuristic technology.

The app was developed iteratively, starting with a basic frontend-backend setup, followed by API integration, UI enhancements, and finally deployment and testing across browsers.

Challenges We Ran Into

Building the app came with several challenges:

API Integration: The Perplexity Sonar API required careful handling of rate limits and error responses. We had to implement robust error handling to manage scenarios like invalid API keys or network issues.

Markdown Rendering: Rendering markdown safely in the frontend was tricky. We initially faced issues with XSS vulnerabilities but resolved them by using the marked library with proper sanitization.

Cross-Browser Compatibility: Ensuring the holographic UI and Tailwind styles worked consistently across Chrome, Firefox, and Safari required extensive testing and CSS adjustments.

Deployment: Configuring Vercel to handle both the frontend and backend (with environment variables for the API key) was initially complex, but we resolved it by restructuring the app for Vercel’s serverless environment.

Performance Optimization: Real-time API calls sometimes led to latency. We optimized by caching recent queries in the frontend state and minimizing API payloads.

Accomplishments That We’re Proud Of

We’re thrilled with several achievements:

Seamless API Integration: Successfully integrating the Perplexity Sonar API to deliver real-time, citation-backed answers with domain filtering.

Futuristic Design: The holographic interface and logo design give the app a unique, sci-fi aesthetic that aligns with its cutting-edge technology.

Cross-Platform Reliability: The app runs consistently across all major browsers, with no installation issues, thanks to clear setup instructions and Vercel deployment.

User Experience: The combination of markdown-formatted answers, clickable citations, and recent query storage creates a smooth, intuitive experience for users.

Scalability: The app’s architecture, built with React and Express, is lightweight and scalable, handling multiple users without performance degradation.

What We Learned

This project taught us valuable lessons:

API Management: We gained a deeper understanding of working with third-party APIs, including rate limiting, error handling, and secure key management.

Frontend Optimization: Rendering dynamic content (like markdown) safely and efficiently required learning about XSS prevention and libraries like marked.

Responsive Design: Tailwind CSS streamlined our styling process, but we learned the importance of testing across devices to ensure consistency.

Deployment Strategies: Vercel deployment taught us how to manage environment variables and serverless functions effectively.

User-Centric Design: Feedback loops during testing helped us prioritize features like recent queries and domain filtering, improving the overall user experience.

What’s Next for Real-Time Research Assistant

We have exciting plans to enhance the app:

Voice Input: Adding voice-to-text functionality to allow users to ask questions hands-free, leveraging browser speech APIs.

Advanced Filtering: Expanding domain filtering to include more granular options (e.g., date ranges, specific websites) as the Sonar API evolves.

Offline Mode: Implementing local caching for recent queries and answers, allowing limited functionality offline.

User Accounts: Introducing user accounts to save queries and preferences across sessions, using a lightweight database like Firebase.

AI Insights: Adding a feature to summarize long answers or highlight key points, using the Sonar API’s capabilities to extract insights.

Mobile App: Developing a native mobile version for iOS and Android, using React Native to bring the holographic interface to mobile users.

The Real-Time Research Assistant App is just the beginning—we aim to make it a go-to tool for anyone seeking fast, reliable, and transparent information in a futuristic, user-friendly package.

Built With

• all