This post is my submission for DEV Education Track: Build Apps with Google AI Studio.
What I Built
RoastIt - a social platform where users upload images and receive humorous "roasts" (playful comments) from the community. A fun, lighthearted social network for creativity and humor!
Tech Stack: Next.js 15, React 19, TypeScript, PostgreSQL, Prisma, NextAuth.js, Cloudinary, Vercel
Key Features:
- Google OAuth authentication
- Image upload with Cloudinary
- Community roasting (commenting)
- User profiles
- Responsive design
🚀 Live Demo: https://roastit.vercel.app/
My Experience
Key Challenges & Solutions
Database Migration: Started with SQLite, migrated to PostgreSQL for Vercel deployment. Learned about environment compatibility and proper database selection.
NextAuth.js Setup: Configured Google OAuth with proper cookie management and secure production settings.
Next.js 15 Integration: Worked with the latest App Router, server/client components, and TypeScript for type safety.
What I Learned
- Modern Next.js development patterns
- Database design with Prisma ORM
- Cloud integration (Cloudinary, Vercel)
- Production deployment considerations
- Building engaging social features
Surprising Discoveries
- Next.js 15's developer experience is exceptional
- Prisma's type safety prevents numerous bugs
- Vercel's deployment process is seamlessly automated
- Community features require thoughtful UX design
Google AI Studio Benefits
Google AI Studio is incredibly valuable for developers because it:
Rapid Development: Generate complete applications from text prompts, prototype ideas quickly, iterate fast on concepts.
AI Integration: Seamless Gemini API integration, pre-built workflows, smart code generation following best practices.
Learning Tool: Learn by example with production-ready code, understand modern patterns, explore new technologies easily.
Perfect for RoastIt: Could enhance the platform with AI-generated roast suggestions, smart content moderation, personalized recommendations, and automatic image tagging.
Production Ready: Generates modern tech stacks (React, Next.js, TypeScript) with proper error handling, responsive design, and deployment configuration.
Conclusion
Building RoastIt taught me modern web development while creating something engaging and fun. The project emphasized choosing the right tools and planning for production from the start.
Future Features: AI-powered roast suggestions, image categorization, voting system, user badges, real-time notifications.
Try RoastIt: https://roastit.vercel.app/
Source Code: GitHub Repository
Thanks for reading! Follow for more web development content and project breakdowns.
Top comments (0)