AI Impact Navigator

AI Impact Navigator empowers users to navigate AI’s impact with Claude assessments, Algorand NFT community hub, real-time dashboards. Built on Next.js, Supabase, Bolt.new, it’s accessible and scalable

Comment

About the Project: AI Impact Navigator

Project Name: AI Impact Navigator
Hackathon: Bolt.new Hackathon (May 30 - June 30, 2025)
Team: Fujitsu European Modernization CoE - Vibe coders team. (Three developers ) Repository: /ai-impact-navigator-v3/

Inspiration

The rapid rise of AI is transforming jobs and communities, leaving freelancers, citizen developers, and small businesses uncertain about their future. Inspired by this challenge, we envisioned AI Impact Navigator, a platform to empower users like Fiona (a freelancer), Sam (a citizen developer), and Bella (a small business owner) to understand and adapt to AI’s impact. Our goal was to combine AI-driven insights, community collaboration, and blockchain rewards in a user-friendly, accessible tool. The Bolt.new hackathon, with its no-code ethos and judges like Alex Albert (AI expert) and Greg Isenberg (community advocate), motivated us to create a solution that’s both innovative and inclusive, aligning with their vision of impactful, community-driven tech.

What We Learned

This project was a crash course in no-code development and resilience. Key lessons, documented in lessons-learned.md, include:

  • Bolt.new Limitations: Bolt’s Node.js-Supabase integration is unreliable, with persistent connection issues (e.g., infinite buffering). Pivoting to Next.js with manual Supabase setup saved time and credits.
  • Credit Management: Bolt Pro credits (~150-200 limit) and Algorand mints (~15-20) require careful tracking to avoid AI drift or overuse. Logging prompts in prompt-list.md was critical.
  • Accessibility Matters: Embedding WCAG 2.1 compliance (e.g., high-contrast UI, keyboard navigation) early, as Angie Jones advocates, improved UX and saved rework.
  • Team Coordination: Daily syncs via GitHub and Trello, with clear roles (Developer 1: UI, Developer 2: AI/data), prevented duplicated efforts.
  • Rapid Prototyping: Bolt’s IDE and Next.js enabled fast iteration, but precise prompts referencing Wireframes and Data Schema were essential to avoid AI-generated errors.

How We Built It

We built AI Impact Navigator using Bolt.new, Next.js, Supabase, Algorand, and Claude, delivering three core features:

  1. AI Impact Assessment: Users input job and skills via a mobile-first form (Next.js, Tailwind CSS), with Claude generating impact predictions (e.g., “30% automation risk”) stored in Supabase’s Users table.
  2. Community Collaboration Hub: A forum for sharing AI insights, with upvoting and Algorand NFT rewards for posts reaching 10+ votes, stored in Contributions.
  3. Impact Dashboard: Real-time progress tracking (e.g., skills learned) and AI trends, pulled from Supabase’s Metrics table, visualized with Chart.js.

Process

  • Planning (June 10-17): Created six artifacts (Project Scope, User Stories, Data Schema, Wireframes, Prompt List, Task Plan V3) in /ai-impact-navigator-v2/, defining MVP scope and UX.
  • Development (June 17-28): Pivoted to Next.js after Node.js-Supabase failures. Developer 1 built UIs using ~60 Bolt prompts, guided by Wireframes PNGs. Developer 2 set up Supabase tables manually and integrated Claude and Algorand.
  • Deployment: Deployed to Netlify for a live demo, with ~7 Algorand NFT mints for testing.
  • Tools: Bolt.new IDE, Supabase JavaScript client, Algorand SDK, Chart.js, GitHub for collaboration, Trello for tracking.

Artifacts

  • project-scope.md: Defined vision and tech stack.
  • user-stories.md: Guided features for diverse users.
  • data-schema.md: Structured Supabase tables.
  • wireframes.md & PNGs: Visualized UI layouts.
  • prompt-list.md: ~60 prompts for efficient Bolt AI use.
  • task-plan-v3.md: Scheduled tasks for June 17-30.
  • lessons-learned.md: Captured 10 key lessons for future projects.

Challenges Faced

  1. Node.js-Supabase Issues: Bolt’s automated Supabase connection failed (e.g., “not supported” errors), costing ~10-20 Bolt Pro credits. Resolution: Pivoted to Next.js with manual Supabase setup, configuring environment variables and tables directly.
  2. Credit Constraints: Limited Bolt Pro (~150-200) and Algorand (~15-20) credits risked depletion. Resolution: Capped prompts at ~60 and used dummy NFT mints, tracking usage in prompt-list.md.
  3. Timeline Misstep: Assumed a June 20 deadline, rushing initial plans. Resolution: Clarified June 30 deadline, revising Task Plan V3 for a balanced 13-day schedule.
  4. Accessibility Oversight: Early UI prompts lacked accessibility specs. Resolution: Added WCAG 2.1 requirements (e.g., alt text for charts) and allocated polish time (June 27-28).
  5. Team Coordination: Initial lack of clear roles caused overlap. Resolution: Defined Developer 1 (UI) and Developer 2 (AI/data) roles in Task Plan V3, with daily GitHub syncs.

