Cardify is a modern, responsive web app built with Next.js and React that helps users discover and compare credit cards using AI. Users can filter cards by bank, type, features, and more, and get personalized recommendations powered by Gemini AI.
- AI-Powered Search: Ask questions in natural language and get the best-matching credit cards, with support for multiple recommendations.
- Advanced Filtering: Sidebar filter for banks, card types, fees, salary, features, and categories.
- Responsive Design: Works beautifully on desktop and mobile, with a collapsible sidebar and hamburger menu.
- Credit Card Comparison: Select cards and compare them using AI.
- Light/Dark Mode: Seamless theme switching.
- Modern UI: Built with Tailwind CSS and React Icons.
- Node.js (v18+ recommended)
- npm, yarn, pnpm, or bun
-
Clone the repository:
git clone https://github.com/your-username/cardify.git cd cardify -
Install dependencies:
npm install # or yarn install # or pnpm install # or bun install
-
Set up environment variables:
- Copy
.env.local.exampleto.env.localand add your Gemini API key:GEMINI_API_KEY=your_gemini_api_key_here
- Copy
-
Run the development server:
npm run dev # or yarn dev # or pnpm dev # or bun dev
-
Open http://localhost:3000 in your browser.
app/– Main Next.js app directorycomponents/Landing/– UI components for the landing page (Header, HeroSection, SidebarFilter, CreditCardList, etc.)Data/– Credit card dataapi/gemini/– API route for AI-powered card recommendations(pages)/Landing/– Main landing page logic
public/– Static assets
- Uses Google Gemini API for natural language credit card recommendations and comparison.
- Returns multiple cards if the AI finds several matches.
MIT
Leave a ⭐ if you like this project!