AI Blog Writer

🎯 Problem Statement

Enables users to generate blog posts with generative AI and participate in real-time commenting, with live updates during both writing and discussion

✨ Key Features

👤 User Signup & Verification: Secure signup with email verification
📝 Rich Markdown Editor: Intuitive editor with rich formatting
🤖 AI-Powered Generation: AI-generated content, summaries, and cover photos
🖼️ Personalized Profiles: Customizable profiles with avatars
🔐 Secure Account Management: Robust password and account management

🔔 Real-Time Notifications: Instant alerts for new posts and comments
🔒 JWT Authentication: Secure auth with refresh token mechanism
📄 Pagination: Efficient pagination for blogs and comments
💬 Toast Notifications: User-friendly status messages

🛠 Tech Stack

Frontend

React with TypeScript for type-safe development
Tailwind CSS for styling and responsive design
React Hook Form + Zod for form handling and validation

Zustand for state management
React Quill for rich text editing
Socket.io for real-time notifications

Backend

Node.js with NestJS framework
TypeORM for database interactions
PostgreSQL for data persistence
JWT tokens for authentication & authorization

Socket.io for real-time notifications
OpenAI API integration for content generation
Nodemailer for email verification
Crypto for password hashing

Infrastructure

Azure Blob Storage for avatar and cover image storage
Railway for containerized full-stack deployment
Resend for reliable email delivery service
Environment Variables for secure configuration

🏗 Architecture Highlights

🔧 RESTful API Design: Clean endpoints with proper status codes
⚡ Real-Time Communication: WebSocket integration via Socket.io
🤖 AI Integration: OpenAI API with error handling
🔒 Secure Authentication: JWT with refresh token rotation
📊 Data Management: TypeORM with PostgreSQL

☁️ Scalable Storage: Azure Blob Storage integration
🎨 Component-Based UI: Modular React components
📧 Email System: Resend integration with templates
🛡️ Validation Pipeline: Zod validation on both ends
🔄 Optimistic UI Updates: Immediate feedback with rollbacks

🧩 Challenges & Solutions

OpenAI API Integration & Error Handling

Problem: Managing API rate limits, handling streaming responses, and ensuring reliable content generation

Solution: Implemented robust error handling with retry logic, request queuing, and graceful fallbacks

Rich Text Editor & Markdown Conversion

Problem: Preserving formatting when converting between rich text and Markdown

Solution: Built custom serialization pipeline using React Quill with HTML-to-Markdown conversion

File Upload & Storage Architecture

Problem: Securely handling images with efficient storage and retrieval

Solution: Implemented Azure Blob Storage with presigned URLs for direct uploads

Efficient Pagination & Real-time Updates

Problem: Balancing performance with real-time features

Solution: Combined cursor-based pagination with Socket.io real-time updates

📚 Learning Outcomes

🎯 Backend Development

NestJS Architecture: Mastered dependency injection, modules, and decorators
Error Handling: Implemented try/catch blocks for robust error management
API Response Structure: Designed consistent response format
Authentication Security: Configured Passport.js and JWT tokens
Database Design: Crafted efficient relational schema
Transactional Operations: Used TypeORM's QueryRunner for safe transactions

Azure Blob Storage: Integration for secure, scalable file storage
OpenAI API: Leveraged o4-mini model with streaming responses
Token Quota Enforcement: Enforced per-user AI token limits
Server-Side Pagination: Optimized database queries
Real-Time Notifications: Built Socket.io channels for live events
Unit Testing: Validated business logic and reliability

⚛️ Frontend Development

Zustand State Management: Centralized store for credentials and state
Tailkit UI Components: Consistent design system and intuitive flows
Rich Markdown Editing: React Quill integration for rich-text support
Toast Notifications: Contextual messages for user actions
HTTP Client Configuration: Axios with automatic JWT token handling
TypeScript Everywhere: Type safety throughout components and hooks

Clean Architecture: Separated API modules and custom hooks
Form Validation: Zod schemas with React Hook Form
AI Response Handling: User-friendly error messages on failures
Flexible Cover Image Upload: Local uploads or AI generation
AI Token Usage Display: Real-time UI indicators for consumption
Client-Side Pagination: Implemented with server-side metadata

🔧 DevOps & Deployment

Railway Deployment: Hosted full-stack application and PostgreSQL database for seamless CI/CD and scaling
GitHub Actions: Automated backend and frontend unit & integration tests in a CI pipeline
Resend Integration: Deployed email verification workflows using transactional email service
Secret Management: Stored API keys in Railway Secrets for secure configuration
Azure Blob Storage: Provisioned via environment variables for secure file storage

📸 Screenshots

This project showcases the ability to design and deliver a robust, production-ready AI-powered blogging platform. By combining modern frontend and backend technologies with real-time features, secure authentication, and seamless AI integration, it demonstrates strong skills in full-stack development, cloud infrastructure, and user experience design.

Technologies mastered

React, TypeScript, NestJS, PostgreSQL, Azure storage, Socket.io, Passport, JWT Authentication, Railway Deployment