SplitFlow

Project Name: Splitflow Tagline: Your AI-powered crypto portfolio builder

🌐 Overview Splitflow is a full-stack decentralized web application designed to help users build intelligent, risk-aware crypto portfolios using AI and real-time token data. It simplifies the crypto investing process by letting users input their budget and risk preference, then automatically allocating funds across tokens using OpenAI’s recommendation engine. It also integrates wallet connection and 1inch API for real trading functionality.

🧠 How It Works – Step-by-Step Flow: Landing Page:

Displays the app name (“Splitflow”), a short description, and two main CTAs: Explore Tokens and Portfolio Builder.

It has a clean, modern UI with a beige-to-gradient background and animated purple buttons.

Built using Next.js and Tailwind CSS for fast performance and responsive design.

Wallet Connection:

Users connect their MetaMask wallet using window.ethereum API.

Once connected, the wallet address is stored in localStorage for session persistence.

Wallet connection is required before using any portfolio features or initiating swaps.

Token Data Fetching (Explore Tokens):

The /api/tokens.ts endpoint securely fetches a real-time token list from the 1inch API.

It uses a backend route to avoid exposing the API key (process.env.ONE_INCH_API_KEY).

This data includes token symbols, names, addresses, and decimals used for swaps.

Portfolio Builder:

Users input:

💰 Budget

⚖️ Risk Preference (Low, Medium, High)

This data is sent to OpenAI’s GPT model through a prompt designed to simulate a financial advisor.

GPT returns a breakdown of how much (percentage) to allocate into each token.

Price Calculation:

Using CoinGecko API, token prices are fetched to convert percentage-based allocations into actual token amounts.

These are displayed as a final split table to the user with proper token logos and USD values.

Invest / Swap (Coming Up):

The plan is to integrate the 1inch Swap API to let users directly invest in the AI-suggested portfolio.

Once user confirms, the app will generate swap transactions for each token based on the split.

⚙️ Tech Stack Layer Technology Purpose Frontend Next.js, React Routing, UI Rendering Tailwind CSS Styling, Layout, Animations Backend API Next.js API Routes Secure API handling (1inch, CoinGecko) AI Engine OpenAI (GPT-4-turbo) Portfolio splitting logic Blockchain MetaMask, Ethers.js (optional) Wallet connection Data Sources CoinGecko API Token prices 1inch API (Swap & Tokens) Token list and future trading

✅ Key Features ✨ AI-driven asset allocation based on your risk level

📊 Live token data via 1inch and CoinGecko

🔐 Secure wallet connection using MetaMask

📁 Modular architecture for adding swap logic and history tracking

🎨 Modern UI/UX with responsive layout and dark-futuristic aesthetics

🛠️ How It’s Made Splitflow was built using a modern full-stack web development approach, combining AI, real-time DeFi data, and wallet-based interactions.

At its core, it’s a Next.js app powered by React for dynamic rendering and Tailwind CSS for a sleek, futuristic UI. The landing page, portfolio builder, and token explorer are all client-facing components built using React hooks and Tailwind’s utility-first styling. The wallet connection is handled using the window.ethereum API from MetaMask, and once connected, the wallet address is stored locally for use across pages.

To ensure scalability and security, the app uses Next.js API routes to act as middleware between the frontend and third-party APIs. For example:

/api/tokens.ts securely fetches the latest token list from the 1inch API (protected using an API key stored in environment variables).

/api/balance.ts and /api/portfolio.ts also use server-side routes to fetch prices from CoinGecko, perform calculations, and interact with OpenAI.

The AI allocation feature is powered by the OpenAI GPT-4 Turbo model, which receives structured prompts based on user input (budget + risk level) and returns a suggested token allocation. This allocation is parsed and displayed visually.

A particularly hacky (but elegant) part of the build was getting OpenAI to output predictable, JSON-friendly results that could be parsed directly and mapped to token data. We designed the prompt to ask for a list of token symbols with percentages summing to 100, and added guardrails to handle undefined or extra tokens.

Another clever integration was handling symbol mismatches between OpenAI’s response and CoinGecko/1inch tokens by normalizing symbols, filtering invalid entries, and calculating precise amounts based on real-time prices.

We also planned for token swaps using the 1inch Swap API, and the groundwork is laid with address mappings and quote generation ready for integration.