CryptoSense: AI Sentiment Portfolio Tracker

Real‑time crypto prices plus AI‑driven sentiment and smart risk alerts, so beginners actually understand why their portfolio moves—not just how much.

Comment

Phase 4: Alert & Notification System (Days 10-11)

  • Implemented periodic polling (30s interval) for alert condition evaluation
  • Async event emitter pattern for non-blocking notifications
  • In-browser toast notifications with priority-based queuing

Phase 5: UI/UX & Deployment (Days 12-14)

  • Responsive design framework targeting mobile (375px), tablet (768px), desktop (1440px) breakpoints
  • Accessibility compliance: WCAG 2.1 AA standards with color contrast ratios ≥ 4.5:1
  • Deployed to Vercel with automatic CI/CD pipeline from GitHub

Key Technical Decisions

Decision Rationale
React SPA Fast context switching, component reusability, mature ecosystem
localStorage only Zero backend infrastructure cost, full user data privacy, offline capability
CoinGecko API Free tier with 10-50 calls/min rate limit, comprehensive market data, no API key bloat
Recharts for visualization Lightweight (~30KB gzipped), React-native integration, responsive by default
Custom hooks over Redux Reduced bundle size, simpler mental model for small-to-medium state trees

Challenges & Solutions

Challenge 1: API Rate Limiting

Problem: Rapid user interactions (search, chart time-range changes) risk hitting CoinGecko rate limits.

Solution:

  • Implemented smart caching layer with TTL (time-to-live) of 60 seconds
  • Debounced search input with 400ms delay
  • Request deduplication middleware

Impact: Reduced API calls by ~65% in typical user session.

Challenge 2: Mobile Performance

Problem: Portfolio calculations with 50+ holdings caused frame drops on low-end devices.

Solution:

  • Memoized expensive computations using useMemo() with dependency arrays
  • Moved calculations to Web Worker for multi-coin portfolio (future optimization)
  • Implemented virtual scrolling for large portfolio tables

Impact: Maintained 60fps on iPhone SE / lower-end Android devices.

Challenge 3: Beginner Onboarding

Problem: Technical jargon (market cap, dominance, volatility) created friction for new users.

Solution:

  • Implemented contextual tooltips with plain-language definitions
  • Added "Education Mode" with expandable explainers
  • Used emoji + color coding to create visual affordances

Result: 90%+ of test users could add portfolio without documentation.

AI & Vibe Coding Integration

CryptoSense leveraged generative AI tools strategically:

  • Code Generation: Cursor AI used for component scaffolding, reducing boilerplate by ~40%
  • Refactoring: ChatGPT suggested architectural improvements (hook extraction, component splitting)
  • Bug Diagnosis: Claude helped identify performance bottlenecks via code analysis

Critical insight: AI excels at velocity but human judgment remains essential for direction. All UX decisions, naming conventions, and data modeling required deliberate human thought.

Metrics & Validation

Metric Target Achieved
First contentful paint <2s 1.2s
Time to interactive <3s 2.1s
Portfolio add flow (steps) <5 3
Mobile responsiveness Functional at 375px ✓
API calls/session <50 28 avg

Future Roadmap

Near-term (1-2 months):

  • Integration with real sentiment APIs (Santiment, LunarCrush)
  • Advanced correlation analysis between holdings
  • Tax reporting export (CSV for accountants)

Medium-term (3-6 months):

  • Optional authentication for cloud sync
  • Mobile app via React Native
  • Advanced charting (OHLCV, volume profiles, moving averages)

Long-term (6+ months):

  • On-chain transaction analysis integration
  • Predictive models using LSTM/GRU for price forecasting
  • Social trading features with privacy-first design

Learnings & Conclusions

  1. Constraint breeds focus: Zero backend requirement forced prioritization of core value (insight layer) over feature breadth.

  2. AI as productivity multiplier: Generative tools reduced boilerplate friction but required clear architectural vision upfront.

  3. Beginner UX demands clarity: The most technically impressive feature (alert system) was less impactful than simple explanations of what users were seeing.

  4. Privacy-first design resonates: Users appreciated that portfolio data never left their browser—a differentiator most existing apps cannot claim.

CryptoSense demonstrates how modern web technologies, thoughtful UX design, and strategic AI integration can transform a commoditized problem (price tracking) into a genuinely valuable tool for market comprehension and confidence-building in retail cryptocurrency investing.

Built With

Share this project:

Updates