Initial Commit

.gitignore

@@ -26,7 +26,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env*.local
+.env.local
 
 # vercel
 .vercel

README.md

@@ -1,40 +1,68 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+<a name="readme-top"></a>
 
-## Getting Started
+<!-- PROJECT LOGO -->
+<!--suppress HtmlDeprecatedAttribute -->
+<div align="center">
+<img src="public/icon-192.png" alt="AI Problem Solver Logo">
+  <h1 align="center">AI Problem Solver</h1>
 
-First, run the development server:
+  <p align="center">
+    A search engine powered by AI that solves your problems
+    <br />
+    <br />
+    <a href="https://aiproblemsolver.vercel.app">View Website</a>
+  </p>
+</div>
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+<!-- Preview -->
+## 📸 Screenshot
+![img.png](img.png)
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+### 🚀 Try it now!
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+[AI Problem Solver](https://aiproblemsolver.vercel.app)
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+### 🛠️ Built With
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
+![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white)
+![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+<br />
 
-## Learn More
+<!-- Features -->
+## ✨ Features
 
-To learn more about Next.js, take a look at the following resources:
+- **AI-powered Search:** Utilize the power of AI to find solutions to your problems.
+- **Intuitive Design:** Simple and familiar design for an effortless user experience.
+- **Responsive:** Works on various devices to provide a consistent experience.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+<br />
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+<!-- Getting Started -->
+## 🚀 Getting Started
 
-## Deploy on Vercel
+1. Clone the repository
+   ```sh
+   git clone https://github.com/supernova3339/ai-problem-solver.git
+   ```
+2. Install dependencies
+   ```sh
+   cd ai-problem-solver
+   npm install
+   ```
+3. Start the development server
+   ```sh
+   npm run dev
+   ```
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+<br />
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+<!-- Usage -->
+## 🧑‍💻 Usage
+
+1. Visit [AI Problem Solver](https://aiproblemsolver.vercel.app/).
+2. Enter your problem in the search bar.
+3. Press Enter to get AI-generated solutions.
+
+<a href="#readme-top">Back to Top</a>

app/globals.css

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

components/Layout.tsx

@@ -0,0 +1,33 @@
+import {Component} from "react";
+import {ThemeProvider} from "next-themes";
+import { ModalProvider } from "@/components/providers/modal-provider";
+import {Metadata} from "next";
+
+export const metadata: Metadata = {
+    title: 'AI Problem Solver',
+    description: 'Solve simple problems with the help of AI',
+}
+
+class Layout extends Component<{
+    children: any
+}> {
+    render() {
+        let {children} = this.props;
+        return (
+            <div>
+                <ThemeProvider
+                    attribute="class"
+                    defaultTheme="system"
+                    enableSystem
+                    disableTransitionOnChange
+                >
+                    <nav />
+                    <ModalProvider />
+                    {children}
+                </ThemeProvider>
+            </div>
+        );
+    }
+}
+
+export default Layout;

components/Message.tsx

@@ -0,0 +1,23 @@
+import Markdown from 'react-markdown';
+import {Button} from "@/components/ui/button";
+import {Card, CardContent} from "@/components/ui/card";
+
+interface MessageProps {
+    response: string;
+    onClear: () => void;
+}
+
+const Message: React.FC<MessageProps> = ({response, onClear}) => {
+    return (
+        <div className="mt-4 text-gray-800 dark:text-white">
+            <Card className=" p-4 rounded-md my-4 flex items-center">
+                <CardContent>
+                    <Markdown>{response}</Markdown>
+                </CardContent>
+            </Card>
+            <Button className="flex content-center" onClick={onClear}>Clear Search</Button>
+        </div>
+    );
+};
+
+export default Message;

components/SearchBar.tsx

@@ -0,0 +1,83 @@
+// components/SearchBar.tsx
+import { useState } from 'react';
+import Message from './Message';
+
+const SearchBar: React.FC = () => {
+    const [searchQuery, setSearchQuery] = useState<string>('');
+    const [, setIsLoading] = useState<boolean>(false);
+    const [response, setResponse] = useState<string | null>(null);
+
+    const handleSearch = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        setIsLoading(true);
+
+        try {
+            const res = await fetch('/api/search', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ searchQuery }),
+            });
+
+            if (res.ok) {
+                const data = await res.json();
+                setResponse(data.answer);
+            } else {
+                console.error('Error calling API:', res.status, res.statusText);
+                setResponse('Error processing your request');
+            }
+        } catch (error) {
+            console.error('Error calling API:', error);
+            setResponse('Error processing your request');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleClear = () => {
+        setSearchQuery('');
+        setResponse(null);
+    };
+
+    return (
+        <div className="flex min-h-screen items-center justify-center bg-gray-200 dark:bg-gray-950">
+            <div className="w-full max-w-md">
+                <div className="flex flex-1 flex-col items-center justify-center px-2 lg:ml-6 lg:justify-end">
+                    <h1 className="mb-4 text-3xl font-bold text-gray-800 dark:text-white">
+                        AI <span className="bg-gradient-to-r from-green-400 via-blue-500 to-purple-500 bg-clip-text text-transparent">Problem Solver</span>
+                    </h1>
+                    {response ? (
+                        <Message response={response} onClear={handleClear} />
+                    ) : (
+                        <div className="w-full max-w-lg lg:max-w-xs">
+                            <form onSubmit={handleSearch}>
+                                <label htmlFor="search" className="sr-only">
+                                    Search for your problem
+                                </label>
+                                <div className="relative">
+                                    <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                                        <svg className="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                            <path fillRule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clipRule="evenodd" />
+                                        </svg>
+                                    </div>
+                                    <input
+                                        id="search"
+                                        name="q"
+                                        value={searchQuery}
+                                        onChange={(e) => setSearchQuery(e.target.value)}
+                                        className="dark:placeholder-text-gray-200 block w-full rounded-md border-0 bg-white py-1.5 pl-10 pr-3 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-200 dark:bg-gray-800 dark:text-gray-100 dark:ring-gray-900 dark:focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                                        placeholder="Search for your problem"
+                                        type="search"
+                                    />
+                                </div>
+                            </form>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SearchBar;

components/ThemeProvider.tsx

@@ -0,0 +1,9 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { type ThemeProviderProps } from "next-themes/dist/types"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+    return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

components/github-star.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import * as React from "react"
+import { Star } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import Link from "next/link";
+
+export function GithubStar() {
+
+    return (
+        <Link href="https://github.com/supernova3339/aiproblemsolver">
+            <Button  variant="outline" size="icon">
+                <Star className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all" />
+                <span className="sr-only">Star on GitHub</span>
+            </Button>
+        </Link>
+    )
+}