A modern search interface built with React that combines traditional search functionality with AI-powered responses. Features a beautiful dark/light theme, animated transitions, and search history management.
- π Dual-mode search (traditional and AI-powered)
- π¨ Dark/Light theme with smooth transitions
- β¨ Animated UI elements using Framer Motion
- π Search history management with localStorage
- π€ AI-powered responses using Google's Gemini API
- π± Fully responsive design
- π― Performance optimized with React.memo and useCallback
- React
- Tailwind CSS
- Framer Motion
- Google Generative AI (Gemini)
- Lucide React Icons
- Clone the repository:
git clone https://github.com/yourusername/parasearch.git
cd parasearch
- Install dependencies:
npm install
- Create a
.env
file in the project root and add your Gemini API key:
VITE_GOOGLE_API_KEY=your_api_key_here
- Start the development server:
npm run dev
src/
βββ components/
β βββ SearchBar.jsx # Search input with AI toggle
β βββ SearchHistory.jsx # Recent searches display
β βββ SearchResults.jsx # Search results display
β βββ ThemeToggle.jsx # Theme switcher
βββ App.jsx # Main application component
βββ index.js # Application entry point
The application expects a backend API endpoint at http://127.0.0.1:5000/api/search
that accepts GET requests with a query parameter q
. The expected response format is:
{
"items": [
{
"title": "Result Title",
"link": "https://example.com",
"snippet": "Result description..."
}
]
}
The application uses Google's Gemini API for AI-powered responses. Make sure to:
- Set up a Gemini API key
- Add the key to your environment variables
- Handle rate limiting and error cases
The application uses Tailwind CSS with a custom color scheme:
- Dark theme: Rich purple backgrounds (#1a0033, #2a0052)
- Light theme: Clean grays with purple accents
- Gradient text effects for headings
- Smooth transitions between themes
This project is licensed under the MIT License - see the LICENSE file for details