├── src
    ├── index.css
    ├── App.js
    ├── setupTests.js
    ├── App.test.js
    ├── reportWebVitals.js
    ├── index.js
    ├── components
    │   ├── Header.js
    │   ├── GeneratedCode.js
    │   ├── Navbar.js
    │   ├── IdeaForm.js
    │   ├── Features.js
    │   ├── apis
    │   │   └── geminiAPI.js
    │   └── Footer.js
    ├── App.css
    ├── IdeaInput.js
    └── logo.svg
├── public
    ├── Gemini.png
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── robots.txt
    ├── GeminiCoder.png
    ├── google-gemini-icon.jpg
    ├── manifest.json
    └── index.html
├── postcss.config.js
├── tailwind.config.js
├── .gitignore
├── package.json
└── README.md


/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/public/Gemini.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekramasif/GeminiCoder/HEAD/public/Gemini.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekramasif/GeminiCoder/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekramasif/GeminiCoder/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekramasif/GeminiCoder/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/GeminiCoder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekramasif/GeminiCoder/HEAD/public/GeminiCoder.png


--------------------------------------------------------------------------------
/public/google-gemini-icon.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekramasif/GeminiCoder/HEAD/public/google-gemini-icon.jpg


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     plugins: {
3 |       tailwindcss: {},
4 |       autoprefixer: {},
5 |     },
6 |   }
7 |   


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: [
 3 |     "./src/**/*.{js,jsx,ts,tsx}",
 4 |   ],
 5 |   theme: {
 6 |     extend: {},
 7 |   },
 8 |   plugins: [],
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './index.css';
 3 | import IdeaInput from './IdeaInput';
 4 | 
 5 | function App() {
 6 |   return (
 7 |     <div className="App">
 8 |       <IdeaInput />
 9 |     </div>
10 |   );
11 | }
12 | 
13 | export default App;
14 | 


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | .env
21 | 
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | 
 7 | const root = ReactDOM.createRoot(document.getElementById('root'));
 8 | root.render(
 9 |   <React.StrictMode>
10 |     <App />
11 |   </React.StrictMode>
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/Header.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Header = () => {
 4 |   return (
 5 |     <div>
 6 |       <h2 className="text-4xl font-bold text-center bg-gradient-to-r from-gray-900 to-gray-700 text-transparent bg-clip-text">
 7 |         Turn your <span className="text-blue-600">idea</span> into an{" "}
 8 |         <span className="text-blue-600">app</span>
 9 |       </h2>
10 |       <p className="mt-4 text-center text-transparent bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-clip-text max-w-xl mx-auto">
11 |         Describe your app idea in detail and let AI help you bring it to life.
12 |       </p>
13 |     </div>
14 |   );
15 | };
16 | 
17 | export default Header;


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/GeneratedCode.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const GeneratedCode = ({ htmlContent }) => {
 4 |   return (
 5 |     <div className="mt-10">
 6 |       <h3 className="text-xl font-semibold text-center mb-4 text-gray-800">
 7 |         Generated HTML Code
 8 |       </h3>
 9 |       <div className="relative rounded-xl overflow-hidden border border-gray-200 bg-gray-50">
10 |         <div className="absolute top-0 left-0 right-0 h-10 bg-gray-100 border-b border-gray-200 flex items-center px-4">
11 |           <div className="flex space-x-2">
12 |             <div className="w-3 h-3 rounded-full bg-red-400"></div>
13 |             <div className="w-3 h-3 rounded-full bg-yellow-400"></div>
14 |             <div className="w-3 h-3 rounded-full bg-green-400"></div>
15 |           </div>
16 |         </div>
17 |         <pre className="overflow-auto p-4 pt-12 text-sm">
18 |           <code
19 |             className="language-html"
20 |             dangerouslySetInnerHTML={{ __html: htmlContent }}
21 |           />
22 |         </pre>
23 |       </div>
24 |     </div>
25 |   );
26 | };
27 | 
28 | export default GeneratedCode;


--------------------------------------------------------------------------------
/src/components/Navbar.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { FaGithub } from "react-icons/fa";
 3 | 
 4 | const Navbar = () => {
 5 |   return (
 6 |     <nav className="bg-white/80 backdrop-blur-sm fixed w-full top-0 z-50 border-b border-gray-100">
 7 |       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 8 |         <div className="flex justify-between items-center h-16">
 9 |           <div className="flex items-center">
10 |             <img
11 |               src="/GeminiCoder.png"
12 |               alt="GeminiCoder Logo"
13 |               className="h-8 w-auto sm:h-10 md:h-12 object-contain mix-blend-multiply"
14 |             />
15 |           </div>
16 |           <div className="flex items-center">
17 |             <a
18 |               href="https://github.com/ekramasif/GeminiCoder"
19 |               target="_blank"
20 |               rel="noopener noreferrer"
21 |               className="text-gray-500 hover:text-gray-700 transition-colors p-2 rounded-full hover:bg-gray-100"
22 |             >
23 |               <FaGithub className="w-5 h-5" />
24 |             </a>
25 |           </div>
26 |         </div>
27 |       </div>
28 |     </nav>
29 |   );
30 | };
31 | 
32 | export default Navbar;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gemini-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@codesandbox/sandpack-react": "^2.19.9",
 7 |     "@codesandbox/sandpack-themes": "^2.0.21",
 8 |     "@fortawesome/free-solid-svg-icons": "^6.6.0",
 9 |     "@fortawesome/react-fontawesome": "^0.2.2",
10 |     "@google/generative-ai": "^0.21.0",
11 |     "@monaco-editor/react": "^4.6.0",
12 |     "@testing-library/jest-dom": "^5.17.0",
13 |     "@testing-library/react": "^13.4.0",
14 |     "@testing-library/user-event": "^13.5.0",
15 |     "dompurify": "^3.1.7",
16 |     "highlight.js": "^11.10.0",
17 |     "lucide-react": "^0.455.0",
18 |     "marked": "^14.1.4",
19 |     "react": "^18.3.1",
20 |     "react-copy-to-clipboard": "^5.1.0",
21 |     "react-dom": "^18.3.1",
22 |     "react-frame-component": "^5.2.7",
23 |     "react-icons": "^5.3.0",
24 |     "react-markdown": "^9.0.1",
25 |     "react-scripts": "5.0.1",
26 |     "web-vitals": "^2.1.4"
27 |   },
28 |   "scripts": {
29 |     "start": "react-scripts start",
30 |     "build": "react-scripts build",
31 |     "test": "react-scripts test",
32 |     "eject": "react-scripts eject"
33 |   },
34 |   "eslintConfig": {
35 |     "extends": [
36 |       "react-app",
37 |       "react-app/jest"
38 |     ]
39 |   },
40 |   "browserslist": {
41 |     "production": [
42 |       ">0.2%",
43 |       "not dead",
44 |       "not op_mini all"
45 |     ],
46 |     "development": [
47 |       "last 1 chrome version",
48 |       "last 1 firefox version",
49 |       "last 1 safari version"
50 |     ]
51 |   },
52 |   "devDependencies": {
53 |     "autoprefixer": "^10.4.20",
54 |     "postcss": "^8.4.47",
55 |     "tailwindcss": "^3.4.14"
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/components/IdeaForm.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { FaSpinner } from "react-icons/fa";
 3 | 
 4 | const IdeaForm = ({ idea, setIdea, handleSubmit, loading, error }) => {
 5 |   return (
 6 |     <div className="mt-8">
 7 |       <textarea
 8 |         className={`w-full p-4 bg-white/50 backdrop-blur-sm border rounded-xl text-gray-700 shadow-sm 
 9 |         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all
10 |         ${error ? "border-red-300" : "border-gray-200"}`}
11 |         placeholder="Describe the app you want to build..."
12 |         value={idea}
13 |         onChange={(e) => setIdea(e.target.value)}
14 |         rows="3"
15 |         disabled={loading}
16 |       />
17 |       <div className="flex justify-between text-gray-500 text-sm mt-2 px-1">
18 |         <span>Minimum 15 words</span>
19 |         <span>{idea.trim().split(/\s+/).length} words</span>
20 |       </div>
21 |       {error && (
22 |         <div className="mt-2 text-red-500 text-sm bg-red-50 p-2 rounded-lg">
23 |           {error}
24 |         </div>
25 |       )}
26 |       <div className="mt-6 flex justify-center">
27 |         <button
28 |           onClick={handleSubmit}
29 |           disabled={loading}
30 |           className="px-8 py-3 text-white bg-gradient-to-r from-blue-600 to-indigo-600 
31 |           rounded-xl font-medium flex items-center space-x-2 hover:shadow-lg 
32 |           transition-all duration-300 disabled:opacity-70"
33 |         >
34 |           <span>{loading ? "Generating..." : "Generate App"}</span>
35 |           {loading && <FaSpinner className="animate-spin ml-2" />}
36 |         </button>
37 |       </div>
38 |     </div>
39 |   );
40 | };
41 | 
42 | export default IdeaForm;


--------------------------------------------------------------------------------
/src/components/Features.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 3 | import { faCheckCircle, faRobot, faHandPointer, faLightbulb } from '@fortawesome/free-solid-svg-icons';
 4 | 
 5 | const featuresData = [
 6 |   {
 7 |     title: "Free",
 8 |     description: "This service is free to start.",
 9 |     icon: faCheckCircle,
10 |   },
11 |   {
12 |     title: "AI",
13 |     description: "This service uses Gemini's API.",
14 |     icon: faRobot,
15 |   },
16 |   {
17 |     title: "Simple",
18 |     description: "Just press one button.",
19 |     icon: faHandPointer,
20 |   },
21 |   {
22 |     title: "Ideas",
23 |     description: "The title and details of the app is output.",
24 |     icon: faLightbulb,
25 |   },
26 | ];
27 | 
28 | const Features = () => {
29 |   return (
30 |     <section className="py-12 px-4">
31 |       <div className="max-w-7xl mx-auto text-center">
32 |         <h2 className="text-3xl font-bold mb-6">Features</h2>
33 |         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
34 |           {featuresData.map((feature, index) => (
35 |             <div key={index} className="p-6 bg-gray-300 rounded-lg shadow-lg transition-transform transform hover:scale-105 neumorphic">
36 |               <div className="flex items-center mb-4">
37 |                 <FontAwesomeIcon icon={feature.icon} className="text-blue-600 w-8 h-8 mr-2" />
38 |                 <h3 className="text-xl font-semibold">{feature.title}</h3>
39 |               </div>
40 |               <p className="text-gray-700">{feature.description}</p>
41 |             </div>
42 |           ))}
43 |         </div>
44 |       </div>
45 |     </section>
46 |   );
47 | };
48 | 
49 | export default Features;


--------------------------------------------------------------------------------
/src/components/apis/geminiAPI.js:
--------------------------------------------------------------------------------
 1 | import { GoogleGenerativeAI } from "@google/generative-ai";
 2 | 
 3 | const genAI = new GoogleGenerativeAI(process.env.REACT_APP_GEMINI_API_KEY);
 4 | 
 5 | export const generateIdeaContent = async (idea) => {
 6 |   // Define the model outside the try block for broader scope
 7 |   let model;
 8 | 
 9 |   try {
10 |     // Initialize the model
11 |     model = await genAI.getGenerativeModel({ model: "gemini-2.0-flash" });
12 | 
13 |     // Enhanced prompt to act as a software engineer
14 |     const prompt = `You are a seasoned software engineer. Please provide the only HTML and Tailwind CSS code for the following idea: ${idea}. 
15 | 
16 |     **Important Notes:**
17 |     * Code will be formatted in like prettier
18 |     * If the question is irrelevant or does not pertain to the provided idea, respond with: "I cannot answer that."
19 |     * No explanation will be needed, just code.`;
20 |     
21 |     const result = await model.generateContent(prompt);
22 |     return result.response.text();
23 |   } catch (error) {
24 |     console.error("Error generating content:", error);
25 | 
26 |     // If RECITATION error occurs, retry with a slightly modified prompt
27 |     if (error.message.includes("RECITATION")) {
28 |       console.warn("Retrying with slight prompt variation...");
29 |       try {
30 |         const result = await model.generateContent(
31 |           `${idea} (Describe its unique features)`
32 |         );
33 |         return result.response.text();
34 |       } catch (retryError) {
35 |         throw new Error(
36 |           "The generated content was flagged. Please try rephrasing your idea or adding more details."
37 |         );
38 |       }
39 |     } else {
40 |       throw new Error(
41 |         "An error occurred while generating content. Please try again."
42 |       );
43 |     }
44 |   }
45 | };
46 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/google-gemini-icon.jpg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Describe your app idea in detail and let AI help you bring it to life."
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/google-gemini-icon.jpg" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>Gemini Coder</title>
28 |   </head>
29 |   <body>
30 |     <noscript>Turn your idea into an app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/IdeaInput.js:
--------------------------------------------------------------------------------
 1 | // src/IdeaInput.js
 2 | import React, { useState } from "react";
 3 | import { generateIdeaContent } from "./components/apis/geminiAPI";
 4 | import DOMPurify from "dompurify";
 5 | import { marked } from "marked";
 6 | import Navbar from "./components/Navbar";
 7 | import Footer from "./components/Footer";
 8 | import Header from "./components/Header";
 9 | import IdeaForm from "./components/IdeaForm";
10 | import GeneratedCode from "./components/GeneratedCode";
11 | import Features from "./components/Features";
12 | 
13 | const IdeaInput = () => {
14 |   const [idea, setIdea] = useState("");
15 |   const [loading, setLoading] = useState(false);
16 |   const [error, setError] = useState(null);
17 |   const [htmlContent, setHtmlContent] = useState("");
18 | 
19 |   const handleSubmit = async () => {
20 |     const wordCount = idea.trim().split(/\s+/).length;
21 |     if (wordCount < 15) {
22 |       setError(
23 |         "Please provide a more detailed description of your idea (at least 15 words)."
24 |       );
25 |       return;
26 |     }
27 | 
28 |     setLoading(true);
29 |     setError(null);
30 |     setHtmlContent("");
31 | 
32 |     try {
33 |       const markdownCode = await generateIdeaContent(idea);
34 |       console.log("markdownCode:::::::::::::", markdownCode);
35 |       const html = marked(markdownCode);
36 |       const cleanHtml = DOMPurify.sanitize(html);
37 |       setHtmlContent(cleanHtml);
38 |     } catch (err) {
39 |       console.error(err);
40 |       setError("Failed to generate content. Please try again.");
41 |     } finally {
42 |       setLoading(false);
43 |     }
44 |   };
45 | 
46 |   return (
47 |     <div className="flex flex-col min-h-screen">
48 |       <Navbar />
49 |       <main className="min-h-screen bg-gradient-to-b from-gray-50 to-white pt-24 pb-12 px-4">
50 |         <div className="max-w-3xl mx-auto">
51 |           <div className="bg-white/70 backdrop-blur-sm border border-gray-100 p-8 rounded-2xl shadow-xl">
52 |             <Header />
53 |             <IdeaForm 
54 |               idea={idea} 
55 |               setIdea={setIdea} 
56 |               handleSubmit={handleSubmit} 
57 |               loading={loading} 
58 |               error={error} 
59 |             />
60 |             {htmlContent && <GeneratedCode htmlContent={htmlContent} />}
61 |           </div>
62 |         </div>
63 |       </main>
64 |       <Features />
65 |       <Footer />
66 |     </div>
67 |   );
68 | };
69 | 
70 | export default IdeaInput;


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # GeminiCoder - App Idea Generator
 2 | 
 3 | GeminiCoder is a web application that helps users transform their app ideas into reality by generating HTML and Tailwind CSS code using AI. The application leverages the Google Generative AI model to provide detailed technical specifications based on user input.
 4 | 
 5 | ## Features
 6 | 
 7 | - **AI-Powered Code Generation**: Generate HTML and Tailwind CSS code based on your app idea.
 8 | 
 9 | ## Getting Started
10 | 
11 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
12 | 
13 | ### Prerequisites
14 | 
15 | - Node.js (version 14 or higher)
16 | - npm (Node Package Manager)
17 | 
18 | ### Installation
19 | 
20 | 1. Clone the repository:
21 | 
22 |    ```bash
23 |    git clone https://github.com/ekramasif/GeminiCoder.git
24 |    cd GeminiCoder
25 |    ```
26 | 
27 | 2. Install the dependencies:
28 | 
29 |    ```bash
30 |    npm install
31 |    ```
32 | 
33 | 3. Set up your environment variables. Create a `.env` file in the root directory and add your Google Generative AI API key:
34 | 
35 |    ```plaintext
36 |    REACT_APP_GEMINI_API_KEY=your_api_key_here
37 |    ```
38 | 
39 | ### Obtaining Your Google Generative AI API Key
40 | 
41 | To use the Google Generative AI model, you need to obtain an API key. Follow these steps:
42 | 
43 | 1. **Create a Google Cloud Project**:
44 |    - Go to the [ai.google.dev](https://ai.google.dev/gemini-api/docs/api-key).
45 |    - Click on the project drop-down and select or create a new project.
46 | 
47 | 2. **Enable the Google Generative AI API**:
48 |    - In the Google Cloud Console, navigate to the **API & Services** dashboard.
49 |    - Click on **Enable APIs and Services**.
50 |    - Search for "Google Generative AI" and enable it for your project.
51 | 
52 | 3. **Create Credentials**:
53 |    - In the API & Services dashboard, click on **Credentials** in the left sidebar.
54 |    - Click on **Create Credentials** and select **API Key**.
55 |    - Your new API key will be generated. Copy this key.
56 | 
57 | 4. **Add the API Key to Your `.env` File**:
58 |    - Open the `.env` file you created in the root directory of your project.
59 |    - Replace `your_api_key_here` with the API key you copied.
60 | 
61 | ### Running the Application
62 | 
63 | In the project directory, you can run:
64 | 
65 | #### `npm start`
66 | 
67 | Runs the app in development mode.\
68 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
69 | 
70 | The page will reload when you make changes.\
71 | You may also see any lint errors in the console.
72 | 
73 | 
74 | ## Acknowledgments
75 | 
76 | - [Google Generative AI](https://cloud.google.com/generative-ai) for providing the AI model.
77 | - [Tailwind CSS](https://tailwindcss.com/) for the utility-first CSS framework.
78 | - [React](https://reactjs.org/) for the JavaScript library for building user interfaces.
79 | 


--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
 1 | // src/Footer.js
 2 | import React from "react";
 3 | import { FaGithub } from "react-icons/fa";
 4 | 
 5 | const Footer = () => {
 6 |   return (
 7 |     <footer className="bg-white/80 backdrop-blur-sm border-t border-gray-100">
 8 |       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 9 |         <div className="py-8">
10 |           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
11 |             {/* Logo and About Section */}
12 |             <div>
13 |               <div className="flex items-center">
14 |                 <img 
15 |                   src="/GeminiCoder.png" 
16 |                   alt="GeminiCoder Logo" 
17 |                   className="h-8 w-auto object-contain"
18 |                 />
19 |               </div>
20 |               <p className="mt-4 text-gray-600 text-sm">
21 |                 Transform your ideas into reality with GeminiCoder. 
22 |                 Get detailed technical specifications powered by AI.
23 |               </p>
24 |             </div>
25 | 
26 |             {/* Quick Links */}
27 |             <div>
28 |               <h3 className="text-lg font-semibold text-gray-900">Resources</h3>
29 |               <ul className="mt-4 space-y-2">
30 |                 <li>
31 |                   <a href="https://github.com/ekramasif/GeminiCoder/blob/main/README.md" className="text-gray-600 hover:text-blue-600 text-sm transition-colors">
32 |                     Documentation
33 |                   </a>
34 |                 </li>
35 |                 <li>
36 |                   <a href="https://aistudio.google.com/app/apikey" className="text-gray-600 hover:text-blue-600 text-sm transition-colors">
37 |                     API Reference
38 |                   </a>
39 |                 </li>
40 |               </ul>
41 |             </div>
42 | 
43 |             {/* Connect Section */}
44 |             <div>
45 |               <h3 className="text-lg font-semibold text-gray-900">Connect</h3>
46 |               <ul className="mt-4 space-y-2">
47 |                 <li>
48 |                   <a 
49 |                     href="https://github.com/ekramasif/GeminiCoder" 
50 |                     target="_blank" 
51 |                     rel="noopener noreferrer"
52 |                     className="text-gray-600 hover:text-blue-600 text-sm transition-colors flex items-center gap-2"
53 |                   >
54 |                     <FaGithub className="w-4 h-4" />
55 |                     GitHub Repository
56 |                   </a>
57 |                 </li>
58 |               </ul>
59 |             </div>
60 |           </div>
61 | 
62 |           {/* Copyright */}
63 |           <div className="mt-8 pt-8 border-t border-gray-100">
64 |             <p className="text-center text-gray-500 text-sm">
65 |               © {new Date().getFullYear()} 
66 |               <a 
67 |                 href="https://www.linkedin.com/in/ekram-asif/" 
68 |                 target="_blank" 
69 |                 rel="noopener noreferrer" 
70 |                 className="text-blue-600 hover:underline"
71 |               >
72 |                 Ekram Asif
73 |               </a>. All rights reserved.
74 |             </p>
75 |           </div>
76 |         </div>
77 |       </div>
78 |     </footer>
79 |   );
80 | };
81 | 
82 | export default Footer;


--------------------------------------------------------------------------------