A modern social media caption generation web application built with React, TypeScript, and Supabase, designed with AI-powered caption generation as a future enhancement.
CaptionCraft was developed as a final-year mini project. The application allows users to upload an image, select a desired mood, and generate engaging social media captions. The project focuses on frontend development, authentication, database integration, and responsive user experience while exploring AI-assisted content generation.
Current Status
- ✅ Frontend Completed
- ✅ User Authentication Implemented
- ✅ Database Integration Completed
- ✅ Responsive UI Developed
- 🚧 AI Caption Generation Planned for Future Enhancement
Creating engaging social media captions can often be time-consuming and creatively challenging. CaptionCraft aims to simplify this process by allowing users to upload an image, choose a mood, and receive context-appropriate captions through an intuitive and user-friendly interface.
- Upload images from your device
- Capture photos directly using your camera
- Select from multiple caption moods
- User authentication and profile management
- Responsive interface for desktop and mobile devices
- Save favorite captions
- Clean and modern UI/UX
| Frontend | Backend | Database | Deployment |
|---|---|---|---|
| React, TypeScript, Tailwind CSS | Supabase | PostgreSQL | Vercel |
git clone <repository-url>
cd captioncraftnpm install- Create a project on Supabase
- Copy the Project URL and Anon Key
- Create a
.envfile using.env.example
npm run devnpm run buildThe project utilizes the following Supabase tables:
users– User authentication and profilescaptions– Generated captions and user historyfavorites– Saved captions
One of the primary goals of CaptionCraft was to integrate AI-powered caption generation using external APIs.
During development, OpenAI API integration was initially explored. Due to API credit limitations, Hugging Face APIs were evaluated as an alternative. While the AI generation feature could not be fully completed within the project timeline, the experience provided valuable insight into API integration, authentication workflows, application architecture, and managing third-party service limitations.
Despite this, the project successfully demonstrates frontend development, user authentication, database integration, responsive design, and deployment workflows.
- Integrate OpenAI API for intelligent caption generation
- Improve image analysis for more contextual captions
- Generate hashtags alongside captions
- Support multiple languages
- Add caption history and analytics
- Develop a mobile application
Through this project, I gained practical experience in:
- React and TypeScript development
- Component-based frontend architecture
- Supabase Authentication
- PostgreSQL database integration
- Responsive UI/UX design
- Git and GitHub collaboration
- Deploying applications using Vercel
- Planning and integrating AI-powered application workflows
Rida Seemeen
Project Collaborator: Mustakheem Sayem Fathima
If you found this project interesting, consider giving it a ⭐ on GitHub!