Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .env
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
# Gemini API Key - Make sure this is a valid API key
NEXT_PUBLIC_GEMINI_API_KEY=AIzaSyDMEpCxDBk7kVv2-WAiRCGNaJYV9BNbHbg
NEXT_PUBLIC_GEMINI_API_KEY=
213 changes: 213 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
# 🌐 PromptCraft

PromptCraft is an AI-powered web application that generates and optimizes prompts for various AI platforms, enhancing user interaction with AI tools by providing tailored and effective prompts through an intuitive user interface.

[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white)](https://tailwindcss.com)
[![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org)
[![@google/generative-ai](https://img.shields.io/badge/Google_AI-4285F4?style=for-the-badge&logo=google&logoColor=white)](https://ai.google.dev)
[![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=react&logoColor=black)](https://react.dev)
[![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=next.js&logoColor=white)](https://nextjs.org)
[![License: MIT](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)](https://opensource.org/licenses/MIT)

## πŸ“– Table of Contents

- [🎯 About](#-about)
- [✨ Features](#-features)
- [πŸ› οΈ Tech Stack](#️-tech-stack)
- [πŸ“‹ Prerequisites](#-prerequisites)
- [βš™οΈ Installation](#️-installation)
- [πŸ” Environment Variables](#-environment-variables)
- [πŸš€ Usage](#-usage)
- [πŸ“ Project Structure](#-project-structure)
- [🀝 Contributing](#-contributing)
- [πŸ“„ License](#-license)

---

## 🎯 About

Crafting effective prompts for AI platforms like ChatGPT, Midjourney, or GitHub Copilot can be a significant challenge. Users often struggle to articulate their needs precisely, leading to generic or suboptimal AI responses that require extensive trial and error. This friction hinders productivity and limits the true potential of AI tools, making it difficult for both novices and experienced users to achieve desired outcomes efficiently.

PromptCraft addresses this by providing a dedicated web application designed to streamline prompt generation and optimization. Leveraging the Google Gemini API, it offers an intuitive user interface where users can specify their goals, select target AI platforms, and receive tailored, effective prompts. With features like prompt history and optimization, PromptCraft empowers users to interact with AI tools more effectively, saving time and improving the quality of AI-generated content.

---

## ✨ Features

- πŸ€– **AI-Powered Prompt Generation** β€” Dynamically creates and refines prompts leveraging the Google Gemini API for various AI platforms.
- 🎨 **Dark Mode Toggle** β€” Provides a comfortable viewing experience with a user-selectable dark mode interface.
- 🎨 **Dynamic UI for AI Selection** β€” Offers an intuitive interface for choosing and configuring different AI platforms (e.g., ChatGPT, Midjourney, GitHub Copilot).
- 🎨 **Shadcn/ui Component Integration** β€” Utilizes a modern, accessible component library for a consistent and polished user experience.
- πŸ”„ **Prompt History & Favorites** β€” Saves generated prompts and allows users to mark and retrieve their most effective prompts for future use.
- πŸ€– **Multi-Platform Prompt Optimization** β€” Tailors and refines prompts specifically for platforms like ChatGPT, Midjourney, and GitHub Copilot.

---

## πŸ› οΈ Tech Stack

**🎨 Frontend**
| Technology | Purpose |
|---|---|
| **Next.js** | React framework for server-side rendering and static site generation |
| **React** | UI library for building interactive user interfaces |
| **TypeScript** | Statically typed superset of JavaScript for enhanced code quality |
| **Radix UI** | Unstyled, accessible component primitives for building UI components |
| **shadcn/ui** | Reusable UI components built on Radix UI and Tailwind CSS |
| **Tailwind CSS** | Utility-first CSS framework for rapid UI development |

**βš™οΈ Backend & Infrastructure**
| Technology | Purpose |
|---|---|
| **Google Gemini API** | AI model for prompt generation and optimization |

---

## πŸ“‹ Prerequisites

> ⚠️ Make sure you have all of these installed before starting.

1. **Node.js 18+** β€” [Download](https://nodejs.org) Β· Check: `node --version`
2. **npm** β€” Comes with Node.js Β· Check: `npm --version`
3. **Google Gemini API Key** β€” [Get a key](https://ai.google.dev/gemini-api/docs/get-started/node)

---

## βš™οΈ Installation

### Step 1 β€” Clone the repository

```bash
git clone https://github.com/het2576/PromptCraft.git
cd PromptCraft
```

### Step 2 β€” Install dependencies

```bash
npm install
```

### Step 3 β€” Configure environment

```bash
cp .env.example .env.local
```

> πŸ’‘ Open `.env.local` and fill in your values. See [Environment Variables](#-environment-variables) below.

---

## πŸ” Environment Variables

Create a `.env.local` file in the project root:

```env
# βœ… Required: API key for authenticating with the Google Gemini AI model
NEXT_PUBLIC_GEMINI_API_KEY=your_google_gemini_api_key_here
```

| Variable | Required | Description |
|---|---|---|
| `NEXT_PUBLIC_GEMINI_API_KEY` | βœ… Yes | API key for authenticating with the Google Gemini AI model |

> πŸ”’ **Never commit your `.env.local` file.** It's already in `.gitignore`.

---

## πŸš€ Usage

### Development Server

```bash
npm run dev
```

Open **http://localhost:3000** in your browser.

### Quick Start Example

Once the development server is running and you've configured your `NEXT_PUBLIC_GEMINI_API_KEY`, navigate to `http://localhost:3000` in your web browser.

1. **Input your prompt idea**: In the main input area, describe what you want the AI to do (e.g., "Write a short story about a robot chef").
2. **Select AI Platform**: Choose your target AI platform from the available options (e.g., "ChatGPT", "Midjourney").
3. **Generate Prompt**: Click the "Generate Prompt" button. PromptCraft will then use the Google Gemini API to craft an optimized prompt based on your input and selected platform.
4. **Review and Refine**: The generated prompt will appear, ready for you to copy, save to your history, or mark as a favorite. You can then use this optimized prompt directly in your chosen AI tool.

---

## πŸ“ Project Structure

```
PromptCraft/
β”œβ”€β”€ app/ # Next.js App Router pages and API routes
β”‚ β”œβ”€β”€ api/ # (Optional) Backend API routes for server-side logic
β”‚ └── page.tsx # Main application entry point and root page
β”œβ”€β”€ components/ # Reusable UI components (e.g., Shadcn/ui, custom elements)
β”œβ”€β”€ lib/ # Utility functions and AI service integrations (e.g., Gemini client)
β”œβ”€β”€ public/ # Static assets like images, icons, and fonts
β”œβ”€β”€ styles/ # Global CSS and Tailwind CSS configuration
β”œβ”€β”€ .env.example # Template for environment variables
β”œβ”€β”€ package.json # Project dependencies and npm scripts
β”œβ”€β”€ tailwind.config.ts # Tailwind CSS configuration file
β”œβ”€β”€ tsconfig.json # TypeScript configuration for the project
└── README.md # This documentation file
```

The project follows a standard Next.js App Router structure, organizing code logically into `app/` for pages and routes, `components/` for UI elements, and `lib/` for core utilities and external service integrations. This modular approach promotes maintainability and scalability.

---

## 🀝 Contributing

Contributions make this project better. Here's how to get involved:

### πŸ› Reporting Bugs

Before creating a bug report:
- βœ… Check the [existing issues](https://github.com/het2576/PromptCraft/issues)
- βœ… Collect your environment details (OS, Node version, browser)
- βœ… Reproduce the bug consistently

**[Create a bug report β†’](https://github.com/het2576/PromptCraft/issues/new)**

### πŸ’‘ Suggesting Features

Feature suggestions are tracked as GitHub issues.

**[Suggest a feature β†’](https://github.com/het2576/PromptCraft/issues/new)**

### πŸ”§ Pull Requests

1. 🍴 **Fork** the repository
2. 🌿 **Create** a feature branch: `git checkout -b feat/amazing-feature`
3. πŸ’Ύ **Commit** your changes: `git commit -m 'feat: add amazing feature'`
4. πŸ“€ **Push** to the branch: `git push origin feat/amazing-feature`
5. πŸ” **Open** a Pull Request

**Commit convention:** We use [Conventional Commits](https://conventionalcommits.org)
- `feat:` β€” new feature
- `fix:` β€” bug fix
- `docs:` β€” documentation only
- `refactor:` β€” code change, no feature or fix
- `test:` β€” add or update tests

---

## πŸ“„ License

This project is licensed under the **MIT License**.

You're free to use, modify, and distribute this project for any purpose.
See the [LICENSE](LICENSE) file for full details.

---

<div align="center">

### Built with ❀️ by [het2576](https://github.com/het2576)

If this project helped you, consider giving it a ⭐

[⭐ Star this repo](https://github.com/het2576/PromptCraft) Β· [πŸ› Report a Bug](https://github.com/het2576/PromptCraft/issues) Β· [πŸ’‘ Request a Feature](https://github.com/het2576/PromptCraft/issues)

</div>
4 changes: 2 additions & 2 deletions components/navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const Navbar = () => {
className="rounded-full bg-white/40 dark:bg-gray-800/30 backdrop-blur-lg border border-purple-200/20 dark:border-purple-800/20 hover:bg-purple-100/30 dark:hover:bg-purple-900/30 shadow-sm"
asChild
>
<Link href="https://github.com" target="_blank" rel="noopener noreferrer">
<Link href="https://github.com/het2576/PromptCraft" target="_blank" rel="noopener noreferrer">
<Github className="h-[1.2rem] w-[1.2rem] text-gray-700 dark:text-gray-300" />
<span className="sr-only">GitHub</span>
</Link>
Expand All @@ -97,4 +97,4 @@ const Navbar = () => {
);
};

export default Navbar;
export default Navbar;
Loading