Friction

I. Project Description (Narrative)

Briefly describe your project so judges can understand what it does and how it demonstrates the agent. The description must be at least 25 words long (longer is welcome). Explain the user problem, core flow, and key demos, and make sure to describe how the submission will run end-to-end.

Impulse Guard is an MVP web application built to help users combat impulse buying and reduce financial stress. The core problem is the lack of friction and immediate feedback when attempting discretionary purchases. The solution establishes a rule-based control system and provides a central Dashboard that showcases how much money the application has “saved” them. The user flow begins with Clerk Sign Up, followed by an Onboarding Wizard (Mock Bank Connection and setting spending rules). Authenticated users access the protected Dashboard, Transactions, and Impulse Rules screens. The submission runs end-to-end using Next.js 14 App Router and a sophisticated mock data layer for all metrics, making it fully functional immediately upon running the dev server.

II. Judging Criteria Summary

Summarize how your project meets and should address each judging criterion: Working Prototype, Technical Complexity & Integration, Innovation & Creativity, Real-World Impact, and Theme Alignment.

Criterion	Summary and Alignment
Working Prototype	A complete, end-to-end MVP featuring all core screens (Landing, Auth, Onboarding, Dashboard, Transactions, Rules). The flow is fully implemented and relies on a comprehensive mock data generator to render dynamic statistics and lists.
Technical Complexity & Integration	Leverages Next.js 14 App Router for routing and protected layouts. Integrates Clerk for secure authentication and handles complex redirect logic (Sign Up → Onboarding, Login → Dashboard). Uses client-side Context for persistent rule management.
Innovation & Creativity	Focuses on proactive prevention and a positive feedback loop, uniquely tracking “Impulse buys blocked” and “Estimated € saved”. The multi-step onboarding wizard provides a customized setup experience.
Real-World Impact	Directly addresses the modern problem of financial stress and consumer debt caused by impulse buying, providing users with tools to visualize habits and adjust spending rules, leading to tangible savings.
Theme Alignment	Successfully utilizes modern web development tools and integrations (Clerk, Tailwind) to rapidly build a secure, data-driven application with a polished user interface.

III. Technical Specifications & Reproducibility

Also list specific technologies, frameworks, libraries, APIs, model providers, cloud services, voice/browser/tool integrations, and any setup or demo steps so judges can evaluate reproducibility.

Category	Item
Frameworks / Libraries	Next.js 14 (App Router), React, TypeScript
UI / Styling	Tailwind CSS, shadcn/ui components
Authentication Service	Clerk (@clerk/nextjs)
Database / Data Simulation	Bolt Database (Schema defined), Custom Mock Data Generation (/lib/data/mockData.ts)
State Management	React Context (for spending rules persistence)
Integrations	None (Chrome Extension part ignored for MVP)

⚙️ Setup & Demo Steps (for Judges)

1. Set Clerk Keys: Update the project’s .env file with a valid Clerk Publishable Key and Secret Key.
2. Run Development Server: Run the application locally using the standard Next.js command (npm run dev).
3. Test Flow:

* Access the root path (`/`). You will see the **Landing Page**.  
* Click "Get started" to navigate to the Clerk Sign Up page.  
* Complete Sign Up. You will be redirected to the **Onboarding Wizard** (`/onboarding`).  
* Complete the 3 steps (Mock Bank Connect, Set Rules).  
* After completion, you are redirected to the fully functional **Dashboard** (`/dashboard`), displaying mock data and metrics.  
* Use the navigation in the header to view the **Transactions** and **Rules** screens.