Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rayeesrather99/seo-content-gen-bot
SEO Content Generator is a full-stack web application powered by AI that helps create SEO-optimized and engaging content based on user input. Built with React and Node.js, it integrates Gemini API for content generation and Framer Motion for smooth UI animations. The app simplifies content creation while ensuring it resonates with target audien
https://github.com/rayeesrather99/seo-content-gen-bot
api asynchronous-programming cors express framer-motion gemini nodejs reactjs render seo
Last synced: about 5 hours ago
JSON representation
SEO Content Generator is a full-stack web application powered by AI that helps create SEO-optimized and engaging content based on user input. Built with React and Node.js, it integrates Gemini API for content generation and Framer Motion for smooth UI animations. The app simplifies content creation while ensuring it resonates with target audien
- Host: GitHub
- URL: https://github.com/rayeesrather99/seo-content-gen-bot
- Owner: rayeesrather99
- License: mit
- Created: 2025-01-07T18:28:30.000Z (12 days ago)
- Default Branch: main
- Last Pushed: 2025-01-19T11:55:40.000Z (about 10 hours ago)
- Last Synced: 2025-01-19T12:48:30.212Z (about 9 hours ago)
- Topics: api, asynchronous-programming, cors, express, framer-motion, gemini, nodejs, reactjs, render, seo
- Language: JavaScript
- Homepage: https://seo-content-gen-bot-frontend.onrender.com/
- Size: 37.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Full-Stack SEO Content Generator with AI and Smooth UI Animations
## Overview
The Full-Stack SEO Content Generator is a web application designed to generate engaging, search-engine-optimized content using AI. It leverages user input to produce high-quality content tailored to specific needs, such as tone, target audience, and desired length. The application features smooth UI animations and a responsive design.
## Features
- **AI-Powered Content Generation**: Accepts inputs like topic, keywords, audience, and tone to create optimized content.
- **Smooth Animations**: Built with Framer Motion for seamless UI transitions.
- **Backend Integration**: Communicates with the Gemini API for AI-driven content creation.
- **Error Handling**: Robust mechanisms to manage asynchronous operations and API responses.
- **User-Friendly Interface**: Simplifies the content generation process with an intuitive design.
## Tech Stack
### Frontend
- **React**
- **Framer Motion**
### Backend
- **Node.js**
- **Express**
- **Gemini API**
- **CORS**
### Deployment
- **Render**
## Challenges and Solutions
1. **Asynchronous Operations**: Implemented error handling to manage asynchronous requests and avoid race conditions.
2. **Nested API Data**: Used logging and inspection tools to process complex JSON structures effectively.
3. **Prompt Engineering**: Experimented with different prompts to achieve optimal content quality.
4. **Deployment Issues**: Resolved configuration challenges with backend services and file paths on Render.
## Installation and Setup
### Prerequisites
- Node.js and npm installed
- Render account for deployment
### Steps
1. Clone the repository:
```bash
git clone https://github.com/your-repo-name.git
```
2. Navigate to the project directory:
```bash
cd seo-content-generator
```
3. Install dependencies:
```bash
npm install
```
4. Create a `.env` file and add your Gemini API key and other configurations:
```env
GEMINI_API_KEY=your_api_key
```
5. Start the development server:
```bash
npm run start
```
6. Access the application at `http://localhost:3000`.
## Deployment
1. Push the project to a Git repository.
2. Connect the repository to Render.
3. Configure the environment variables in Render.
4. Deploy the application.
## Live Demo
Try the application here: [SEO Content Generator](https://seo-content-gen-bot-frontend.onrender.com/)
## Contributing
1. Fork the repository.
2. Create a new branch:
```bash
git checkout -b feature-name
```
3. Commit your changes:
```bash
git commit -m 'Add some feature'
```
4. Push to the branch:
```bash
git push origin feature-name
```
5. Open a pull request.
## Feedback and Support
I welcome feedback and suggestions! Feel free to open an issue or reach out for further improvements.
## License
This project is licensed under the MIT License.
---
### Hashtags
#WebDev #LearningToCode #AI #SEO #React #Nodejs #Gemini #FramerMotion #FullStackDevelopment #JavaScript #Programming #SoftwareDevelopment #Render #Deployment