React AI Blog

A modern React blog application with AI-powered content generation using OpenAI's GPT-4o-mini model.

Features

• 📝 Create, view, and manage blog posts
• 🤖 AI-powered blog content generation using OpenAI
• 🎨 Clean, responsive UI with Bootstrap
• 🔄 Real-time data with JSON Server
• ⚡ Fast development with Vite

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher)
• npm (comes with Node.js)
• An OpenAI API key

Setup Instructions

1. Clone the repository

git clone <your-repo-url>
cd react-ai-blog

2. Install dependencies

npm install

3. Install JSON Server (globally)

npm install -g json-server

4. Create the environment file

Create a .env file in the project root directory:

# Windows (PowerShell)
New-Item -Path .env -ItemType File

# Or manually create .env file

Add your OpenAI API key to the .env file:

VITE_OPENAI_API_KEY=sk-your-openai-api-key-here

⚠️ Important: Never commit your .env file to version control. It should already be in .gitignore.

5. Get your OpenAI API Key

1. Go to OpenAI Platform
2. Sign in or create an account
3. Navigate to API Keys section
4. Click Create new secret key
5. Copy the key and paste it in your .env file

Running the Application

You need to run two terminals - one for the JSON Server (backend) and one for the React app (frontend).

Terminal 1: Start JSON Server

json-server --watch data/db.json --port 3001

This starts the mock API server at http://localhost:3001

Terminal 2: Start React Development Server

npm run dev

This starts the Vite dev server at http://localhost:5173

Usage

1. Open your browser and go to http://localhost:5173
2. Browse existing blog posts on the home page
3. Click Create Blog to add a new post
4. Enter a blog title
5. Click "Generate Blog Body using AI" to auto-generate content using OpenAI
6. Select an author and submit

Project Structure

react-ai-blog/
├── data/
│   └── db.json              # JSON Server database
├── src/
│   ├── pages/
│   │   ├── About.jsx        # About page
│   │   ├── BlogDetails.jsx  # Single blog view
│   │   ├── Blogs.jsx        # Blog list component
│   │   ├── CreateBlog.jsx   # Create blog with AI generation
│   │   ├── Footer.jsx       # Footer component
│   │   ├── Header.jsx       # Navigation header
│   │   ├── Home.jsx         # Home page
│   │   ├── NotFound.jsx     # 404 page
│   │   └── useFetch.js      # Custom fetch hook
│   ├── App.jsx              # Main app component
│   ├── App.css              # App styles
│   ├── index.css            # Global styles
│   └── main.jsx             # Entry point
├── .env                     # Environment variables (create this)
├── .gitignore
├── package.json
├── vite.config.js
└── README.md

API Endpoints (JSON Server)

Method	Endpoint	Description
GET	/blogs	Get all blogs
GET	/blogs/:id	Get a single blog
POST	/blogs	Create a new blog
DELETE	/blogs/:id	Delete a blog

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Run ESLint

Tech Stack

• Frontend: React 19, React Router 7
• Build Tool: Vite 7
• AI: OpenAI API (GPT-4o-mini)
• Mock Backend: JSON Server
• Styling: Bootstrap 5

Troubleshooting

"Missing credentials" error

Make sure your .env file exists and contains VITE_OPENAI_API_KEY. Restart the Vite server after creating/modifying the .env file.

JSON Server not found

Install it globally: npm install -g json-server

Port already in use

• Change JSON Server port: json-server --watch data/db.json --port 3002
• Update the fetch URLs in your components accordingly

License

MIT