Impact and Vision

AI Impact Navigator empowers users to navigate AI’s disruption with actionable insights, community engagement, and progress tracking. Its accessible, no-code design and blockchain rewards make it a scalable solution for the AI era, appealing to judges like Pieter Levels (no-code) and Greg Isenberg (community). We’re proud to have overcome technical hurdles to deliver a user-centric tool, and we’re excited to iterate further, potentially adding emotional support tracking or Grok API insights.

Built With

  • 2025)-**team**:-two-developers-**repository**:-`/ai-impact-navigator-v2/`-##-technologies-used-the-**ai-impact-navigator**-was-built-using-a-modern
  • about-the-project.md`
  • accessible-ui-styling
  • addressed-bolt?s-node.js-supabase-compatibility-issues
  • ai-driven
  • algorand-integrations).-**typescript**:-used-for-type-safe-supabase-queries-and-next.js-components-to-ensure-robust-code.-**sql**:-defined-supabase-tables-(`users`
  • aligned-with-`wireframes.md`-layouts.-**platforms**:-**bolt.new**:-no-code-ide-for-rapid-prototyping-and-deployment
  • and-blockchain-enabled-platform.-below-are-the-key-technologies-used:-**languages**:-**javascript**:-core-language-for-front-end-(next.js)-and-backend-logic-(supabase
  • and-impact-dashboard.-chosen-for-bolt.new-compatibility-after-pivoting-from-node.js.-**tailwind-css**:-utility-first-css-framework-for-responsive
  • and-metrics-(`metrics:-{progress
  • and-storage-(e.g.
  • and-team-collaboration.-**trello**-(optional):-task-tracking-for-`task-plan-v3.md`-execution
  • appealing-to-judges-like-angie-jones.-the-stack-leverages-bolt?s-no-code-strengths-(pieter-levels)-and-integrates-ai-(alex-albert)-and-blockchain-(greg-isenberg)-for-a-robust
  • as-detailed-in-`lessons-learned.md`
  • built-with:-ai-impact-navigator-**project-name**:-ai-impact-navigator-**hackathon**:-bolt.new-hackathon-(may-30-june-30
  • code-commits
  • community-collaboration-hub
  • community-driven
  • community-driven-solution.-**owner**:-both-developers;-developer-2-includes-in-submission-docs
  • community-hub.png`
  • community-posts-(`contributions:-{title
  • content
  • contributions`
  • developer-1-verifies-for-demo.-**version**:-1.0-(june-29
  • elevator-pitch.md`).-**frameworks**:-**next.js**:-react-based-framework-for-mobile-first
  • enhancing-team-coordination.-**cloud-services**:-**supabase**:-open-source-firebase-alternative-for-authentication-(google-oauth)
  • ensuring-a-stable-build.-accessibility-features-(wcag-2.1
  • ensuring-accessibility-with-alt-text.-**excalidraw**-(optional):-used-to-create-wireframe-pngs-(`assessment-form.png`
  • ensuring-seamless-deployment-with-supabase-environment-variables.-**github**:-repository-(`/ai-impact-navigator-v2/`)-for-artifact-storage
  • guiding-ui-prompts.-##-notes-the-pivot-from-node.js-to-next.js
  • high-contrast-ui
  • impact-dashboard.png`)-for-`wireframes.md`
  • impact:-"30%-automation-risk"}`)-in-the-ai-impact-assessment-module.-**algorand-sdk**:-blockchain-api-for-minting-nfts-(~7-mints)-for-community-posts-with-10+-votes
  • integrated-manually-in-`/lib/supabase.ts`.-**other-technologies**:-**chart.js**:-visualized-user-progress-(e.g.
  • keyboard-navigation)-were-embedded-in-ui-prompts
  • lessons-learned.md`
  • metrics`)-per-`data-schema.md`.-**markdown**:-structured-artifacts-(`project-scope.md`
  • metrics`-tables)
  • nft-id}`)
  • no-code-friendly-stack-to-deliver-an-accessible
  • per-`data-schema.md`.-supports-real-time-updates-for-voting-and-dashboards.-**apis**:-**claude-(anthropic)**:-ai-api-for-generating-json-impact-predictions-(e.g.
  • post-images).-configured-manually-to-bypass-bolt?s-unreliable-integration.-**databases**:-**supabase-postgresql**:-stores-user-profiles-(`users:-{job
  • powering-the-ai-impact-assessment-form
  • predictions}`)
  • prompt-list.md`
  • real-time-database-(`users`
  • risk-score:-30
  • server-side-rendered-ui
  • skills
  • skills-learned)-and-trends-in-the-impact-dashboard-with-bar-charts
  • stored-in-`contributions.nft-id`.-**supabase-javascript-client-(@supabase/supabase-js)**:-facilitates-client-side-database-queries-and-authentication
  • task-plan-v3.md`
  • trend-data}`)
  • user-stories.md`
  • using-~60-70-ai-prompts-from-`prompt-list.md`-to-generate-next.js-code-and-ui-components.-**netlify**:-hosted-the-live-demo
  • votes
  • wireframes.md`
Share this project:

Updates

Submission history