Quibbble – Dribbble-Style Design Portfolio, Hiring & Project Management Platform (16+ Core Modules)
Sometimes Envato’s live preview system temporarily breaks links. Please use the direct demo link with credentials mentioned below :
LIVE DEMO – Try Before You Buy!
Live Application: Quibbble
User Demo Credentials:>
- Email: [email protected]
- Password:WebBuddy@123
How to Install Video Documentation:
- Link: https://envato.webbuddy.agency/docs
Quibbble is a complete, production-ready web application that enables designers to showcase their creative work, discover inspiring designs, and build their professional network. Built with Next.js 14 and TypeScript, this application provides a seamless experience for uploading design portfolios, engaging with the community, and growing your following. The platform features a modern, responsive design and includes everything needed to run a design portfolio platform, from user authentication to payment processing.
⚠️ Important: External API Costs Disclaimer
Please note that this application requires external API services to function, and you will incur costs based on your usage of these services.
This application integrates with several third-party services that charge fees based on usage:
- Stripe – Charges a transaction fee of 2.9% plus $0.30 per successful payment transaction when users pay for design uploads. You pay Stripe for each transaction processed.
- MongoDB Atlas – Free tier available for development, but production use requires a paid plan based on storage and usage.
- AWS S3 – Charges based on storage used and data transfer. Free tier includes 5GB storage for 12 months, then pay-as-you-go pricing applies.
- SMTP Email Service – Required for password reset functionality. Free tiers available (e.g., Gmail SMTP, SendGrid free tier), but production use may require paid plans based on email volume.
- Google OAuth – Free for authentication, but requires Google Cloud Platform account setup.
You are responsible for all costs associated with these external services. The purchase price of this application includes only the source code and does not include any API credits, service subscriptions, or usage fees. Before deploying this application, please review the pricing pages of all required services to understand the costs you will incur based on your expected usage volume.
While many services offer free tiers suitable for development and testing, production use will require paid plans. Ensure you have budgeted for ongoing API costs based on your expected user base and usage patterns.
Key Features
Design Portfolio Upload
Upload and showcase your design work with professional image support. The application supports single image uploads per post with AWS S3 integration for secure, scalable storage. Each design can be organized with categories, tags (up to 20 per post), and detailed descriptions to help your work get discovered.
Five Design Categories
Users can organize their work into five professional categories to match their design style:
- Coding – Developer-focused designs, code snippets, and technical illustrations
- UIUX – User interface and user experience designs, wireframes, and prototypes
- Photography – Photographic work, image compositions, and visual storytelling
- Design – General design work including graphics, illustrations, and visual art
- Portfolio – Portfolio showcases, case studies, and project presentations
Post Customization Options
The application provides extensive customization options for design posts:
- Custom title for each design post
- Detailed description explaining your design process and inspiration
- Category selection from five available categories
- Up to 20 tags per post for better discoverability
- Single high-quality image per post (JPG, PNG, GIF, WebP formats supported)
- Maximum file size of 10MB per image
Upload Workflow
The application features an intuitive upload process that guides users through publishing their designs:
- Image Upload – Upload your design image (drag and drop or click to upload)
- Title Entry – Add a descriptive title for your design
- Continue to Details – Proceed to the detailed form
- Complete Information – Add description, select category, and add tags
- Payment – Complete one-time payment via Stripe Checkout
- Automatic Publishing – Your design is instantly published after successful payment
User Management
Complete user management system with the following features:
- User authentication powered by NextAuth.js with Google OAuth and email/password
- User profiles with auto-generated avatars (consistent gradient with user initials)
- Profile pages showcasing all user designs
- Follower and following system
- User profile management with username and slug
- Password reset functionality via secure email tokens
Pay-Per-Upload System
Simple and transparent pay-per-upload pricing model:
- One-time payment per design upload
- No subscriptions or recurring fees
- Payment required before publishing
- Secure Stripe Checkout integration
- Automatic post publishing after successful payment
Configure your upload price in Stripe Dashboard (one-time price, not recurring). Users pay once per design they want to publish, giving them full control over their spending.
Payment Processing
Integrated Stripe payment system for secure upload payments. The application handles checkout sessions, webhook processing, and automatic post publishing upon successful payment. All payments are processed securely through Stripe’s platform.
Post Management
Users can manage their uploaded designs through comprehensive features:
- View all uploaded designs in a portfolio gallery
- Edit post details (title, description, category, tags) without additional payment
- Delete posts they no longer want to showcase
- Track view counts on each design
- Monitor engagement metrics (likes, comments, bookmarks)
Social Engagement
Built-in social features to help users connect and engage with the community:
- Like designs with real-time updates
- Comment on designs to provide feedback
- Bookmark favorite designs for later viewing
- Follow designers to see their latest work
- View follower and following counts
Real-Time Notifications
Server-Sent Events (SSE) powered notification system that provides instant updates:
- Notifications for likes on your posts
- Notifications for comments on your posts
- Notifications when someone follows you
- Real-time notification badge updates (every 3 seconds)
- Mark all notifications as read functionality
Technical Specifications
Technology Stack
- Framework: Next.js 14 with App Router
- Language: TypeScript
- UI Library: Tailwind CSS with custom components
- Database: MongoDB with Mongoose ODM
- Authentication: NextAuth.js with Google OAuth and email/password
- Payments: Stripe (one-time payments for uploads)
- File Storage: AWS S3 for image uploads
- Real-time: Server-Sent Events for notifications
- State Management: Zustand for client-side state
- Animations: Framer Motion
System Requirements
- Node.js 18 or higher
- npm or yarn package manager
- MongoDB database (MongoDB Atlas recommended)
- API keys for required services
Deployment Options
The application can be deployed on:
- AWS EC2 (recommended for production with full file upload support)
- Vercel (for development and testing, may have limitations with large file uploads)
- Any Node.js hosting platform
API and Service Requirements
To run this application, you will need to create accounts and obtain API keys from the following services. Some services offer free tiers suitable for development and small-scale production use.
Required Services
Stripe
Stripe processes credit card payments for design uploads. Stripe charges a transaction fee of 2.9% plus $0.30 per successful transaction. There are no monthly fees for standard accounts. You must create a one-time price (not recurring) in Stripe Dashboard for the upload payment. Visit Stripe pricing page for complete fee structure.
MongoDB Atlas
MongoDB Atlas provides the database for storing user data, posts, comments, likes, bookmarks, and notifications. The free tier (M0 Sandbox) includes 512MB storage, which is sufficient for development and small applications. Paid plans are required for production use with larger datasets. Check MongoDB Atlas pricing for details.
AWS S3
AWS S3 provides secure file storage for uploaded design images. The free tier includes 5GB storage for 12 months, then pay-as-you-go pricing applies based on storage used and data transfer. You’ll need to create an S3 bucket and configure proper permissions. Check AWS S3 pricing for current rates.
NextAuth.js
NextAuth.js handles user authentication with Google OAuth and email/password. The library itself is free and open-source. You’ll need to set up Google OAuth credentials in Google Cloud Platform (free) and configure SMTP for password reset emails.
SMTP Email Service
SMTP email service is required for password reset functionality. Free options include Gmail SMTP (with app password) or services like SendGrid (free tier: 100 emails/day). Paid plans are available for higher email volumes. Check your chosen SMTP provider’s pricing for details.
Optional Services
Google OAuth
Google OAuth provides social login functionality. Free to use, but requires Google Cloud Platform account setup and OAuth credentials configuration.
Installation and Setup
The application includes comprehensive documentation covering:
- Environment variable configuration
- MongoDB database setup
- NextAuth.js authentication setup
- Google OAuth configuration
- AWS S3 bucket setup and configuration
- Stripe payment setup (one-time price configuration)
- SMTP email configuration for password reset
- Deployment guides for AWS EC2 and Vercel
- Frontend customization guide
- Pricing and upload payment configuration
All setup instructions are provided in HTML documentation files included with the purchase. The documentation includes step-by-step guides with screenshots and code examples.
What’s Included
- Complete Next.js 14 application source code
- TypeScript source files
- All UI components and styling
- Server actions for posts, comments, likes, bookmarks, and notifications
- API routes for authentication, uploads, webhooks, and notifications
- Database schema and models
- Authentication integration (NextAuth.js with Google OAuth and email/password)
- Payment processing integration (Stripe pay-per-upload)
- File upload implementation (AWS S3)
- Real-time notifications (Server-Sent Events)
- Comprehensive HTML documentation
- Environment variable templates
- Deployment configuration files
Customization
The application is fully customizable:
- Modify upload pricing in Stripe Dashboard
- Customize design categories and tags
- Adjust file upload size limits and supported formats
- Change color schemes and branding
- Modify UI components and layouts
- Add custom features and functionality
- Customize user avatar gradients and styling
Support and Updates
This is a complete, production-ready application. The code follows Node.js best practices and Envato submission requirements. All code is well-structured, documented, and ready for deployment. The application uses Clean Architecture principles, ensuring business logic is separated from UI components for maintainability and scalability.