Project Info
Inspiration
In today's interconnected world, global events unfold at a dizzying pace. A conflict in one region can ripple across the globe, affecting everything from the price of gas to the value of our retirement savings. Yet, for the average person, translating complex geopolitical news into tangible financial decisions is a daunting task. We were inspired by this challenge: to bridge the gap between abstract global events and the concrete financial realities of everyday life, empowering users to not just react to market changes, but to anticipate them.
What it does
Market Shield is an intelligent dashboard that provides clear, personalized, and actionable financial recommendations based on an AI's analysis of geopolitical conflicts. It ingests a user's unique profile—including their location, commute, spending habits, and travel plans—and cross-references it with real-time market data and conflict reports from the ACLED (Armed Conflict Location & Event Data Project). The result is a simple, actionable list of recommendations (e.g., "Postpone electronics purchases due to supply chain risks," or "Fill up your gas tank before an expected price hike") that helps users navigate market volatility, all generated by Anthropic's Claude. Beyond AI-powered insights, Market Shield features a Community page where users can report and track local price changes in real-time. This crowdsourced intelligence allows users to see what others in their area are experiencing—from gas price spikes to grocery shortages—creating a collaborative early warning system that complements the AI analysis.
How we built it
Market Shield was built with a modern, modular architecture designed for performance and type safety. Frontend: We used a React and Vite stack with TypeScript for robust type safety. The UI was crafted with shadcn/ui and Tailwind CSS for a sleek, modern look. All asynchronous data fetching and state management was handled by React Query, and user authentication was managed via the Supabase client library. Frontend: We used a React and Vite stack with TypeScript for robust type safety. The UI was crafted with shadcn/ui and Tailwind CSS for a sleek, modern look. All asynchronous data fetching and state management was handled by React Query, and user authentication was managed via the Supabase client library. Backend: We chose FastAPI (Python) for its high performance, asynchronous capabilities, and automatic data validation with Pydantic. This backend serves as the brain, processing requests and orchestrating the AI. Backend: We chose FastAPI (Python) for its high performance, asynchronous capabilities, and automatic data validation with Pydantic. This backend serves as the brain, processing requests and orchestrating the AI. AI Agent and Model Tuning: Our AI is powered by Anthropic's Claude through the Letta platform for our specific domain which we implemented with sophisticated prompt engineering for our AI Agents. Contextual Prompts: We developed a system to dynamically construct highly detailed prompts. This context provides the AI with a persona ("You are Market Shield, an expert AI..."), the user's complete financial profile, a summary of recent global conflicts sourced from the ACLED API, and crucial domain knowledge about how specific market assets react to conflict. We explicitly hardcoded these relationships to guide the AI's analysis, including: GLD: Gold ETF - A safe haven during conflicts. XLE: Energy Sector ETF - Sensitive to oil/gas price impacts. JETS: Airlines ETF - A key indicator for travel disruption. SOXX: Semiconductor ETF - For tracking tech supply chain risks. ^VIX: Volatility Index - The market's "fear gauge." USO: Oil ETF - For direct oil price exposure. Strict Output Formatting: A major part of the tuning was forcing the model to respond only in a specific JSON format. This was crucial for reliability, as it allowed our frontend to parse the recommendations without fail. AI Agent and Model Tuning: Our AI is powered by Anthropic's Claude through the Letta platform for our specific domain which we implemented with sophisticated prompt engineering for our AI Agents. Contextual Prompts: We developed a system to dynamically construct highly detailed prompts. This context provides the AI with a persona ("You are Market Shield, an expert AI..."), the user's complete financial profile, a summary of recent global conflicts sourced from the ACLED API, and crucial domain knowledge about how specific market assets react to conflict. We explicitly hardcoded these relationships to guide the AI's analysis, including: GLD: Gold ETF - A safe haven during conflicts. XLE: Energy Sector ETF - Sensitive to oil/gas price impacts. JETS: Airlines ETF - A key indicator for travel disruption. SOXX: Semiconductor ETF - For tracking tech supply chain risks. ^VIX: Volatility Index - The market's "fear gauge." USO: Oil ETF - For direct oil price exposure. GLD: Gold ETF - A safe haven during conflicts. XLE: Energy Sector ETF - Sensitive to oil/gas price impacts. JETS: Airlines ETF - A key indicator for travel disruption. SOXX: Semiconductor ETF - For tracking tech supply chain risks. ^VIX: Volatility Index - The market's "fear gauge." USO: Oil ETF - For direct oil price exposure. Strict Output Formatting: A major part of the tuning was forcing the model to respond only in a specific JSON format. This was crucial for reliability, as it allowed our frontend to parse the recommendations without fail.
Challenges we ran into
Database Synchronization: Our biggest initial hurdle was ensuring that a user created via Supabase Auth was also created in our custom public.users table. We solved this by creating a client-side AuthInsertListener. During debugging, we even faced mysterious database hangs, which we eventually traced to a corrupted table that had to be entirely recreated. Database Synchronization: Our biggest initial hurdle was ensuring that a user created via Supabase Auth was also created in our custom public.users table. We solved this by creating a client-side AuthInsertListener. During debugging, we even faced mysterious database hangs, which we eventually traced to a corrupted table that had to be entirely recreated. The Disappearing Modal: We hit a frustrating bug where our "User Preferences" modal refused to open. The browser's console provided a warning about ref forwarding, which led us to discover an incompatibility in how we nested our Tooltip and Dialog components. Correctly restructuring the component composition fixed the issue. The Disappearing Modal: We hit a frustrating bug where our "User Preferences" modal refused to open. The browser's console provided a warning about ref forwarding, which led us to discover an incompatibility in how we nested our Tooltip and Dialog components. Correctly restructuring the component composition fixed the issue. Keeping the UI in Sync: After implementing the "Save Preferences" feature, we noticed the recommendations weren't updating. The frontend had no way of knowing the data on the server had changed. The solution was to use React Query's queryClient to manually invalidateQueries, which told our app to discard the old data and refetch, creating a seamless user experience. Keeping the UI in Sync: After implementing the "Save Preferences" feature, we noticed the recommendations weren't updating. The frontend had no way of knowing the data on the server had changed. The solution was to use React Query's queryClient to manually invalidateQueries, which told our app to discard the old data and refetch, creating a seamless user experience.
Accomplishments we're proud of
Full-Stack System Integration: We successfully built and integrated a complete system, connecting a React frontend, a Python backend, a Supabase database, and the Letta AI platform into a single, cohesive application. Full-Stack System Integration: We successfully built and integrated a complete system, connecting a React frontend, a Python backend, a Supabase database, and the Letta AI platform into a single, cohesive application. A Truly Personalized AI: We're proud of creating an AI system that goes beyond generic advice. By dynamically injecting user data into detailed prompts, we were able to generate recommendations that are genuinely tailored to an individual's life and financial habits. A Truly Personalized AI: We're proud of creating an AI system that goes beyond generic advice. By dynamically injecting user data into detailed prompts, we were able to generate recommendations that are genuinely tailored to an individual's life and financial habits. Solving Complex Bugs: We navigated several non-trivial challenges, from database corruption to subtle component library issues. Overcoming these hurdles taught us invaluable debugging skills and deepened our understanding of our tech stack. Solving Complex Bugs: We navigated several non-trivial challenges, from database corruption to subtle component library issues. Overcoming these hurdles taught us invaluable debugging skills and deepened our understanding of our tech stack.
What we learned
The Power of Prompt Engineering: By mastering prompt engineering, we were able to use Anthropic's Claude as an Agentic AI to create a specialized financial analyst. The Power of Prompt Engineering: By mastering prompt engineering, we were able to use Anthropic's Claude as an Agentic AI to create a specialized financial analyst. Advanced State Management: We learned that for complex applications, simple state management isn't enough. Using a dedicated library like React Query is essential for handling server state, caching, and ensuring the UI stays in sync with the database. Advanced State Management: We learned that for complex applications, simple state management isn't enough. Using a dedicated library like React Query is essential for handling server state, caching, and ensuring the UI stays in sync with the database. The Importance of Modularity: From the separate frontend and backend to the modular UI components, our architecture made it easier to develop, debug, and scale the application. The Importance of Modularity: From the separate frontend and backend to the modular UI components, our architecture made it easier to develop, debug, and scale the application.
What's next
Real-Time Push Notifications: Implement a system to send users critical alerts when a new global event directly impacts their personal profile. Real-Time Push Notifications: Implement a system to send users critical alerts when a new global event directly impacts their personal profile. Deeper Data Integration: Incorporate more data sources, such as social media sentiment analysis and shipping lane data, to provide even more accurate and timely recommendations. Deeper Data Integration: Incorporate more data sources, such as social media sentiment analysis and shipping lane data, to provide even more accurate and timely recommendations. Expanded Financial Products: Broaden our analysis to include recommendations for other asset classes, such as cryptocurrencies and commodities. Expanded Financial Products: Broaden our analysis to include recommendations for other asset classes, such as cryptocurrencies and commodities. Interactive Visualizations: Enhance the dashboard with more interactive charts and maps that allow users to explore the connections between global events and market performance on their own. Interactive Visualizations: Enhance the dashboard with more interactive charts and maps that allow users to explore the connections between global events and market performance on their own. Built With Languages: TypeScript, Python Frameworks: React, FastAPI, Vite Platforms & Cloud Services: Supabase (Database & Auth), Letta (AI Platform) Database: PostgreSQL (via Supabase) UI/UX: shadcn/ui, Radix UI, Tailwind CSS Frontend Libraries: React Query, React Router Backend Libraries: Pydantic, Uvicorn Version Control: Git & GitHub
Market Shield
A modern web application for market conflict detection and analysis, built with React frontend and FastAPI backend.
Tech Stack
Frontend
- Vite
- TypeScript
- React
- shadcn/ui
- Tailwind CSS
Backend
- FastAPI
- Python
Prerequisites
- Node.js & npm - Install with nvm
- Python 3.7+ - Download from python.org
Setup Instructions
1. Clone the Repository
git clone <repository-url>
cd market-shield
2. Backend Setup (Python/FastAPI)
Create Python Virtual Environment
python3 -m venv myenv
Activate the Virtual Environment
On macOS/Linux:
source myenv/bin/activate
On Windows:
myenv\Scripts\activate
Set Up Environment Variables
Copy the example environment file and add your API keys:
cp .env-example .env
Then edit the .env file and add your API keys:
CLAUDE_API=your_claude_api_key_here
GRONQ_API=your_groq_api_key_here
LETTA_API=your_letta_api_key_here
Install Python Dependencies
pip3 install -r requirements.txt
3. Frontend Setup (React/Vite)
Navigate to the frontend directory and install dependencies:
cd app/frontend
npm install
Running the Application
Start the Backend (FastAPI)
From the root directory, with your virtual environment activated:
fastapi dev app/backend/main.py
Alternatively, you can use uvicorn directly:
uvicorn app.backend.main:app --reload
The FastAPI backend will be available at:
- API:
http://localhost:8000 - API Documentation (Swagger UI):
http://localhost:8000/docs - Alternative API Documentation (ReDoc):
http://localhost:8000/redoc
Start the Frontend (React)
In a new terminal, navigate to the frontend directory and start the development server:
cd app/frontend
npm run dev
The React frontend will be available at http://localhost:5173 by default.
Development
Backend Development
Make sure to keep your virtual environment activated while developing:
source myenv/bin/activate # On macOS/Linux
# or
myenv\Scripts\activate # On Windows
To deactivate the virtual environment when you're done:
deactivate
Frontend Development
Available scripts in the frontend directory:
npm run dev- Start development servernpm run build- Build for productionnpm run build:dev- Build for developmentnpm run lint- Run ESLintnpm run preview- Preview production build
Project Structure
market-shield/
├── app/
│ ├── backend/ # FastAPI backend
│ │ └── main.py
│ ├── frontend/ # React frontend
│ │ ├── src/
│ │ ├── public/
│ │ └── package.json
│ ├── data/ # Data files
│ └── models/ # ML models
├── myenv/ # Python virtual environment
├── requirements.txt # Python dependencies
└── README.md
Analysis
View
Metric
- 35
- 24
- 23
- 13
Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.
Technology
- CSSIn code
- FastAPIIn code
- HTMLIn code
- JavaScriptIn code
- OpenAIIn code
- PythonIn code
- ReactIn code
- SupabaseIn code
- Tailwind CSSIn code
- TypeScriptIn code
- PostgreSQLClaimed
10 of 11 appear in the indexed code. 1 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.
AI coding agents
No AI coding agent signals were found in this repository.
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
556 KB
Source files
103
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
Miiu64/market-shield
129 files · 4.0 MB · @ 862fd94
Structure
Interface
111 files · 86%Screens, components and styles rendered to the user.
Data & schema
1 file · 1%Schema definitions, migrations and data access.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.
Languages
- TypeScript65%
- Python34%
- Markdown1%
- CSS1%
- HTML0%
- JavaScript0%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
app/frontend/package.json
npm · 72- @hookform/resolvers
- @nivo/bar
- @radix-ui/react-accordion
- @radix-ui/react-alert-dialog
- @radix-ui/react-aspect-ratio
- @radix-ui/react-avatar
- @radix-ui/react-checkbox
- @radix-ui/react-collapsible
- @radix-ui/react-context-menu
- @radix-ui/react-dialog
- @radix-ui/react-dropdown-menu
- @radix-ui/react-hover-card
- @radix-ui/react-label
- @radix-ui/react-menubar
- @radix-ui/react-navigation-menu
- @radix-ui/react-popover
- @radix-ui/react-progress
- @radix-ui/react-radio-group
- +54 more
requirements.txt
pypi · 12- fastapi
- letta-client
- numpy
- openai
- pandas
- pydantic
- python-dotenv
- requests
- uvicorn[standard]
- watchdog
- websockets
- yfinance
Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
This project’s features have not been analysed yet.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.