Pocket Analyst

Inspiration

The inspiration for Pocket Analyst stemmed from the need for an accessible, visually engaging tool to simplify data analysis for small businesses and data enthusiasts. Combined with the power of modern AI APIs like Perplexity Sonar to deliver transparent, actionable insights. The idea was to create a platform where users could upload a CSV or ask a question (e.g., “How to optimize a SQL query?”) and receive clear visualizations and trustworthy citations as raw URLs, all wrapped in a mobile-friendly, immersive interface.

What it does

Pocket Analyst is a web application that transforms data into insights and answers data-related questions. Users can:

Upload CSV Files: Analyze datasets (e.g., sample.csv with category, revenue) to generate a neon-styled Chart.js bar chart (e.g., Electronics: $3800), insights (e.g., “Electronics: 86% revenue”), business recommendations, and future analysis methods (e.g., k-means clustering with PySpark). Query Data Techniques: Ask questions like “How to find duplicates in SQL?” via the /analyst-query endpoint, receiving detailed responses with inline citations (e.g., [1] https://www.atlassian.com/...) as clickable URLs.

Trust Transparent Citations: Raw URLs from the Perplexity Sonar API ensure source credibility, displayed clearly in the “Data Sources” section. The app is intuitive, responsive, and designed for users ranging from business owners to data analysts, making complex analysis accessible and visually stunning.

We built Pocket Analyst using a modern web stack, leveraging open-source tools and APIs:

Frontend: React (v18.2.0) with JSX, served via CDN (unpkg.com), and Tailwind CSS for a Cyberpunk-themed UI (neon colors, glow effects). Google Fonts provided Orbitron (buttons, titles) and Roboto (results). Chart.js (v4.4.3) powered interactive bar charts, with Babel Standalone for in-browser JSX compilation. Backend: Express.js handled API routing, file uploads (Multer), and CSV parsing (csv-parse). The /analyst-query and /analyze-data endpoints integrated with the Perplexity Sonar API (sonar-pro model) for answers and citations.

Workflow: We iteratively developed in VS Code, testing locally (http://localhost:3000) and debugging with Chrome DevTools. The Perplexity API’s JSON schema ensured structured CSV analysis output (insights, recommendations, tools). The app was designed for rapid iteration, with a focus on mobile responsiveness and error handling (e.g., ErrorBoundary for React errors).

Challenges we ran into

Building Pocket Analyst presented several hurdles: Perplexity Sonar API Integration: Extracting raw URL citations from API responses required custom parsing logic to map inline [1] references, especially when citations were sparse or inconsistent. Chart.js Responsiveness: Ensuring bar charts rendered smoothly on mobile devices involved disabling animations and tweaking Tailwind CSS classes (e.g., sm:h-64) to prevent overflow. File Uploads: Handling CSV uploads via Multer and parsing with csv-parse was tricky, as malformed CSVs could break the /analyze-data endpoint. We added validation and error messages to improve robustness.

Accomplishments that we're proud of

We’re thrilled with Pocket Analyst’s achievements:

Seamless Data Analysis: Uploading a CSV like sample.csv produces a vibrant Chart.js bar chart and actionable insights (e.g., “Electronics: 86% revenue”) in seconds.

Transparent Citations: Displaying raw URLs (e.g., [1] https://www.atlassian.com/...) builds trust, a rare feature in AI-driven tools.

Mobile Responsiveness: Tailwind CSS ensures the app shines on phones, with readable charts and clickable citations, tested via Chrome DevTools and Ngrok.

Robust Backend: The Express.js server handles file uploads, API calls, and session history (conversationHistories Map) reliably.

What we learned

Developing Pocket Analyst was a rich learning experience:

API-Driven Development: Integrating the Perplexity Sonar API taught us to handle JSON schemas, parse citations, and manage API rate limits effectively.

Frontend Optimization: We mastered Tailwind CSS for responsive, themed UIs and learned to optimize Chart.js for mobile performance (e.g., disabling animations).

Backend Engineering: Building with Express.js deepened our understanding of file handling (Multer), CORS, and session management in Node.js.

Debugging Skills: Using VS Code Terminal and Chrome DevTools, we honed debugging for React errors, API responses, and Ngrok connectivity.

UI/UX Design: Balancing Cyberpunk aesthetics with usability showed us the importance of font choices (Orbitron vs. Roboto) and mobile-first design.

Rapid Prototyping: Working under time constraints emphasized prioritizing core features and iterative testing. These lessons will guide future projects, blending technical rigor with creative design.

What's next for Pocket Analyst

The future of Pocket Analyst is bright, with plans to enhance functionality and reach:

Advanced Visualizations: Add pie and line charts to Chart.js, allowing users to toggle chart types for diverse data views.

Real-Time Analysis: Support streaming datasets for live insights, using WebSockets or server-sent events

User Authentication: Implement OAuth or JWT to personalize user sessions and save analysis history.

Mobile Apps: Develop Android/iOS versions using Ionic/Capacitor, reusing the React codebase for cross-platform reach.

Additional APIs: Integrate Google BigQuery or Tableau APIs for advanced analytics and dashboard exports.

Offline Mode: Use service workers for cached responses, enabling limited offline functionality.

Open-Source Community: Publish on GitHub with comprehensive tests (Jest, Cypress) and CI/CD pipelines, inviting contributions.

Built With

• chart.js
• express.js
• react
• tailwind