Firebase Ignition 🔥

Firebase Ignition is an intelligent framework that uses the Google Gemini API to generate complete Firebase backend and React frontend code from simple, plain-English descriptions. It's designed to dramatically accelerate web application development by automating the setup of CRUD APIs and corresponding UI components.

Features

• AI-Powered Code Generation: Leverages the Gemini API to understand your requirements and generate boilerplate code.
• Full Stack Solution: Creates both a Firebase Functions backend (Node.js/Express) and a React frontend (TypeScript/Tailwind CSS).
• CRUD Operations: Automatically generates API endpoints and UI components for Create, Read, Update, and Delete operations.
• Modern Tech Stack: Uses modern, popular, and scalable technologies.
• Interactive UI: A clean, intuitive interface for describing your app and viewing the generated code with syntax highlighting and a file tree navigator.

How to Use

1. Get a Gemini API Key: You need a Google Gemini API key to use this tool. You can obtain one from Google AI Studio.
2. Enter Your API Key: When you first open the application, you will be prompted to enter your API key. This is stored locally in your browser's local storage for convenience.
3. Describe Your Application: In the input form, describe the application you want to build. Be specific about the data models and their properties. For example, "A simple todo app with tasks that have a title and a completed status."
4. Ignite Code: Click the "Ignite Code" button and wait for the AI to generate your files.
5. Review and Download: The generated files will be displayed in an IDE-like view. You can navigate the file tree, view the code, copy it to your clipboard, or download individual files.

Post-Generation Setup

After generating your code, you need to connect the frontend to the backend.

1. Deploy Firebase Functions:

   • Navigate to the generated functions directory in your terminal.
   • Run npm install to install the dependencies.
   • Run the deploy.sh script or use the Firebase CLI directly: firebase deploy --only functions.
   • After a successful deployment, the Firebase CLI will output a Function URL. Copy this URL.

2. Configure the React Frontend:

   • In your React application's root directory, create a new file named .env.local.
   • Add the following line to this file, replacing the placeholder with the Function URL you copied in the previous step:

   REACT_APP_API_BASE_URL="https://us-central1-your-project-id.cloudfunctions.net/api"
   

3. Run the Frontend:

   • Navigate to the root directory of your generated React app.
   • Run npm install to install dependencies.
   • Run npm start to launch the application. Your frontend should now be able to communicate with your Firebase backend!

Technology Stack

• AI: Google Gemini API (gemini-2.5-flash)
• Frontend: React, TypeScript, Tailwind CSS
• Backend: Firebase Functions, Node.js, Express.js
• Database: Google Firestore

Built With

• html
• typescript