PostCraft AI

• 

  The Exact UI In Desktop

• 

  When Server Response

• 

  Mobile UI View

• 

  Mobile UI View

Inspiration

As content creators and developers, we spent hours on repetitive busywork—writing captivating captions, researching trending SEO hashtags, formatting posts for different platforms, and managing distribution friction. We wanted to eliminate this hassle so creators could spend 90% of their time actually creating and only 10% managing distribution. This inspired us to build PostCraft AI—a fast, serverless-friendly automation tool that streamlines social media content creation in seconds.

What it does

PostCraft AI is an all-in-one social media automation suite designed to simplify creator workflows:

• AI Caption & SEO Hashtag Generator: Instantly converts raw thoughts, prompts, or video summaries into platform-tailored captions and optimized hashtags.
• Multi-Platform Content Formatting: Automatically formats and previews content specifically for Twitter/X, LinkedIn, Facebook, and Instagram.
• 1-Click Clipboard & Local History: Enables instant copying of generated posts and saves post history locally in the browser without setup friction.

How we built it

We engineered PostCraft AI using a lightweight, fast, and secure web stack:

• Frontend UI: Responsive, single-page application built with clean HTML5, CSS3, modern ES6+ JavaScript, and FontAwesome 6 icons.
• Backend Proxy Gateway: Built with Node.js and Express.js to securely execute server-to-server calls and prevent direct API key exposure.
• Environment Security: Utilized dotenv (.env) on the backend to keep sensitive credentials completely secure.
• AI Integration: Integrated Google Gemini REST API for rapid, contextual text generation and metadata analysis.
• Client State Management: Utilized Browser LocalStorage API to maintain fast user history persistence without external database overhead.

Challenges we ran into

• API Key Security in Frontend: Exposing API keys in client-side JavaScript poses severe security risks. We solved this by architecting a lightweight Node.js Express proxy gateway to handle external requests securely via .env.
• Prompt Engineering & Output Consistency: Ensuring the AI consistently returned structured data for multi-platform formatting without hallucinations required strict system prompt tuning.
• Rate Limits & Latency: Managing API call limits efficiently while maintaining low-latency responses for seamless DOM rendering.
• Time Constraints: Building a fully functional end-to-end prototype within the short hackathon timeframe meant prioritizing core utility over complex database dependencies.

Accomplishments that we're proud of

• Successfully shipping a fully functional MVP from scratch during the hackathon window.
• Establishing a secure architecture that bridges a lightweight Vanilla JS UI with an Express.js API proxy gateway.
• Creating an intuitive, responsive interface that reduces a 30-minute content preparation process to a 10-second automation.

What we learned

• Deepened our experience in system prompt optimization and structuring serverless-friendly Express backend workflows.
• Mastered client-side DOM manipulation and state persistence using LocalStorage without relying on heavy frontend frameworks.
• Learned how to scope an MVP effectively under high time pressure without sacrificing functional stability and application security.

What's next for PostCraft AI

• Auto-Scheduling & Direct API Posting: Direct integration with Meta Graph API and Twitter API v2 to auto-publish scheduled posts.
• AI Banner & Image Generator: Integrating text-to-image models for fully automated visual media generation.
• Multi-Language Support: Adding native support for regional languages (such as Bengali and English) for broader creator accessibility.

Built With

• ai
• css3
• express.js
• fontawesome
• git
• github
• google-gemini
• html5
• javascript
• node.js
• react
• render
• responsive
• rest-api
• ui